webspresso 0.0.110 → 0.0.111

package/core/client/devtool.js

@@ -15,16 +15,15 @@
  */
 
 const { defaultStorage } = require('./storage');
+const { isArray, isNumber } = require('./utils');
 
 const DEVTOOL_HOST_ID = 'webspresso-client-devtools-host';
 
-const PKG_VERSION = (() => {
-  try {
-    return require('../../package.json').version || '0.0.110';
-  } catch (_) {
-    return '0.0.110';
-  }
-})();
+const PKG_VERSION =
+  (typeof window !== 'undefined' &&
+    window.__WEBSPRESSO_DEV_META__ &&
+    window.__WEBSPRESSO_DEV_META__.version) ||
+  '0.0.110';
 
 /**
  * Connect to Redux DevTools browser extension if installed.
@@ -176,10 +175,61 @@ function mountDevtool(runtime, options = {}) {
   const position = options.position || 'bottom-right';
   const isRight = position.includes('right');
   const studioUrl = options.studioUrl || 'http://localhost:4567';
+  let metaOverrides =
+    options.meta && typeof options.meta === 'object' ? { ...options.meta } : {};
   let isOpen = Boolean(options.open);
   let activeTab = 'controllers'; // 'controllers' | 'fragments' | 'network' | 'storage' | 'studio'
   let selectedControllerId = null;
 
+  function resolveDevFeatures() {
+    const winMeta =
+      typeof window !== 'undefined' &&
+      window.__WEBSPRESSO_DEV_META__ &&
+      typeof window.__WEBSPRESSO_DEV_META__ === 'object'
+        ? window.__WEBSPRESSO_DEV_META__
+        : {};
+    const merged = { ...winMeta, ...metaOverrides };
+    const pluginsList = isArray(merged.plugins)
+      ? merged.plugins
+      : isArray(options.plugins)
+        ? options.plugins
+        : [];
+
+    const hasStudio =
+      options.hasStudio !== undefined
+        ? Boolean(options.hasStudio)
+        : merged.hasStudio !== undefined
+          ? Boolean(merged.hasStudio)
+          : merged.hasDb !== undefined
+            ? Boolean(merged.hasDb)
+            : Boolean(
+                options.studioUrl ||
+                  pluginsList.includes('studio') ||
+                  pluginsList.includes('db-studio')
+              );
+
+    const hasAdmin =
+      options.hasAdmin !== undefined
+        ? Boolean(options.hasAdmin)
+        : merged.hasAdmin !== undefined
+          ? Boolean(merged.hasAdmin)
+          : Boolean(
+              options.adminPath ||
+                options.adminUrl ||
+                pluginsList.includes('admin-panel') ||
+                pluginsList.includes('adminPanel') ||
+                pluginsList.includes('admin')
+            );
+
+    const adminPath = merged.adminPath || options.adminPath || options.adminUrl || '/_admin';
+    return {
+      hasStudio,
+      hasAdmin,
+      adminPath,
+      plugins: pluginsList,
+    };
+  }
+
   // Initialize Redux DevTools extension bridge if available
   const reduxBridge = setupReduxDevToolsBridge(runtime);
 
@@ -257,6 +307,8 @@ function mountDevtool(runtime, options = {}) {
       flex-direction: column;
       overflow: hidden;
       z-index: 999999;
+    }
+    .ws-drawer.ws-drawer-enter {
       animation: wsFadeIn 0.15s ease-out;
     }
     @keyframes wsFadeIn {
@@ -753,33 +805,46 @@ function mountDevtool(runtime, options = {}) {
   }
 
   function renderStudioTab() {
-    return `
-      <div>
-        <div style="margin-bottom:16px;">
-          <strong style="font-size:13px;color:#fff;">Developer Tools & Studio Integrations</strong>
-          <p style="font-size:10px;color:#71717a;">Direct shortcuts to Webspresso's integrated developer productivity tools.</p>
-        </div>
+    const features = resolveDevFeatures();
 
+    const studioCardHtml = features.hasStudio
+      ? `
         <div class="ws-card" style="margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
           <div>
             <div style="font-weight:700;color:#fbbf24;font-size:13px;">🗄️ Webspresso DB Studio</div>
             <div style="font-size:10px;color:#a1a1aa;margin-top:2px;">Visual database browser, query runner, and table inspector.</div>
             <div style="font-size:9px;color:#71717a;margin-top:4px;">Run in terminal: <code>npx webspresso studio</code> (port 4567)</div>
           </div>
-          <a href="${studioUrl}" target="_blank" rel="noopener noreferrer" class="ws-btn ws-btn-primary" style="text-decoration:none;">
+          <a href="${studioUrl}" target="_blank" rel="noopener noreferrer" class="ws-btn ws-btn-primary" id="ws-btn-open-studio" style="text-decoration:none;">
             Open DB Studio ↗
           </a>
         </div>
+      `
+      : '';
 
+    const adminCardHtml = features.hasAdmin
+      ? `
         <div class="ws-card" style="margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
           <div>
             <div style="font-weight:700;color:#38bdf8;font-size:13px;">⚙️ Admin Panel SPA</div>
             <div style="font-size:10px;color:#a1a1aa;margin-top:2px;">Mithril.js model CRUD and staff administration cockpit.</div>
           </div>
-          <a href="/_admin" target="_blank" rel="noopener noreferrer" class="ws-btn" style="text-decoration:none;">
-            Open /_admin ↗
+          <a href="${features.adminPath}" target="_blank" rel="noopener noreferrer" class="ws-btn" id="ws-btn-open-admin" style="text-decoration:none;">
+            Open ${features.adminPath} ↗
           </a>
         </div>
+      `
+      : '';
+
+    return `
+      <div>
+        <div style="margin-bottom:16px;">
+          <strong style="font-size:13px;color:#fff;">Developer Tools & Studio Integrations</strong>
+          <p style="font-size:10px;color:#71717a;">Direct shortcuts to Webspresso's integrated developer productivity tools.</p>
+        </div>
+
+        ${studioCardHtml}
+        ${adminCardHtml}
 
         <div class="ws-card" style="display:flex;align-items:center;justify-content:space-between;">
           <div>
@@ -859,6 +924,9 @@ function mountDevtool(runtime, options = {}) {
     `;
   }
 
+  let lastRenderedHtml = '';
+  let wasOpen = false;
+
   function findInShadow(id) {
     if (shadow && typeof shadow.getElementById === 'function') {
       return shadow.getElementById(id);
@@ -866,8 +934,39 @@ function mountDevtool(runtime, options = {}) {
     return shadow && typeof shadow.querySelector === 'function' ? shadow.querySelector(`#${id}`) : null;
   }
 
-  function updateDom() {
-    container.innerHTML = isOpen ? renderDrawer() : renderPill();
+  function updateDom(force = false) {
+    const nextHtml = isOpen ? renderDrawer() : renderPill();
+    if (!force && nextHtml === lastRenderedHtml && isOpen === wasOpen) {
+      return;
+    }
+
+    // Preserve scroll positions inside drawer before updating DOM
+    let prevContentScrollTop = 0;
+    const prevContentEl =
+      isOpen && wasOpen && shadow && typeof shadow.querySelector === 'function'
+        ? shadow.querySelector('.ws-content')
+        : null;
+    if (prevContentEl) {
+      prevContentScrollTop = prevContentEl.scrollTop || 0;
+    }
+
+    lastRenderedHtml = nextHtml;
+    const openingTransition = isOpen && !wasOpen;
+    wasOpen = isOpen;
+
+    container.innerHTML = nextHtml;
+    if (openingTransition) {
+      const drawerEl = findInShadow('ws-devtool-drawer');
+      if (drawerEl && drawerEl.classList) {
+        drawerEl.classList.add('ws-drawer-enter');
+      }
+    }
+    if (prevContentScrollTop > 0 && shadow && typeof shadow.querySelector === 'function') {
+      const nextContentEl = shadow.querySelector('.ws-content');
+      if (nextContentEl) {
+        nextContentEl.scrollTop = prevContentScrollTop;
+      }
+    }
     bindEvents();
   }
 
@@ -1043,7 +1142,7 @@ function mountDevtool(runtime, options = {}) {
   document.addEventListener('keydown', onKeyDown);
 
   // Periodic polling to keep snapshots live
-  const pollIntervalMs = typeof options.pollInterval === 'number' ? options.pollInterval : 2000;
+  const pollIntervalMs = isNumber(options.pollInterval) ? options.pollInterval : 2000;
   let pollTimer = null;
   if (pollIntervalMs > 0) {
     pollTimer = setInterval(() => {
@@ -1076,6 +1175,12 @@ function mountDevtool(runtime, options = {}) {
     isOpen() {
       return isOpen;
     },
+    setMeta(nextMeta = {}) {
+      if (nextMeta && typeof nextMeta === 'object') {
+        metaOverrides = { ...metaOverrides, ...nextMeta };
+        updateDom();
+      }
+    },
     getSnapshot() {
       return {
         controllers: getControllersSnapshot(),

package/core/client/forms.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const { defaultStorage } = require('./storage');
+const { isArray, setElementBusyState } = require('./utils');
 
 /**
  * Webspresso Native HTML Form Layer & Typed Form Handle
@@ -202,12 +203,12 @@ function parseFormElement(formEl, submitterOrOptions = null) {
   function appendValue(normName, val, forceArray) {
     if (val === undefined) return;
     if (forceArray) {
-      if (!Array.isArray(data[normName])) {
+      if (!isArray(data[normName])) {
         data[normName] = [];
       }
       data[normName].push(val);
     } else if (normName in data) {
-      if (!Array.isArray(data[normName])) {
+      if (!isArray(data[normName])) {
         data[normName] = [data[normName]];
       }
       data[normName].push(val);
@@ -326,7 +327,7 @@ function parseFormElement(formEl, submitterOrOptions = null) {
     formData = new FormData();
     for (const [key, val] of Object.entries(data)) {
       if (val === undefined) continue;
-      if (Array.isArray(val)) {
+      if (isArray(val)) {
         for (const item of val) {
           if (item === undefined) continue;
           if (typeof Blob !== 'undefined' && item instanceof Blob) {
@@ -416,11 +417,15 @@ function computeFormDirty(formEl, initialSnapshot) {
  */
 function createFormHandle(formEl, options = {}) {
   if (formEl && formEl.__wFormHandle) {
+    if (options.services && typeof formEl.__wFormHandle.__setServices === 'function') {
+      formEl.__wFormHandle.__setServices(options.services);
+    }
     return formEl.__wFormHandle;
   }
 
   const api = options.api;
   const debug = options.debug || null;
+  let services = options.services || null;
   const formName =
     (formEl && formEl.getAttribute && formEl.getAttribute('data-w-form')) ||
     (formEl && formEl.getAttribute && formEl.getAttribute('name')) ||
@@ -615,32 +620,32 @@ function createFormHandle(formEl, options = {}) {
    * Toggle pending state on the form and submit buttons to prevent double submissions.
    */
   function setPendingState(nextPending, activeSubmitter = null) {
-    pending = Boolean(nextPending);
+    const next = Boolean(nextPending);
+    if (pending === next) return;
+    pending = next;
     if (!formEl) return;
 
     if (pending) {
       formEl.setAttribute('aria-busy', 'true');
       formEl.setAttribute('data-w-pending', 'true');
+      formEl.setAttribute('data-w-busy', 'true');
     } else {
       formEl.removeAttribute('aria-busy');
       formEl.removeAttribute('data-w-pending');
+      formEl.removeAttribute('data-w-busy');
     }
 
     const submitButtons = formEl.querySelectorAll
       ? formEl.querySelectorAll('button[type="submit"], button:not([type]), input[type="submit"]')
       : [];
+    let submitterHandled = false;
     for (let i = 0; i < submitButtons.length; i++) {
       const btn = submitButtons[i];
-      if (btn.hasAttribute('data-w-disabled')) continue; // Managed by controller binding
-      if (pending) {
-        btn.__wWasDisabled = Boolean(btn.disabled);
-        btn.disabled = true;
-      } else if (!btn.__wWasDisabled) {
-        btn.disabled = false;
-      }
+      if (btn === activeSubmitter) submitterHandled = true;
+      setElementBusyState(btn, pending);
     }
-    if (activeSubmitter && !activeSubmitter.hasAttribute('data-w-disabled')) {
-      activeSubmitter.disabled = pending;
+    if (activeSubmitter && !submitterHandled) {
+      setElementBusyState(activeSubmitter, pending);
     }
     notifyStateChange();
   }
@@ -734,7 +739,7 @@ function createFormHandle(formEl, options = {}) {
         if (type === 'file') continue; // Browser security prevents setting file input value
 
         if (type === 'checkbox') {
-          if (Array.isArray(val)) {
+          if (isArray(val)) {
             ctrl.checked = val.map(String).includes(String(ctrl.value));
           } else {
             ctrl.checked = Boolean(val);
@@ -743,7 +748,7 @@ function createFormHandle(formEl, options = {}) {
           ctrl.checked = String(val) === String(ctrl.value);
         } else if (ctrl.tagName === 'SELECT') {
           if (ctrl.multiple) {
-            const arr = Array.isArray(val) ? val.map(String) : [String(val)];
+            const arr = isArray(val) ? val.map(String) : [String(val)];
             const opts = ctrl.options || [];
             for (let j = 0; j < opts.length; j++) {
               opts[j].selected = arr.includes(String(opts[j].value));
@@ -923,9 +928,18 @@ function createFormHandle(formEl, options = {}) {
       }
 
       // Invoke registered success hooks. Note: Any background fragment refresh failure
-      // is handled by the fragment coordinator and NEVER puts this form into validation error state!
+      // or side-effect service error in onSuccess NEVER puts a succeeded form into validation error
+      // state or makes the completed mutation appear rolled back!
+      let hookError = null;
       for (const listener of successListeners) {
-        await listener(responseData, { values: payloadData, form: handle });
+        try {
+          await listener(responseData, { values: payloadData, form: handle, services });
+        } catch (listenerErr) {
+          if (!hookError) hookError = listenerErr;
+          if (debug && typeof debug.trackCleanupError === 'function') {
+            debug.trackCleanupError(`form_${formName}`, formName, 'form:onSuccess', listenerErr);
+          }
+        }
       }
 
       // Explicit redirect behavior
@@ -951,7 +965,7 @@ function createFormHandle(formEl, options = {}) {
         }
       }
 
-      return { ok: true, submitted: true, data: responseData, refreshOk, refreshError };
+      return { ok: true, submitted: true, data: responseData, refreshOk, refreshError, hookError };
     } catch (err) {
       if (err && err.kind === 'validation') {
         fieldErrors = { ...(err.fieldErrors || {}) };
@@ -966,7 +980,7 @@ function createFormHandle(formEl, options = {}) {
 
       for (const listener of errorListeners) {
         try {
-          await listener(err, { values: payloadData, form: handle });
+          await listener(err, { values: payloadData, form: handle, services });
         } catch (_e) {
           // Ignore
         }
@@ -1035,6 +1049,12 @@ function createFormHandle(formEl, options = {}) {
   handle = {
     name: formName,
     el: formEl,
+    get services() {
+      return services;
+    },
+    __setServices(nextServices) {
+      if (nextServices) services = nextServices;
+    },
     get pending() {
       return pending;
     },