webspresso 0.0.79 → 0.0.81

package/core/kernel/app.js

@@ -50,7 +50,13 @@ function createApp(options = {}) {
       }
     };
     events.on(flowDef.trigger, handler);
-    const unregister = () => events.off(flowDef.trigger, handler);
+    const unregister = () => {
+      events.off(flowDef.trigger, handler);
+      const idx = flowHandles.findIndex((h) => h.unregister === unregister);
+      if (idx !== -1) {
+        flowHandles.splice(idx, 1);
+      }
+    };
     flowHandles.push({
       id,
       trigger: flowDef.trigger,

package/core/orm/json-fields.js

@@ -12,7 +12,7 @@ function getJsonColumns(model) {
   const jsonCols = new Set();
   if (model.columns) {
     for (const [name, meta] of model.columns) {
-      if (meta.type === 'json') {
+      if (meta.type === 'json' || meta.type === 'array' || meta.type === 'files') {
         jsonCols.add(name);
       }
     }

package/core/orm/migrations/scaffold.js

@@ -153,6 +153,11 @@ function generateColumnLine(columnName, meta) {
       parts.push(`table.json('${columnName}')`);
       break;
 
+    case 'files':
+      // Multiple files are stored as JSON in database
+      parts.push(`table.json('${columnName}')`);
+      break;
+
     case 'enum':
       const enumValues = meta.enumValues || [];
       const valuesStr = enumValues.map(v => `'${v}'`).join(', ');

package/core/orm/schema-helpers.js

@@ -439,6 +439,24 @@ function createSchemaHelpers(z) {
       }, z);
     },
 
+    /**
+     * Multiple Files / URLs column (stored as JSON array in database)
+     * @param {Partial<import('./types').ColumnMeta>} [options={}]
+     * @returns {SchemaBuilder}
+     */
+    files(options = {}) {
+      const { nullable = false, ...rest } = options;
+      let schema = z.array(z.string());
+      if (nullable) {
+        schema = schema.nullable().optional();
+      }
+      return createSchemaBuilder(schema, {
+        type: 'files',
+        nullable,
+        ...rest,
+      }, z);
+    },
+
     /**
      * Integer column
      * @param {Partial<import('./types').ColumnMeta>} [options={}]

package/core/orm/types.js

@@ -9,7 +9,7 @@
 // ============================================================================
 
 /**
- * @typedef {'id'|'string'|'text'|'file'|'integer'|'bigint'|'float'|'decimal'|'boolean'|'date'|'datetime'|'timestamp'|'json'|'array'|'enum'|'uuid'|'nanoid'} ColumnType
+ * @typedef {'id'|'string'|'text'|'file'|'files'|'integer'|'bigint'|'float'|'decimal'|'boolean'|'date'|'datetime'|'timestamp'|'json'|'array'|'enum'|'uuid'|'nanoid'} ColumnType
  */
 
 /**

package/index.d.ts

@@ -74,6 +74,15 @@ export interface CreateAppResult {
 
 export function createApp(options?: CreateAppOptions): CreateAppResult;
 
+export function resolveClientRuntime(options?: {
+  clientRuntime?: {
+    alpine?: boolean | Record<string, unknown>;
+    swup?: boolean | Record<string, unknown>;
+  };
+}): { alpine: boolean; swup: boolean };
+
+export const CLIENT_RUNTIME_BASE: string;
+
 // --- App context ---
 
 export function attachDbMiddleware(req: Request, res: Response, next: NextFunction): void;
@@ -595,6 +604,29 @@ export interface RateLimitPluginOptions {
 
 export function rateLimitPlugin(options?: RateLimitPluginOptions): WebspressoPlugin;
 
+export interface CsrfCookieOptions {
+  key?: string;
+  signed?: boolean;
+  path?: string;
+  httpOnly?: boolean;
+  secure?: boolean;
+  sameSite?: 'lax' | 'strict' | 'none';
+  maxAge?: number;
+  [key: string]: unknown;
+}
+
+export interface CsrfPluginOptions {
+  cookie?: boolean | CsrfCookieOptions;
+  sessionKey?: string;
+  methods?: string[];
+  ignorePaths?: Array<string | RegExp | ((req: Request) => boolean)>;
+  global?: boolean;
+  errorMessage?: string;
+  errorStatus?: number;
+}
+
+export function csrfPlugin(options?: CsrfPluginOptions): WebspressoPlugin;
+
 export interface ContentPluginOptions {
   db: import('./index').Database;
   adminPath?: string;

package/index.js

@@ -63,6 +63,7 @@ const {
   redirectPlugin,
   rateLimitPlugin,
   contentPlugin,
+  csrfPlugin,
 } = require('./plugins');
 
 const content = require('./core/content');
@@ -133,6 +134,7 @@ module.exports = {
   redirectPlugin,
   rateLimitPlugin,
   contentPlugin,
+  csrfPlugin,
 
   // Schema-driven CMS core (framework-agnostic)
   content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "types": "index.d.ts",
@@ -67,7 +67,9 @@
     "helmet": "^7.2.0",
     "inquirer": "^8.2.6",
     "knex": "^3.1.0",
+    "mjml": "^5.4.0",
     "multer": "^2.1.1",
+    "nodemailer": "^9.0.3",
     "nunjucks": "^3.2.4",
     "sanitize-html": "^2.17.3",
     "sharp": "^0.33.5",
@@ -125,6 +127,7 @@
   "overrides": {
     "basic-ftp": "^5.3.0",
     "tar": "^7.5.11",
-    "undici": "^6.24.0"
+    "undici": "^6.24.0",
+    "uuid": "^11.1.1"
   }
 }

package/plugins/admin-panel/client/parts/07-model-list.js

@@ -128,6 +128,24 @@ function formatCellValue(value, col, record = null) {
       }
       return short || m('span.text-gray-400', '—');
     }
+
+    case 'files': {
+      if (Array.isArray(value)) {
+        return value.length > 0
+          ? m('div.flex.gap-1.items-center', [
+              m('span.text-xs.bg-gray-100.dark:bg-slate-800.px-2.py-1.rounded.mr-1', `${value.length} files`),
+              ...value.slice(0, 2).map(s => {
+                const isImg = /\.(jpe?g|png|gif|webp|svg|avif|bmp|ico)(\?|#|$)/i.test(s);
+                if (isImg) {
+                  return m('img.h-6.w-6.rounded.object-cover.border.border-gray-200.dark:border-slate-700.bg-white', { src: s });
+                }
+                return m('a.text-xs.text-indigo-600.dark:text-indigo-400.hover:underline', { href: s, target: '_blank' }, '📄');
+              })
+            ])
+          : m('span.text-gray-400.dark:text-slate-500.italic', 'empty');
+      }
+      return String(value);
+    }
     
     default: {
       const str = String(value);

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

@@ -219,6 +219,212 @@ module.exports = {
       ]);
     },
   },
+
+  FilesUploadField: {
+    oninit: (vnode) => {
+      vnode.state.uploading = false;
+      vnode.state.draggedIndex = null;
+      vnode.state.dragOverIndex = null;
+    },
+    oncreate: (vnode) => {
+      const { name, meta = {} } = vnode.attrs;
+      if (!getUploadUrlFromAdminConfig()) return;
+
+      const dropZoneId = 'drop-zone-multiple-' + name;
+      const dropZone = document.getElementById(dropZoneId);
+      if (!dropZone) return;
+
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      });
+
+      ['dragenter', 'dragover'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
+        });
+      });
+
+      ['dragleave', 'drop'].forEach((eventName) => {
+        dropZone.addEventListener(eventName, () => {
+          dropZone.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-slate-800');
+        });
+      });
+
+      dropZone.addEventListener('drop', (e) => {
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+          handleMultipleFilesUpload(files, vnode, meta);
+        }
+      });
+
+      const fileInput = dropZone.querySelector('input[type=file]');
+      if (fileInput) {
+        fileInput.addEventListener('change', (e) => {
+          if (e.target.files.length > 0) {
+            handleMultipleFilesUpload(e.target.files, vnode, meta);
+          }
+        });
+      }
+    },
+    view: (vnode) => {
+      const { name, value = [], meta = {}, required = false, readonly = false } = vnode.attrs;
+      const state = vnode.state;
+      const dropZoneId = 'drop-zone-multiple-' + name;
+      const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
+      const accept = meta.accept || '*/*';
+      const uploadUrl = getUploadUrlFromAdminConfig();
+      const label = meta.label || name;
+
+      const urls = Array.isArray(value) ? value : (value ? [value] : []);
+
+      if (!uploadUrl) {
+        return m('.mb-4', [
+          m(
+            'label.block.text-sm.font-medium.mb-2',
+            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.'),
+        ]);
+      }
+
+      return m('.mb-4', [
+        m(
+          'label.block.text-sm.font-medium.mb-2',
+          label,
+          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,
+
+        m(
+          'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
+          {
+            id: dropZoneId,
+            style: readonly || state.uploading ? undefined : 'cursor: pointer;',
+          },
+          [
+            m('input[type=file]', {
+              class: 'hidden',
+              id: 'file-input-multiple-' + name,
+              accept,
+              multiple: true,
+              disabled: readonly || state.uploading,
+              onchange: (e) => {
+                if (e.target.files.length > 0) {
+                  handleMultipleFilesUpload(e.target.files, vnode, meta);
+                }
+              },
+            }),
+            readonly
+              ? null
+              : m('div', [
+                  state.uploading
+                    ? m('p.text-blue-600.dark:text-blue-400.animate-pulse', 'Uploading files...')
+                    : m('div', [
+                        m(
+                          '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('input[type=hidden]', {
+          name,
+          value: JSON.stringify(urls),
+        }),
+        m(
+          'p.text-xs.text-gray-500.mt-1',
+          'Max ' + Math.round(maxSize / 1024 / 1024) + ' MB per file (server enforces limits)'
+        ),
+      ]);
+    },
+  },
 };
 
 /**
@@ -272,3 +478,66 @@ async function handleFileUpload(file, vnode, meta) {
     alert(err.message || 'Upload failed');
   }
 }
+
+/**
+ * @param {FileList} files
+ * @param {import('mithril').Vnode} vnode
+ * @param {Object} meta
+ */
+async function handleMultipleFilesUpload(files, vnode, meta) {
+  const maxSize = meta.maxSize || meta.maxBytes || 10 * 1024 * 1024;
+  const uploadUrl = getUploadUrlFromAdminConfig();
+  if (!uploadUrl) {
+    alert('Upload URL is not configured.');
+    return;
+  }
+
+  const currentUrls = Array.isArray(vnode.attrs.value)
+    ? [...vnode.attrs.value]
+    : (vnode.attrs.value ? [vnode.attrs.value] : []);
+
+  vnode.state.uploading = true;
+  if (typeof m !== 'undefined' && m.redraw) m.redraw();
+
+  const uploadPromises = Array.from(files).map(async (file) => {
+    if (file.size > maxSize) {
+      alert(`File ${file.name} is too large (max ${Math.round(maxSize / 1024 / 1024)} MB) and was skipped.`);
+      return null;
+    }
+
+    const fd = new FormData();
+    fd.append('file', file);
+
+    try {
+      const res = await fetch(uploadUrl, { method: 'POST', body: fd, credentials: 'include' });
+      let data = {};
+      try {
+        data = await res.json();
+      } catch {
+        data = {};
+      }
+      if (!res.ok) {
+        alert(`Upload failed for ${file.name}: ${data.message || data.error || res.status}`);
+        return null;
+      }
+      return data.url || data.publicUrl || '';
+    } catch (err) {
+      alert(`Upload failed for ${file.name}: ${err.message}`);
+      return null;
+    }
+  });
+
+  try {
+    const results = await Promise.all(uploadPromises);
+    const newUrls = results.filter(Boolean);
+    if (newUrls.length > 0) {
+      const updatedUrls = [...currentUrls, ...newUrls];
+      if (vnode.attrs.onchange) {
+        vnode.attrs.onchange(updatedUrls);
+      }
+    }
+  } finally {
+    vnode.state.uploading = false;
+    if (typeof m !== 'undefined' && m.redraw) m.redraw();
+  }
+}

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

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