webspresso 0.0.63 → 0.0.65

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

@@ -14,10 +14,10 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('.border.border-gray-300.rounded.p-4', [
+        m('.border.border-gray-300 dark:border-slate-600.rounded.p-4', [
           items.map((item, index) =>
             m('.flex.items-center.gap-2.mb-2', [
-              m('input.flex-1.px-3.py-2.border.border-gray-300.rounded', {
+              m('input.flex-1.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
                 type: 'text',
                 value: String(item),
                 oninput: (e) => {

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

@@ -15,7 +15,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('input.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           type: 'text',
@@ -43,7 +43,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('textarea.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('textarea.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           rows: meta.rows || 5,
@@ -69,7 +69,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('input.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           type: 'number',
@@ -127,7 +127,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('input.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           type: 'date',
@@ -155,7 +155,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('input.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           type: 'datetime-local',
@@ -183,7 +183,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('select.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('select.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           id: name,
           name,
           value: String(value || ''),

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

@@ -63,7 +63,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('div#drop-zone-' + name + '.border-2.border-dashed.border-gray-300.rounded.p-8.text-center', {
+        m('div#drop-zone-' + name + '.border-2.border-dashed.border-gray-300 dark:border-slate-600.rounded.p-8.text-center', {
           style: 'cursor: pointer;'
         }, [
           m('input[type=file]', {
@@ -77,7 +77,7 @@ module.exports = {
             }
           }),
           m('div', [
-            m('p.text-gray-600.mb-2', 'Drag and drop a file here, or'),
+            m('p.text-gray-600 dark:text-slate-400.mb-2', 'Drag and drop a file here, or'),
             m('label.text-blue-600.hover:text-blue-800.cursor-pointer', {
               for: 'file-input-' + name
             }, 'browse'),

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

@@ -22,7 +22,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('textarea.w-full.px-3.py-2.border.border-gray-300.rounded.font-mono.text-sm', {
+        m('textarea.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.font-mono.text-sm', {
           rows: 10,
           value: jsonString,
           oninput: (e) => {

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

@@ -18,7 +18,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('select.w-full.px-3.py-2.border.border-gray-300.rounded', {
+        m('select.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded', {
           name,
           value: value ? String(value) : '',
           required,
@@ -58,7 +58,7 @@ module.exports = {
           meta.label || name,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('.border.border-gray-300.rounded.p-4.max-h-64.overflow-y-auto', [
+        m('.border.border-gray-300 dark:border-slate-600.rounded.p-4.max-h-64.overflow-y-auto', [
           relationData.map(item => {
             const itemValue = String(item[valueKey]);
             const itemDisplay = item[displayKey] || itemValue;

package/plugins/admin-panel/field-renderers/rich-text.js

@@ -95,11 +95,11 @@ module.exports = {
       const editorId = 'quill-editor-' + name;
       
       return m('.mb-4', [
-        m('label.block.text-sm.font-medium.text-gray-700.mb-1', { for: name },
+        m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: name },
           label,
           required ? m('span.text-red-500', ' *') : null
         ),
-        m('div.border.border-gray-300.rounded', {
+        m('div.border.border-gray-300 dark:border-slate-600.rounded', {
           id: editorId,
           style: 'min-height: 200px;'
         }),
@@ -108,7 +108,7 @@ module.exports = {
           id: name + '-value',
           value: value || '',
         }),
-        hint ? m('p.text-xs.text-gray-500.mt-1', hint) : null,
+        hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
       ]);
     }
   },

package/plugins/admin-panel/index.js

@@ -66,14 +66,16 @@ function adminPanelPlugin(options = {}) {
     description: 'Modular admin panel for Webspresso with extensions support',
     
     // CSP requirements for admin panel scripts
+    // Note: cdn.quilljs.com 301-redirects to cdn.jsdelivr.net; CSP is enforced on the final URL.
     csp: {
-      styleSrc: ['https://cdn.quilljs.com'],
+      styleSrc: ['https://cdn.quilljs.com', 'https://cdn.jsdelivr.net'],
       scriptSrc: [
         'https://cdn.quilljs.com',
+        'https://cdn.jsdelivr.net',
         'https://unpkg.com',
         'https://cdn.tailwindcss.com',
       ],
-      connectSrc: ['https://unpkg.com', 'https://cdn.tailwindcss.com'],
+      connectSrc: ['https://unpkg.com', 'https://cdn.tailwindcss.com', 'https://cdn.jsdelivr.net'],
     },
     enabled,
     registry, // Expose registry for external configuration
@@ -338,19 +340,48 @@ function generateAdminPanelHtml(adminPath, registry) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${settings.title || 'Admin Panel'}</title>
+  <script>
+  (function () {
+    var K = 'webspresso-admin-theme';
+    function sync() {
+      try {
+        var v = localStorage.getItem(K);
+        var dark = (v === 'dark') || ((v !== 'light') && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        document.documentElement.classList.toggle('dark', dark);
+      } catch (e) {}
+    }
+    sync();
+    window.__syncAdminTheme = sync;
+    try {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+        var v = localStorage.getItem(K);
+        if (v === 'light' || v === 'dark') return;
+        sync();
+      });
+    } catch (e) {}
+  })();
+  </script>
   <script src="https://unpkg.com/mithril/mithril.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script>tailwind.config = { darkMode: 'class' };</script>
   <style>
     body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
+    html.dark { color-scheme: dark; }
     :root {
       --primary-color: ${settings.primaryColor || '#3B82F6'};
     }
     .bg-primary { background-color: var(--primary-color); }
     .text-primary { color: var(--primary-color); }
     .border-primary { border-color: var(--primary-color); }
+    .dark .ql-toolbar.ql-snow { border-color: #475569; background: #1e293b; }
+    .dark .ql-container.ql-snow { border-color: #475569; background: #0f172a; }
+    .dark .ql-editor { color: #f1f5f9; min-height: 8rem; }
+    .dark .ql-snow .ql-stroke { stroke: #94a3b8; }
+    .dark .ql-snow .ql-fill { fill: #94a3b8; }
+    .dark .ql-picker { color: #cbd5e1; }
   </style>
 </head>
-<body>
+<body class="min-h-screen bg-gray-50 dark:bg-slate-950 text-gray-900 dark:text-slate-100 antialiased">
   <div id="app"></div>
   <script>
     window.__ADMIN_PATH__ = ${JSON.stringify(adminPath)};
@@ -366,7 +397,7 @@ function generateAdminPanelHtml(adminPath, registry) {
 
     // Spinner Component
     const Spinner = {
-      view: () => m('div.animate-spin.rounded-full.h-6.w-6.border-2.border-blue-500.border-t-transparent'),
+      view: () => m('div.animate-spin.rounded-full.h-6.w-6.border-2.border-blue-500.dark:border-blue-400.border-t-transparent'),
     };
 
     ${menuComponent}

package/plugins/admin-panel/modules/bulk-actions.js

@@ -163,13 +163,13 @@ const BulkActionsBar = {
     
     if (selectedCount === 0) return null;
 
-    return m('div.fixed.bottom-0.left-0.right-0.bg-white.border-t.shadow-lg.p-4.z-50', [
+    return m('div.fixed.bottom-0.left-0.right-0.bg-white dark:bg-slate-800.border-t.shadow-lg.p-4.z-50', [
       m('div.max-w-7xl.mx-auto.flex.items-center.justify-between', [
         m('div.flex.items-center.gap-4', [
           m('span.text-sm.font-medium.text-gray-700', 
             selectedCount + ' record' + (selectedCount !== 1 ? 's' : '') + ' selected'
           ),
-          m('button.text-sm.text-gray-500.hover:text-gray-700.underline', {
+          m('button.text-sm.text-gray-500 dark:text-slate-400.hover:text-gray-700 dark:hover:text-slate-200 dark:hover:text-slate-200.underline', {
             onclick: onClearSelection,
           }, 'Clear selection'),
         ]),
@@ -182,7 +182,7 @@ const BulkActionsBar = {
                   ? 'bg-green-100 text-green-700 hover:bg-green-200'
                   : action.color === 'blue'
                     ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
+                    : 'bg-gray-100 text-gray-700 dark:text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-600 dark:hover:bg-slate-600',
               onclick: () => onAction(action),
             }, [
               action.icon && m(Icon, { name: action.icon, class: 'w-4 h-4' }),
@@ -205,13 +205,13 @@ const ConfirmModal = {
         if (e.target === e.currentTarget) onCancel();
       },
     }, [
-      m('div.bg-white.rounded-lg.shadow-xl.max-w-md.w-full.mx-4', [
+      m('div.bg-white dark:bg-slate-800.rounded-lg.shadow-xl.max-w-md.w-full.mx-4', [
         m('div.p-6', [
           m('h3.text-lg.font-medium.text-gray-900', title || 'Confirm Action'),
           m('p.mt-2.text-sm.text-gray-500', message),
         ]),
-        m('div.bg-gray-50.px-6.py-4.flex.justify-end.gap-3.rounded-b-lg', [
-          m('button.px-4.py-2.text-sm.font-medium.text-gray-700.bg-white.border.border-gray-300.rounded.hover:bg-gray-50', {
+        m('div.bg-gray-50 dark:bg-slate-900.px-6.py-4.flex.justify-end.gap-3.rounded-b-lg', [
+          m('button.px-4.py-2.text-sm.font-medium.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800.border.border-gray-300 dark:border-slate-600.rounded.hover:bg-gray-50 dark:hover:bg-slate-800/50 dark:hover:bg-slate-800/50', {
             onclick: onCancel,
           }, 'Cancel'),
           m('button.px-4.py-2.text-sm.font-medium.text-white.rounded', {

package/plugins/admin-panel/modules/custom-pages.js

@@ -182,7 +182,7 @@ function createCustomPage(pageConfig) {
 
         m('div.mb-6', [
           m('h1.text-2xl.font-bold.text-gray-900', pageConfig.title),
-          pageConfig.description && m('p.text-gray-500.mt-1', pageConfig.description),
+          pageConfig.description && m('p.text-gray-500 dark:text-slate-400.mt-1', pageConfig.description),
         ]),
 
         loading 
@@ -191,7 +191,7 @@ function createCustomPage(pageConfig) {
             ? m('div.bg-red-50.border.border-red-200.rounded.p-4.text-red-700', error)
             : pageConfig.render
               ? pageConfig.render(data, vnode)
-              : m('div.bg-white.rounded-lg.shadow.p-6', [
+              : m('div.bg-white dark:bg-slate-800.rounded-lg.shadow.p-6', [
                   data 
                     ? m('pre.text-sm.overflow-auto', JSON.stringify(data, null, 2))
                     : m('p.text-gray-500', 'No content'),
@@ -239,11 +239,11 @@ const SettingsPage = {
 
       error && m('div.bg-red-50.border.border-red-200.rounded.p-4.text-red-700.mb-4', error),
 
-      m('div.bg-white.rounded-lg.shadow', [
+      m('div.bg-white dark:bg-slate-800.rounded-lg.shadow', [
         m('div.p-6.space-y-4', [
           m('div', [
             m('label.block.text-sm.font-medium.text-gray-700', 'Panel Title'),
-            m('input.mt-1.block.w-full.rounded.border-gray-300.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
+            m('input.mt-1.block.w-full.rounded.border-gray-300 dark:border-slate-600.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
               type: 'text',
               value: formData.title || '',
               oninput: (e) => { formData.title = e.target.value; },
@@ -252,7 +252,7 @@ const SettingsPage = {
 
           m('div', [
             m('label.block.text-sm.font-medium.text-gray-700', 'Primary Color'),
-            m('input.mt-1.block.w-24.h-10.rounded.border-gray-300.shadow-sm', {
+            m('input.mt-1.block.w-24.h-10.rounded.border-gray-300 dark:border-slate-600.shadow-sm', {
               type: 'color',
               value: formData.primaryColor || '#3B82F6',
               oninput: (e) => { formData.primaryColor = e.target.value; },
@@ -261,7 +261,7 @@ const SettingsPage = {
 
           m('div', [
             m('label.block.text-sm.font-medium.text-gray-700', 'Records Per Page'),
-            m('input.mt-1.block.w-32.rounded.border-gray-300.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
+            m('input.mt-1.block.w-32.rounded.border-gray-300 dark:border-slate-600.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
               type: 'number',
               min: 5,
               max: 100,
@@ -271,7 +271,7 @@ const SettingsPage = {
           ]),
         ]),
 
-        m('div.bg-gray-50.px-6.py-4.flex.justify-end.gap-3.rounded-b-lg', [
+        m('div.bg-gray-50 dark:bg-slate-900.px-6.py-4.flex.justify-end.gap-3.rounded-b-lg', [
           m('button.px-4.py-2.text-sm.font-medium.text-white.bg-blue-600.rounded.hover:bg-blue-700.disabled:opacity-50', {
             disabled: saving,
             onclick: async () => {

package/plugins/admin-panel/modules/dashboard.js

@@ -173,7 +173,7 @@ const WidgetRenderers = {
     render: (data) => {
       if (!data || !Array.isArray(data)) return m('div.text-gray-500', 'No data');
       return m('div.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-4', data.map(stat => 
-        m('a.block.bg-white.rounded-lg.shadow.hover:shadow-md.transition-shadow.overflow-hidden', {
+        m('a.block.bg-white dark:bg-slate-800.rounded-lg.shadow.hover:shadow-md dark:hover:shadow-slate-900/40 dark:hover:shadow-slate-900/40.transition-shadow.overflow-hidden', {
           href: '/models/' + stat.name,
           onclick: (e) => {
             e.preventDefault();
@@ -193,17 +193,17 @@ const WidgetRenderers = {
             ]),
           ]),
           // Stats row
-          m('div.px-4.py-3.bg-gray-50.grid.grid-cols-3.gap-2.text-center', [
+          m('div.px-4.py-3.bg-gray-50 dark:bg-slate-900.grid.grid-cols-3.gap-2.text-center', [
             m('div', [
-              m('p.text-xs.text-gray-400.uppercase', 'Columns'),
+              m('p.text-xs.text-gray-400 dark:text-slate-500.uppercase', 'Columns'),
               m('p.text-sm.font-semibold.text-gray-700', stat.columnCount || '-'),
             ]),
             m('div', [
-              m('p.text-xs.text-gray-400.uppercase', 'Table'),
-              m('p.text-sm.font-semibold.text-gray-700.truncate', { title: stat.table }, stat.table || '-'),
+              m('p.text-xs.text-gray-400 dark:text-slate-500.uppercase', 'Table'),
+              m('p.text-sm.font-semibold.text-gray-700 dark:text-slate-300.truncate', { title: stat.table }, stat.table || '-'),
             ]),
             m('div', [
-              m('p.text-xs.text-gray-400.uppercase', 'Last Update'),
+              m('p.text-xs.text-gray-400 dark:text-slate-500.uppercase', 'Last Update'),
               m('p.text-sm.font-semibold.text-gray-700', 
                 stat.lastUpdated || stat.lastCreated 
                   ? formatRelativeTime(stat.lastUpdated || stat.lastCreated)
@@ -220,10 +220,10 @@ const WidgetRenderers = {
   'recent-activity': {
     render: (data) => {
       if (!data?.enabled) {
-        return m('div.text-gray-500.text-center.py-4', 'Activity logging not enabled');
+        return m('div.text-gray-500 dark:text-slate-400.text-center.py-4', 'Activity logging not enabled');
       }
       if (!data.activities?.length) {
-        return m('div.text-gray-500.text-center.py-4', 'No recent activity');
+        return m('div.text-gray-500 dark:text-slate-400.text-center.py-4', 'No recent activity');
       }
       return m('div.divide-y', data.activities.map(activity =>
         m('div.py-3.flex.items-center.gap-3', [
@@ -240,7 +240,7 @@ const WidgetRenderers = {
             }),
           ]),
           m('div.flex-1.min-w-0', [
-            m('p.text-sm.text-gray-900.truncate', activity.description || \`\${activity.action} on \${activity.model}\`),
+            m('p.text-sm.text-gray-900 dark:text-slate-100.truncate', activity.description || \`\${activity.action} on \${activity.model}\`),
             m('p.text-xs.text-gray-500', formatDate(activity.created_at)),
           ]),
           activity.user_name && m('span.text-xs.text-gray-400', activity.user_name),
@@ -253,10 +253,10 @@ const WidgetRenderers = {
   'quick-actions': {
     render: (data) => {
       if (!data || !Array.isArray(data) || data.length === 0) {
-        return m('div.text-gray-500.text-center.py-4', 'No quick actions available');
+        return m('div.text-gray-500 dark:text-slate-400.text-center.py-4', 'No quick actions available');
       }
       return m('div.space-y-2', data.map(action =>
-        m('a.flex.items-center.gap-2.px-3.py-2.bg-gray-50.rounded.hover:bg-gray-100.transition-colors', {
+        m('a.flex.items-center.gap-2.px-3.py-2.bg-gray-50 dark:bg-slate-900.rounded.hover:bg-gray-100 dark:hover:bg-slate-700 dark:hover:bg-slate-700.transition-colors', {
           href: action.path,
           onclick: (e) => {
             e.preventDefault();
@@ -299,7 +299,7 @@ const WidgetRenderers = {
   default: {
     render: (data) => {
       if (!data) return m('div.text-gray-500', 'No data');
-      return m('pre.text-xs.bg-gray-50.p-2.rounded.overflow-auto', JSON.stringify(data, null, 2));
+      return m('pre.text-xs.bg-gray-50 dark:bg-slate-900.p-2.rounded.overflow-auto', JSON.stringify(data, null, 2));
     },
   },
 };
@@ -340,7 +340,7 @@ const Widget = {
       full: 'col-span-full',
     };
 
-    return m('div.bg-white.rounded-lg.shadow', {
+    return m('div.bg-white dark:bg-slate-800.rounded-lg.shadow', {
       class: sizeClasses[widget.size] || sizeClasses.md,
     }, [
       m('div.px-4.py-3.border-b.border-gray-200', [
@@ -391,7 +391,7 @@ const Dashboard = {
     return m(Layout, [
       m('div.mb-6', [
         m('h1.text-2xl.font-bold.text-gray-900', config?.settings?.title || 'Dashboard'),
-        m('p.text-gray-500.mt-1', 'Welcome back, ' + (state.user?.name || 'Admin')),
+        m('p.text-gray-500 dark:text-slate-400.mt-1', 'Welcome back, ' + (state.user?.name || 'Admin')),
       ]),
 
       widgets.length > 0

package/plugins/admin-panel/modules/menu.js

@@ -99,6 +99,9 @@ const Icon = {
       logout: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />',
       menu: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />',
       tool: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />',
+      sun: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />',
+      moon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />',
+      monitor: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />',
     };
 
     const path = icons[name] || icons.database;
@@ -113,6 +116,43 @@ const Icon = {
   },
 };
 
+var ADMIN_THEME_KEY = 'webspresso-admin-theme';
+function getAdminThemePref() {
+  try { return localStorage.getItem(ADMIN_THEME_KEY); } catch (e) { return null; }
+}
+function setAdminThemePref(mode) {
+  try {
+    if (mode === 'system') localStorage.removeItem(ADMIN_THEME_KEY);
+    else localStorage.setItem(ADMIN_THEME_KEY, mode);
+  } catch (e) {}
+  if (window.__syncAdminTheme) window.__syncAdminTheme();
+  m.redraw();
+}
+const ThemeToggle = {
+  view() {
+    var pref = getAdminThemePref();
+    var isSystem = !pref || pref === 'system';
+    var isLight = pref === 'light';
+    var isDark = pref === 'dark';
+    var btn = function(mode, title, iconName) {
+      var active = (mode === 'system' && isSystem) || (mode === 'light' && isLight) || (mode === 'dark' && isDark);
+      return m('button.p-1.5.rounded-md.transition-colors', {
+        type: 'button',
+        title: title,
+        class: active
+          ? 'bg-white dark:bg-slate-600 text-blue-600 dark:text-blue-300 shadow-sm'
+          : 'text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700',
+        onclick: function() { setAdminThemePref(mode); },
+      }, m(Icon, { name: iconName, class: 'w-4 h-4' }));
+    };
+    return m('div.flex.items-center.gap-0.5.p-0.5.rounded-lg.border.border-gray-200 dark:border-slate-600.bg-gray-50 dark:bg-slate-900/80', [
+      btn('system', 'Match system', 'monitor'),
+      btn('light', 'Light', 'sun'),
+      btn('dark', 'Dark', 'moon'),
+    ]);
+  },
+};
+
 // Menu Item Component
 const MenuItem = {
   view(vnode) {
@@ -121,8 +161,8 @@ const MenuItem = {
     return m('a.flex.items-center.gap-3.px-3.py-2.rounded-lg.text-sm.font-medium.transition-colors', {
       href: item.path,
       class: active 
-        ? 'bg-blue-100 text-blue-700' 
-        : 'text-gray-700 hover:bg-gray-100',
+        ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' 
+        : 'text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700',
       onclick: (e) => {
         e.preventDefault();
         sidebarOpen = false;
@@ -131,7 +171,7 @@ const MenuItem = {
     }, [
       item.icon && m(Icon, { name: item.icon, class: 'w-5 h-5 flex-shrink-0' }),
       m('span.truncate', item.label),
-      item.badge && m('span.ml-auto.bg-blue-100.text-blue-600.text-xs.px-2.py-0.5.rounded-full', item.badge),
+      item.badge && m('span.ml-auto.bg-blue-100.dark:bg-blue-900/50.text-blue-600.dark:text-blue-300.text-xs.px-2.py-0.5.rounded-full', item.badge),
     ]);
   },
 };
@@ -154,7 +194,7 @@ const MenuGroup = {
     return m('div.mb-2', [
       // Group header
       group.collapsible !== false
-        ? m('button.w-full.flex.items-center.gap-3.px-3.py-2.text-xs.font-semibold.text-gray-500.uppercase.tracking-wider.hover:text-gray-700', {
+        ? m('button.w-full.flex.items-center.gap-3.px-3.py-2.text-xs.font-semibold.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.hover:text-gray-700 dark:hover:text-slate-200', {
             onclick: () => { vnode.state.collapsed = !collapsed; },
           }, [
             group.icon && m(Icon, { name: group.icon, class: 'w-4 h-4' }),
@@ -164,7 +204,7 @@ const MenuGroup = {
               class: 'w-4 h-4 transition-transform' 
             }),
           ])
-        : m('div.px-3.py-2.text-xs.font-semibold.text-gray-500.uppercase.tracking-wider', [
+        : m('div.px-3.py-2.text-xs.font-semibold.text-gray-500 dark:text-slate-400.uppercase.tracking-wider', [
             group.icon && m(Icon, { name: group.icon, class: 'w-4 h-4 inline mr-2' }),
             group.label,
           ]),
@@ -217,24 +257,26 @@ const Sidebar = {
         onclick: () => { sidebarOpen = false; },
       }),
 
-      m('aside.w-64.bg-white.border-r.border-gray-200.flex.flex-col.h-screen.fixed.left-0.top-0.z-40.transition-transform.duration-200', {
+      m('aside.w-64.bg-white dark:bg-slate-800.border-r.border-gray-200 dark:border-slate-600.flex.flex-col.h-screen.fixed.left-0.top-0.z-40.transition-transform.duration-200', {
         class: sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
       }, [
         // Logo/Title
-        m('div.h-16.flex.items-center.justify-between.px-4.border-b.border-gray-200', [
-          m('a.flex.items-center.gap-2.text-lg.font-bold.text-gray-900', {
+        m('div.h-16.flex.items-center.justify-between.gap-2.px-4.border-b.border-gray-200.dark:border-slate-600', [
+          m('a.flex.items-center.gap-2.text-lg.font-bold.text-gray-900.dark:text-slate-100.min-w-0', {
             href: '/',
             onclick: (e) => { e.preventDefault(); sidebarOpen = false; m.route.set('/'); },
           }, [
-            m('div.w-8.h-8.bg-blue-600.rounded-lg.flex.items-center.justify-center', [
+            m('div.w-8.h-8.bg-blue-600.rounded-lg.flex.items-center.justify-center.flex-shrink-0', [
               m('span.text-white.font-bold', 'A'),
             ]),
-            m('span', settings?.title || 'Admin'),
+            m('span.truncate', settings?.title || 'Admin'),
+          ]),
+          m('div.flex.items-center.gap-2.flex-shrink-0', [
+            m(ThemeToggle),
+            m('button.p-1.text-gray-400.dark:text-slate-500.hover:text-gray-600.dark:hover:text-slate-300.lg:hidden', {
+              onclick: () => { sidebarOpen = false; },
+            }, m(Icon, { name: 'x', class: 'w-5 h-5' })),
           ]),
-          // Close button (mobile only)
-          m('button.p-1.text-gray-400.hover:text-gray-600.lg:hidden', {
-            onclick: () => { sidebarOpen = false; },
-          }, m(Icon, { name: 'x', class: 'w-5 h-5' })),
         ]),
 
         // Menu
@@ -249,18 +291,18 @@ const Sidebar = {
         ]),
 
         // User section
-        state.user && m('div.p-4.border-t.border-gray-200', [
+        state.user && m('div.p-4.border-t.border-gray-200.dark:border-slate-600', [
           m('div.flex.items-center.gap-3', [
-            m('div.w-8.h-8.bg-gray-200.rounded-full.flex.items-center.justify-center', [
-              m('span.text-sm.font-medium.text-gray-600', 
+            m('div.w-8.h-8.bg-gray-200 dark:bg-slate-700.rounded-full.flex.items-center.justify-center', [
+              m('span.text-sm.font-medium.text-gray-600.dark:text-slate-300', 
                 (state.user.name || state.user.email || 'A').charAt(0).toUpperCase()
               ),
             ]),
             m('div.flex-1.min-w-0', [
-              m('p.text-sm.font-medium.text-gray-900.truncate', state.user.name || 'Admin'),
-              m('p.text-xs.text-gray-500.truncate', state.user.email),
+              m('p.text-sm.font-medium.text-gray-900 dark:text-slate-100.truncate', state.user.name || 'Admin'),
+              m('p.text-xs.text-gray-500 dark:text-slate-400.truncate', state.user.email),
             ]),
-            m('button.p-1.text-gray-400.hover:text-gray-600', {
+            m('button.p-1.text-gray-400 dark:text-slate-500.hover:text-gray-600 dark:hover:text-slate-300', {
               title: 'Logout',
               onclick: async () => {
                 await api.post('/auth/logout');
@@ -279,11 +321,14 @@ const Sidebar = {
 // Mobile Header with hamburger button
 const MobileHeader = {
   view(vnode) {
-    return m('div.lg:hidden.fixed.top-0.left-0.right-0.h-14.bg-white.border-b.border-gray-200.flex.items-center.px-4.z-20', [
-      m('button.p-2.-ml-1.text-gray-600.hover:text-gray-900.rounded-lg.hover:bg-gray-100', {
-        onclick: () => { sidebarOpen = true; },
-      }, m(Icon, { name: 'menu', class: 'w-6 h-6' })),
-      m('span.ml-3.text-lg.font-semibold.text-gray-900', 'Admin'),
+    return m('div.lg:hidden.fixed.top-0.left-0.right-0.h-14.bg-white.dark:bg-slate-800.border-b.border-gray-200.dark:border-slate-600.flex.items-center.justify-between.px-4.z-20', [
+      m('div.flex.items-center.min-w-0', [
+        m('button.p-2.-ml-1.text-gray-600.dark:text-slate-400.hover:text-gray-900.dark:hover:text-slate-100.rounded-lg.hover:bg-gray-100.dark:hover:bg-slate-700', {
+          onclick: () => { sidebarOpen = true; },
+        }, m(Icon, { name: 'menu', class: 'w-6 h-6' })),
+        m('span.ml-3.text-lg.font-semibold.text-gray-900.dark:text-slate-100.truncate', 'Admin'),
+      ]),
+      m(ThemeToggle),
     ]);
   },
 };
@@ -291,7 +336,7 @@ const MobileHeader = {
 // Layout Component (with sidebar)
 const Layout = {
   view(vnode) {
-    return m('div.min-h-screen.bg-gray-50', [
+    return m('div.min-h-screen.bg-gray-50.dark:bg-slate-950', [
       m(MobileHeader),
       m(Sidebar),
       m('main.lg:ml-64.p-6.pt-20.lg:pt-6', vnode.children),

package/plugins/index.js

@@ -14,6 +14,7 @@ const auditLogPlugin = require('./audit-log');
 const recaptchaPlugin = require('./recaptcha');
 const swaggerPlugin = require('./swagger');
 const healthCheckPlugin = require('./health-check');
+const restResourcePlugin = require('./rest-resources');
 
 module.exports = {
   sitemapPlugin,
@@ -27,5 +28,6 @@ module.exports = {
   recaptchaPlugin,
   swaggerPlugin,
   healthCheckPlugin,
+  restResourcePlugin,
 };