webspresso 0.0.97 → 0.0.99

package/plugins/admin-panel/core/api-extensions.js

@@ -340,12 +340,24 @@ function createExtensionApiHandlers(options) {
       }
 
       // Execute action
-      const result = await action.handler(record, modelName, {
+      const context = {
         db,
         req,
         user: req.session?.adminUser,
         body: req.body,
+        model: modelName,
+        modelName,
+        name: modelName,
+      };
+      const modelArg = Object.assign(new String(modelName), context, {
+        name: modelName,
+        modelName,
+        model: modelName,
+        valueOf: () => modelName,
+        toString: () => modelName,
+        [Symbol.toPrimitive]: () => modelName,
       });
+      const result = await action.handler(record, modelArg, context);
 
       res.json({ success: true, result });
     } catch (error) {
@@ -418,12 +430,24 @@ function createExtensionApiHandlers(options) {
       }
 
       // Execute action
-      const result = await action.handler(records, modelName, {
+      const context = {
         db,
         req,
         user: req.session?.adminUser,
         body: req.body,
+        model: modelName,
+        modelName,
+        name: modelName,
+      };
+      const modelArg = Object.assign(new String(modelName), context, {
+        name: modelName,
+        modelName,
+        model: modelName,
+        valueOf: () => modelName,
+        toString: () => modelName,
+        [Symbol.toPrimitive]: () => modelName,
       });
+      const result = await action.handler(records, modelArg, context);
 
       res.json({ success: true, result, affected: records.length });
     } catch (error) {
@@ -675,6 +699,10 @@ function createExtensionApiHandlers(options) {
         }
       }
 
+      if (registry && typeof registry.runHooks === 'function') {
+        await registry.runHooks('onDashboardLoad', { stats, req, user: req.session?.adminUser, db });
+      }
+
       res.json({ stats });
     } catch (error) {
       res.status(500).json({ error: error.message });

package/plugins/admin-panel/core/registry.js

@@ -4,6 +4,8 @@
  * @module plugins/admin-panel/core/registry
  */
 
+const fs = require('fs');
+
 /**
  * Extension types
  */
@@ -46,6 +48,7 @@ class AdminRegistry {
 
     // Client components: JS code strings for custom page rendering
     this.clientComponents = new Map();
+    this.clientComponentFiles = new Map();
 
     // Custom scripts & styles for Admin Panel SSR rendering
     this.scripts = [];
@@ -59,6 +62,8 @@ class AdminRegistry {
       afterUpdate: [],
       beforeDelete: [],
       afterDelete: [],
+      beforeRestore: [],
+      afterRestore: [],
       onRecordView: [],
       onDashboardLoad: [],
     };
@@ -66,6 +71,7 @@ class AdminRegistry {
     // Settings
     this.settings = {
       title: 'Admin Panel',
+      titleTemplate: '%s | %b',
       logo: null,
       primaryColor: '#3B82F6',
       perPage: 20,
@@ -335,17 +341,41 @@ class AdminRegistry {
    * @param {string} pageId - Page ID (must match a registered page)
    * @param {string} jsCode - JavaScript code string that defines the component.
    *   The code should assign a Mithril component to window.__customPages[pageId].
+   * @param {string} [filePath=null] - Absolute file path for dev mode live reloading
    */
-  registerClientComponent(pageId, jsCode) {
+  registerClientComponent(pageId, jsCode, filePath = null) {
     this.clientComponents.set(pageId, jsCode);
+    if (filePath) {
+      this.clientComponentFiles.set(pageId, filePath);
+    }
     return this;
   }
 
   /**
-   * Get all client component code strings concatenated
+   * Get all client component code strings concatenated.
+   * In development mode (NODE_ENV !== 'production'), dynamically re-reads modified
+   * component files from disk to eliminate manual server restarts.
    */
   getClientComponents() {
-    return Array.from(this.clientComponents.values()).join('\n');
+    const isDev = process.env.NODE_ENV !== 'production';
+    const parts = [];
+    for (const [pageId, code] of this.clientComponents.entries()) {
+      const filePath = this.clientComponentFiles.get(pageId);
+      if (isDev && filePath) {
+        try {
+          if (fs.existsSync(filePath)) {
+            const raw = fs.readFileSync(filePath, 'utf8');
+            const { formatClientComponent } = require('./admin-module');
+            parts.push(formatClientComponent(pageId, raw));
+            continue;
+          }
+        } catch (e) {
+          console.error(`[Admin Panel] Failed to reload component for "${pageId}":`, e);
+        }
+      }
+      parts.push(code || '');
+    }
+    return parts.filter(Boolean).join('\n');
   }
 
   /**
@@ -382,6 +412,44 @@ class AdminRegistry {
     return this;
   }
 
+  /**
+   * Set base admin panel title
+   * @param {string} title - Base title (e.g., 'Acme Admin')
+   */
+  setTitle(title) {
+    if (typeof title === 'string') {
+      this.settings.title = title;
+    }
+    return this;
+  }
+
+  /**
+   * Get base admin panel title
+   * @returns {string}
+   */
+  getTitle() {
+    return this.settings.title;
+  }
+
+  /**
+   * Set admin page title template
+   * @param {string} template - Title template (e.g., '%s | %b', '%s — %b', '%s')
+   */
+  setTitleTemplate(template) {
+    if (typeof template === 'string') {
+      this.settings.titleTemplate = template;
+    }
+    return this;
+  }
+
+  /**
+   * Get admin page title template
+   * @returns {string}
+   */
+  getTitleTemplate() {
+    return this.settings.titleTemplate;
+  }
+
   /**
    * Enable user management
    * @param {Object} config - User management configuration
@@ -471,19 +539,30 @@ class AdminRegistry {
   toClientConfig() {
     return {
       settings: this.settings,
-      pages: this.getPages().map(p => ({
-        id: p.id,
-        title: p.title,
-        path: p.path,
-        icon: p.icon,
-        description: p.description,
-        permission: p.permission,
-        layout: p.layout !== undefined ? p.layout : true,
-        iframe: p.iframe,
-        url: p.url || p.iframeUrl,
-        html: p.html,
-        hasClientComponent: this.clientComponents.has(p.id),
-      })),
+      pages: this.getPages().map(p => {
+        let html = p.html;
+        if (p.htmlFile && process.env.NODE_ENV !== 'production') {
+          try {
+            if (fs.existsSync(p.htmlFile)) {
+              html = fs.readFileSync(p.htmlFile, 'utf8');
+            }
+          } catch (e) {}
+        }
+        return {
+          id: p.id,
+          title: p.title,
+          documentTitle: p.documentTitle,
+          path: p.path,
+          icon: p.icon,
+          description: p.description,
+          permission: p.permission,
+          layout: p.layout !== undefined ? p.layout : true,
+          iframe: p.iframe,
+          url: p.url || p.iframeUrl,
+          html,
+          hasClientComponent: this.clientComponents.has(p.id),
+        };
+      }),
 
       widgets: this.getWidgets().map(w => ({
         id: w.id,
@@ -527,6 +606,7 @@ class AdminRegistry {
     this.menuGroups.clear();
     this.fieldRenderers.clear();
     this.clientComponents.clear();
+    this.clientComponentFiles.clear();
     this.scripts = [];
     this.styles = [];
     Object.keys(this.hooks).forEach(k => this.hooks[k] = []);

package/plugins/admin-panel/field-renderers/file-upload.js

@@ -27,9 +27,24 @@ function shouldShowImagePreview(url, accept) {
   return isImageAccept(accept) || isImageUrl(url);
 }
 
-function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
+function renderUploadedFilePreview(url, { accept, readonly, onRemove, onSelectLibrary, label }) {
   if (!url) return null;
 
+  const actions = !readonly ? m('.flex.items-center.gap-3.mt-1', [
+    onSelectLibrary
+      ? m('button.text-indigo-600.dark:text-indigo-400.hover:text-indigo-800.dark:hover:text-indigo-300.text-xs.font-medium', {
+          type: 'button',
+          onclick: onSelectLibrary,
+        }, '📁 Change from Library')
+      : null,
+    onRemove
+      ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-xs', {
+          type: 'button',
+          onclick: onRemove,
+        }, 'Remove')
+      : null,
+  ]) : null;
+
   if (shouldShowImagePreview(url, accept)) {
     return m('.mt-3.flex.flex-col.items-start.gap-2', [
       m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer' },
@@ -40,12 +55,7 @@ function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
         })
       ),
       m('p.text-xs.text-gray-500.dark:text-slate-400.break-all', url),
-      !readonly && onRemove
-        ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-sm', {
-            type: 'button',
-            onclick: onRemove,
-          }, 'Remove')
-        : null,
+      actions,
     ]);
   }
 
@@ -55,12 +65,7 @@ function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
       target: '_blank',
       rel: 'noopener noreferrer',
     }, url),
-    !readonly && onRemove
-      ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-sm', {
-          type: 'button',
-          onclick: onRemove,
-        }, 'Remove')
-      : null,
+    actions,
   ]);
 }
 
@@ -141,6 +146,19 @@ module.exports = {
         if (vnode.attrs.onchange) vnode.attrs.onchange('');
       };
 
+      const openLibraryPicker = () => {
+        if (typeof window !== 'undefined' && window.__openFileManagerPicker) {
+          window.__openFileManagerPicker({
+            accept,
+            title: 'Choose from Media Library',
+            onSelect: (pickedUrl) => {
+              revokeLocalPreview(state);
+              if (vnode.attrs.onchange) vnode.attrs.onchange(pickedUrl);
+            }
+          });
+        }
+      };
+
       if (!uploadUrl) {
         return m('.mb-4', [
           m(
@@ -148,7 +166,14 @@ module.exports = {
             label,
             required ? m('span.text-red-500', ' *') : null
           ),
-          m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          typeof window !== 'undefined' && window.__openFileManagerPicker
+            ? m('.flex.items-center.gap-2.mb-3', [
+                m('button.px-3.py-1.5.bg-indigo-600.hover:bg-indigo-700.text-white.text-xs.font-medium.rounded.flex.items-center.gap-1.shadow-sm', {
+                  type: 'button',
+                  onclick: openLibraryPicker,
+                }, '📁 Choose from Media Library')
+              ])
+            : m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
           m('input.w-full.px-3.py-2.border.rounded', {
             type: 'text',
             name,
@@ -161,7 +186,7 @@ module.exports = {
             },
           }),
           value
-            ? renderUploadedFilePreview(value, { accept, readonly, onRemove: clearValue, label })
+            ? renderUploadedFilePreview(value, { accept, readonly, onRemove: clearValue, onSelectLibrary: openLibraryPicker, label })
             : null,
         ]);
       }
@@ -173,7 +198,7 @@ module.exports = {
           required ? m('span.text-red-500', ' *') : null
         ),
         displayUrl
-          ? renderUploadedFilePreview(displayUrl, { accept, readonly, onRemove: clearValue, label })
+          ? renderUploadedFilePreview(displayUrl, { accept, readonly, onRemove: clearValue, onSelectLibrary: openLibraryPicker, label })
           : null,
         m(
           'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
@@ -200,11 +225,26 @@ module.exports = {
                     'p.text-gray-600.dark:text-slate-400.mb-2',
                     displayUrl ? 'Drag and drop to replace, or' : 'Drag and drop a file here, or'
                   ),
-                  m(
-                    'label.text-blue-600.hover:text-blue-800.cursor-pointer',
-                    { for: 'file-input-' + name },
-                    displayUrl ? 'choose another file' : 'browse'
-                  ),
+                  m('.flex.items-center.justify-center.gap-3.flex-wrap', [
+                    m(
+                      'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                      { for: 'file-input-' + name },
+                      displayUrl ? 'choose another file' : 'browse'
+                    ),
+                    typeof window !== 'undefined' && window.__openFileManagerPicker
+                      ? m('button.text-indigo-600.hover:text-indigo-800.dark:text-indigo-400.cursor-pointer.font-medium.flex.items-center.gap-1.text-sm', {
+                          type: 'button',
+                          onclick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            openLibraryPicker();
+                          }
+                        }, [
+                          m('span', '•'),
+                          m('span', '📁 Choose from Media Library')
+                        ])
+                      : null,
+                  ]),
                 ]),
           ]
         ),
@@ -280,6 +320,98 @@ module.exports = {
 
       const urls = Array.isArray(value) ? value : (value ? [value] : []);
 
+      const openLibraryPicker = () => {
+        if (typeof window !== 'undefined' && window.__openFileManagerPicker) {
+          window.__openFileManagerPicker({
+            accept,
+            title: 'Add from Media Library',
+            onSelect: (pickedUrl) => {
+              const newUrls = [...urls, pickedUrl];
+              if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+            }
+          });
+        }
+      };
+
+      const renderGrid = () => {
+        if (urls.length === 0) return null;
+        return m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
+          const isDragOver = state.dragOverIndex === idx;
+          const baseClasses = '.relative.group.border.rounded-lg.p-2.transition-all';
+          const cursorClass = readonly ? '' : '.cursor-move';
+          const borderClasses = isDragOver ? '.border-blue-500.border-2.dark:border-blue-500' : '.border-gray-200.dark:border-slate-700';
+          const bgClasses = isDragOver ? '.bg-blue-50.dark:bg-slate-800' : '.bg-gray-50.dark:bg-slate-900';
+          
+          return m(baseClasses + cursorClass + borderClasses + bgClasses, {
+            draggable: !readonly,
+            ondragstart: (e) => {
+              state.draggedIndex = idx;
+              e.dataTransfer.effectAllowed = 'move';
+              e.dataTransfer.setData('text/plain', idx);
+            },
+            ondragover: (e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = 'move';
+            },
+            ondragenter: (e) => {
+              state.dragOverIndex = idx;
+            },
+            ondragleave: (e) => {
+              if (state.dragOverIndex === idx) {
+                state.dragOverIndex = null;
+              }
+            },
+            ondrop: (e) => {
+              e.preventDefault();
+              const fromIdx = state.draggedIndex;
+              const toIdx = idx;
+              if (fromIdx !== null && fromIdx !== undefined && fromIdx !== toIdx) {
+                const newUrls = [...urls];
+                const [movedItem] = newUrls.splice(fromIdx, 1);
+                newUrls.splice(toIdx, 0, movedItem);
+                if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+              }
+              state.draggedIndex = null;
+              state.dragOverIndex = null;
+            },
+            ondragend: (e) => {
+              state.draggedIndex = null;
+              state.dragOverIndex = null;
+            }
+          }, [
+            shouldShowImagePreview(url, accept)
+              ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer', draggable: false },
+                  m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
+                    src: url,
+                    alt: `${label} ${idx + 1}`,
+                    loading: 'lazy',
+                    draggable: false,
+                  })
+                )
+              : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
+                  href: url,
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                  draggable: false,
+                }, url.substring(url.lastIndexOf('/') + 1) || url),
+            !readonly
+              ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {
+                  type: 'button',
+                  onclick: () => {
+                    const newUrls = urls.filter((_, i) => i !== idx);
+                    if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+                  },
+                  title: 'Remove file',
+                }, [
+                  m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                    m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
+                  )
+                ])
+              : null,
+          ]);
+        }));
+      };
+
       if (!uploadUrl) {
         return m('.mb-4', [
           m(
@@ -287,7 +419,19 @@ module.exports = {
             label,
             required ? m('span.text-red-500', ' *') : null
           ),
-          m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          typeof window !== 'undefined' && window.__openFileManagerPicker
+            ? m('.flex.items-center.gap-2.mb-3', [
+                m('button.px-3.py-1.5.bg-indigo-600.hover:bg-indigo-700.text-white.text-xs.font-medium.rounded.flex.items-center.gap-1.shadow-sm', {
+                  type: 'button',
+                  onclick: openLibraryPicker,
+                }, '📁 Add from Media Library')
+              ])
+            : m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          renderGrid(),
+          m('input[type=hidden]', {
+            name,
+            value: JSON.stringify(urls),
+          }),
         ]);
       }
 
@@ -298,83 +442,7 @@ module.exports = {
           required ? m('span.text-red-500', ' *') : null
         ),
 
-        urls.length > 0
-          ? m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
-              const isDragOver = state.dragOverIndex === idx;
-              const baseClasses = '.relative.group.border.rounded-lg.p-2.transition-all';
-              const cursorClass = readonly ? '' : '.cursor-move';
-              const borderClasses = isDragOver ? '.border-blue-500.border-2.dark:border-blue-500' : '.border-gray-200.dark:border-slate-700';
-              const bgClasses = isDragOver ? '.bg-blue-50.dark:bg-slate-800' : '.bg-gray-50.dark:bg-slate-900';
-              
-              return m(baseClasses + cursorClass + borderClasses + bgClasses, {
-                draggable: !readonly,
-                ondragstart: (e) => {
-                  state.draggedIndex = idx;
-                  e.dataTransfer.effectAllowed = 'move';
-                  e.dataTransfer.setData('text/plain', idx);
-                },
-                ondragover: (e) => {
-                  e.preventDefault();
-                  e.dataTransfer.dropEffect = 'move';
-                },
-                ondragenter: (e) => {
-                  state.dragOverIndex = idx;
-                },
-                ondragleave: (e) => {
-                  if (state.dragOverIndex === idx) {
-                    state.dragOverIndex = null;
-                  }
-                },
-                ondrop: (e) => {
-                  e.preventDefault();
-                  const fromIdx = state.draggedIndex;
-                  const toIdx = idx;
-                  if (fromIdx !== null && fromIdx !== undefined && fromIdx !== toIdx) {
-                    const newUrls = [...urls];
-                    const [movedItem] = newUrls.splice(fromIdx, 1);
-                    newUrls.splice(toIdx, 0, movedItem);
-                    if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
-                  }
-                  state.draggedIndex = null;
-                  state.dragOverIndex = null;
-                },
-                ondragend: (e) => {
-                  state.draggedIndex = null;
-                  state.dragOverIndex = null;
-                }
-              }, [
-                shouldShowImagePreview(url, accept)
-                  ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer', draggable: false },
-                      m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
-                        src: url,
-                        alt: `${label} ${idx + 1}`,
-                        loading: 'lazy',
-                        draggable: false,
-                      })
-                    )
-                  : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
-                      href: url,
-                      target: '_blank',
-                      rel: 'noopener noreferrer',
-                      draggable: false,
-                    }, url.substring(url.lastIndexOf('/') + 1) || url),
-                !readonly
-                  ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {
-                      type: 'button',
-                      onclick: () => {
-                        const newUrls = urls.filter((_, i) => i !== idx);
-                        if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
-                      },
-                      title: 'Remove file',
-                    }, [
-                      m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
-                        m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
-                      )
-                    ])
-                  : null,
-              ]);
-            }))
-          : null,
+        renderGrid(),
 
         m(
           'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
@@ -405,11 +473,26 @@ module.exports = {
                           'p.text-gray-600.dark:text-slate-400.mb-2',
                           'Drag and drop files here, or'
                         ),
-                        m(
-                          'label.text-blue-600.hover:text-blue-800.cursor-pointer',
-                          { for: 'file-input-multiple-' + name },
-                          'browse'
-                        ),
+                        m('.flex.items-center.justify-center.gap-3.flex-wrap', [
+                          m(
+                            'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                            { for: 'file-input-multiple-' + name },
+                            'browse'
+                          ),
+                          typeof window !== 'undefined' && window.__openFileManagerPicker
+                            ? m('button.text-indigo-600.hover:text-indigo-800.dark:text-indigo-400.cursor-pointer.font-medium.flex.items-center.gap-1.text-sm', {
+                                type: 'button',
+                                onclick: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  openLibraryPicker();
+                                }
+                              }, [
+                                m('span', '•'),
+                                m('span', '📁 Add from Media Library')
+                              ])
+                            : null,
+                        ]),
                       ]),
                 ]),
           ]

package/plugins/admin-panel/field-renderers/index.js

@@ -79,7 +79,9 @@ function initializeDefaultRenderers() {
   registerFieldRenderer('rich-text', richTextRenderer.RichTextField);
   registerFieldRenderer('file-upload', fileUploadRenderer.FileUploadField);
   registerFieldRenderer('file', fileUploadRenderer.FileUploadField);
+  registerFieldRenderer('image', fileUploadRenderer.FileUploadField);
   registerFieldRenderer('files', fileUploadRenderer.FilesUploadField);
+  registerFieldRenderer('files-upload', fileUploadRenderer.FilesUploadField);
   
   // Relation types
   registerFieldRenderer('belongsTo', relationRenderers.BelongsToField);