webspresso 0.0.77 → 0.0.79

package/plugins/content/admin/content-types-component.js

@@ -0,0 +1,250 @@
+/**
+ * Content types admin page — Mithril component source.
+ * @module plugins/content/admin/content-types-component
+ */
+
+/**
+ * @param {Object} [options]
+ * @param {string} [options.apiPrefix='/content']
+ */
+function generateContentTypesComponent(options = {}) {
+  const apiPrefix = options.apiPrefix || '/content';
+
+  return `
+(function() {
+  var API = '${apiPrefix}';
+  var FIELD_TYPES = ['text','textarea','rich-text','number','boolean','image','url','date','select','repeater'];
+
+  function emptyField() {
+    return { name: '', type: 'text', label: '', required: false, options: [], fields: [] };
+  }
+
+  function ContentTypesListPage() {
+  var types = [];
+  var loading = true;
+  var error = null;
+
+  function load() {
+    loading = true;
+    error = null;
+    return api.get(API + '/types').then(function(res) {
+      types = res.data || [];
+      loading = false;
+    }).catch(function(e) {
+      error = e.message || String(e);
+      loading = false;
+    });
+  }
+
+  return {
+    oninit: load,
+    view: function() {
+      return m(Layout, { breadcrumbs: [{ label: 'Content Types', href: '/content/types' }] }, [
+        m('.flex.items-center.justify-between.mb-6', [
+          m('h2.text-2xl.font-bold.text-gray-900.dark:text-slate-100', 'Content Types'),
+          m('a.bg-blue-600.text-white.px-4.py-2.rounded-lg.text-sm', { href: '/content/types/new' }, 'New Type'),
+        ]),
+        loading ? m('p.text-gray-500', 'Loading…') : null,
+        error ? m('.bg-red-50.text-red-700.p-4.rounded', error) : null,
+        !loading && !error ? m('.bg-white.dark:bg-slate-800.rounded-lg.shadow.overflow-hidden', [
+          m('table.w-full.text-sm', [
+            m('thead.bg-gray-50.dark:bg-slate-900', m('tr', [
+              m('th.text-left.p-3', 'Name'),
+              m('th.text-left.p-3', 'Slug'),
+              m('th.text-left.p-3', 'Fields'),
+              m('th.text-right.p-3', 'Actions'),
+            ])),
+            m('tbody', types.map(function(t) {
+              return m('tr.border-t.border-gray-100.dark:border-slate-700', [
+                m('td.p-3.font-medium', t.name),
+                m('td.p-3.text-gray-500', t.slug),
+                m('td.p-3.text-gray-500', (t.schema && t.schema.fields ? t.schema.fields.length : 0)),
+                m('td.p-3.text-right.space-x-2', [
+                  m('a.text-blue-600', { href: '/content/types/' + encodeURIComponent(t.slug) + '/entries' }, 'Entries'),
+                  m('a.text-gray-600', { href: '/content/types/edit/' + t.id }, 'Edit'),
+                ]),
+              ]);
+            })),
+          ]),
+          types.length === 0 ? m('p.p-6.text-gray-500', 'No content types yet.') : null,
+        ]) : null,
+      ]);
+    },
+  };
+  }
+
+  function ContentTypeFormPage() {
+  var id = m.route.param('id');
+  var isNew = !id || id === 'new';
+  var form = { slug: '', name: '', description: '', schema: { fields: [emptyField()] } };
+  var loading = !isNew;
+  var saving = false;
+  var error = null;
+
+  function load() {
+    if (isNew) return Promise.resolve();
+    return api.get(API + '/types/' + id).then(function(res) {
+      var d = res.data;
+      form.slug = d.slug;
+      form.name = d.name;
+      form.description = d.description || '';
+      form.schema = d.schema || { fields: [] };
+      if (!form.schema.fields || form.schema.fields.length === 0) {
+        form.schema.fields = [emptyField()];
+      }
+      loading = false;
+    }).catch(function(e) {
+      error = e.message;
+      loading = false;
+    });
+  }
+
+  function renderFieldEditor(field, path, onRemove) {
+    return m('.border.border-gray-200.dark:border-slate-600.rounded.p-4.space-y-3', [
+      m('.grid.grid-cols-2.gap-3', [
+        m('div', [
+          m('label.block.text-xs.text-gray-500.mb-1', 'Name'),
+          m('input.w-full.border.rounded.px-2.py-1', {
+            value: field.name,
+            oninput: function(e) { field.name = e.target.value; },
+          }),
+        ]),
+        m('div', [
+          m('label.block.text-xs.text-gray-500.mb-1', 'Type'),
+          m('select.w-full.border.rounded.px-2.py-1', {
+            value: field.type,
+            onchange: function(e) { field.type = e.target.value; },
+          }, FIELD_TYPES.map(function(t) { return m('option', { value: t }, t); })),
+        ]),
+        m('div', [
+          m('label.block.text-xs.text-gray-500.mb-1', 'Label'),
+          m('input.w-full.border.rounded.px-2.py-1', {
+            value: field.label || '',
+            oninput: function(e) { field.label = e.target.value; },
+          }),
+        ]),
+        m('div.flex.items-end', [
+          m('label.flex.items-center.gap-2.text-sm', [
+            m('input', { type: 'checkbox', checked: !!field.required, onchange: function(e) { field.required = e.target.checked; } }),
+            'Required',
+          ]),
+        ]),
+      ]),
+      field.type === 'select' ? m('div', [
+        m('label.block.text-xs.text-gray-500.mb-1', 'Options (comma-separated)'),
+        m('input.w-full.border.rounded.px-2.py-1', {
+          value: (field.options || []).join(', '),
+          oninput: function(e) {
+            field.options = e.target.value.split(',').map(function(s) { return s.trim(); }).filter(Boolean);
+          },
+        }),
+      ]) : null,
+      field.type === 'repeater' ? m('.pl-4.border-l-2.border-blue-200.space-y-2', [
+        m('p.text-xs.text-gray-500', 'Nested fields'),
+        (field.fields || []).map(function(nf, idx) {
+          return renderFieldEditor(nf, path + '.fields.' + idx, function() {
+            field.fields.splice(idx, 1);
+          });
+        }),
+        m('button.text-sm.text-blue-600', {
+          type: 'button',
+          onclick: function() {
+            field.fields = field.fields || [];
+            field.fields.push(emptyField());
+          },
+        }, '+ Add nested field'),
+      ]) : null,
+      onRemove ? m('button.text-sm.text-red-600', { type: 'button', onclick: onRemove }, 'Remove field') : null,
+    ]);
+  }
+
+  return {
+    oninit: load,
+    view: function() {
+      if (loading) return m(Layout, m('p.p-8.text-gray-500', 'Loading…'));
+      return m(Layout, { breadcrumbs: [
+        { label: 'Content Types', href: '/content/types' },
+        { label: isNew ? 'New' : 'Edit', href: '#' },
+      ]}, [
+        m('h2.text-2xl.font-bold.mb-6', isNew ? 'New Content Type' : 'Edit Content Type'),
+        error ? m('.bg-red-50.text-red-700.p-4.rounded.mb-4', error) : null,
+        m('form.bg-white.dark:bg-slate-800.rounded-lg.shadow.p-6.space-y-4', {
+          onsubmit: function(e) {
+            e.preventDefault();
+            saving = true;
+            error = null;
+            var payload = {
+              slug: form.slug,
+              name: form.name,
+              description: form.description || null,
+              schema: form.schema,
+            };
+            var req = isNew
+              ? api.post(API + '/types', payload)
+              : api.put(API + '/types/' + id, payload);
+            req.then(function() {
+              m.route.set('/content/types');
+            }).catch(function(err) {
+              error = err.message;
+              saving = false;
+              m.redraw();
+            });
+          },
+        }, [
+          m('.grid.grid-cols-2.gap-4', [
+            m('div', [
+              m('label.block.text-sm.font-medium.mb-1', 'Slug'),
+              m('input.w-full.border.rounded.px-3.py-2', {
+                value: form.slug,
+                disabled: !isNew,
+                oninput: function(e) { form.slug = e.target.value; },
+              }),
+            ]),
+            m('div', [
+              m('label.block.text-sm.font-medium.mb-1', 'Name'),
+              m('input.w-full.border.rounded.px-3.py-2', {
+                value: form.name,
+                oninput: function(e) { form.name = e.target.value; },
+              }),
+            ]),
+          ]),
+          m('div', [
+            m('label.block.text-sm.font-medium.mb-1', 'Description'),
+            m('textarea.w-full.border.rounded.px-3.py-2', {
+              value: form.description,
+              oninput: function(e) { form.description = e.target.value; },
+            }),
+          ]),
+          m('div', [
+            m('.flex.items-center.justify-between.mb-2', [
+              m('h3.font-semibold', 'Fields'),
+              m('button.text-sm.text-blue-600', {
+                type: 'button',
+                onclick: function() { form.schema.fields.push(emptyField()); },
+              }, '+ Add field'),
+            ]),
+            form.schema.fields.map(function(f, i) {
+              return renderFieldEditor(f, String(i), function() {
+                form.schema.fields.splice(i, 1);
+              });
+            }),
+          ]),
+          m('.flex.justify-end.gap-3.pt-4', [
+            m('a.px-4.py-2.border.rounded', { href: '/content/types' }, 'Cancel'),
+            m('button.px-4.py-2.bg-blue-600.text-white.rounded', { disabled: saving }, saving ? 'Saving…' : 'Save'),
+          ]),
+        ]),
+      ]);
+    },
+  };
+  }
+
+  window.__customPages = window.__customPages || {};
+  window.__customPages['content-types'] = ContentTypesListPage;
+  window.__customPages['content-types-new'] = ContentTypeFormPage;
+  window.__customPages['content-types-edit'] = ContentTypeFormPage;
+})();
+`;
+}
+
+module.exports = { generateContentTypesComponent };

package/plugins/content/api-handlers.js

@@ -0,0 +1,157 @@
+/**
+ * Content plugin API handlers
+ * @module plugins/content/api-handlers
+ */
+
+/**
+ * @param {Object} deps
+ * @param {ReturnType<import('../../core/content/service').createContentService>} deps.contentService
+ */
+function createContentApiHandlers({ contentService }) {
+  function sendError(res, err, status = 400) {
+    const message = err?.message || 'Request failed';
+    if (message.includes('not found')) {
+      return res.status(404).json({ error: message });
+    }
+    return res.status(status).json({ error: message });
+  }
+
+  async function listTypesHandler(req, res) {
+    try {
+      const data = await contentService.listTypes();
+      res.json({ data });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function createTypeHandler(req, res) {
+    try {
+      const row = await contentService.createType(req.body);
+      res.status(201).json({ data: row });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function getTypeHandler(req, res) {
+    try {
+      const row = await contentService.getTypeById(req.params.id);
+      if (!row) return res.status(404).json({ error: 'Content type not found' });
+      res.json({ data: row });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function updateTypeHandler(req, res) {
+    try {
+      const row = await contentService.updateType(req.params.id, req.body);
+      res.json({ data: row });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function deleteTypeHandler(req, res) {
+    try {
+      await contentService.deleteType(req.params.id);
+      res.json({ success: true });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function getTypeSchemaHandler(req, res) {
+    try {
+      const row = await contentService.getTypeBySlug(req.params.typeSlug);
+      if (!row) return res.status(404).json({ error: 'Content type not found' });
+      res.json({ data: { slug: row.slug, name: row.name, schema: row.schema } });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function listEntriesHandler(req, res) {
+    try {
+      const data = await contentService.listEntries(req.params.typeSlug, {
+        status: req.query.status,
+        locale: req.query.locale !== undefined ? req.query.locale : undefined,
+      });
+      res.json({ data });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function createEntryHandler(req, res) {
+    try {
+      const row = await contentService.createEntry(req.params.typeSlug, req.body);
+      res.status(201).json({ data: row });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function getEntryHandler(req, res) {
+    try {
+      const bundle = await contentService.getEntryById(req.params.id);
+      if (!bundle) return res.status(404).json({ error: 'Content entry not found' });
+      res.json({ data: bundle.entry, type: bundle.type });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function updateEntryHandler(req, res) {
+    try {
+      const row = await contentService.updateEntry(req.params.id, req.body);
+      res.json({ data: row });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function deleteEntryHandler(req, res) {
+    try {
+      await contentService.deleteEntry(req.params.id);
+      res.json({ success: true });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  async function publicGetEntryHandler(req, res) {
+    try {
+      const result = await contentService.getEntry(req.params.typeSlug, req.params.entrySlug, {
+        locale: req.query.locale ?? null,
+      });
+      if (!result) return res.status(404).json({ error: 'Content not found' });
+      res.json({
+        type: result.meta.typeSlug,
+        slug: result.meta.slug,
+        data: result.data,
+        meta: result.meta,
+      });
+    } catch (err) {
+      sendError(res, err);
+    }
+  }
+
+  return {
+    listTypesHandler,
+    createTypeHandler,
+    getTypeHandler,
+    updateTypeHandler,
+    deleteTypeHandler,
+    getTypeSchemaHandler,
+    listEntriesHandler,
+    createEntryHandler,
+    getEntryHandler,
+    updateEntryHandler,
+    deleteEntryHandler,
+    publicGetEntryHandler,
+  };
+}
+
+module.exports = { createContentApiHandlers };

package/plugins/content/client/inline-edit.css

@@ -0,0 +1,296 @@
+/**
+ * Inline edit — popover editor for admin users on public pages.
+ */
+.ws-content-host,
+.ws-content-block {
+  position: relative;
+  margin-block: 0.25rem;
+}
+
+.ws-content-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.375rem;
+  min-height: 1.75rem;
+}
+
+.ws-content-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.35rem 0.65rem;
+  border-radius: 9999px;
+  border: 1px solid #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.ws-content-edit-btn:hover {
+  background: #dbeafe;
+  border-color: #93c5fd;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
+}
+
+.ws-content-edit-btn:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.ws-content-edit-btn-icon {
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.ws-content-editable {
+  outline: 1px dashed transparent;
+  outline-offset: 3px;
+  border-radius: 0.2rem;
+  transition: outline-color 0.15s, background-color 0.15s;
+}
+
+.ws-content-host:hover .ws-content-editable,
+.ws-content-host.is-editing .ws-content-editable {
+  outline-color: rgba(37, 99, 235, 0.4);
+  background: rgba(37, 99, 235, 0.05);
+}
+
+/* Editor shell — id kept for compatibility */
+#ws-content-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  pointer-events: none;
+}
+
+#ws-content-modal.is-open {
+  display: block;
+}
+
+.ws-content-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.2);
+  pointer-events: auto;
+}
+
+.ws-content-modal-panel {
+  position: fixed;
+  z-index: 1;
+  width: min(22rem, calc(100vw - 1.5rem));
+  max-height: min(24rem, calc(100vh - 2rem));
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  box-shadow:
+    0 4px 6px -1px rgba(15, 23, 42, 0.08),
+    0 16px 32px -8px rgba(15, 23, 42, 0.18);
+  pointer-events: auto;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.875rem;
+  color: #0f172a;
+  box-sizing: border-box;
+}
+
+.ws-content-modal-panel *,
+.ws-content-modal-panel *::before,
+.ws-content-modal-panel *::after {
+  box-sizing: border-box;
+}
+
+.ws-content-popover-arrow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  transform: rotate(45deg);
+  top: -7px;
+  left: 50%;
+  margin-left: -6px;
+  pointer-events: none;
+}
+
+.ws-content-modal-panel.is-above .ws-content-popover-arrow {
+  top: auto;
+  bottom: -7px;
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+
+.ws-content-modal-panel:not(.is-above) .ws-content-popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.ws-content-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.ws-content-modal-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #0f172a;
+}
+
+.ws-content-modal-close {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #64748b;
+}
+
+.ws-content-modal-close:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.ws-content-modal-body {
+  padding: 0.75rem 1rem;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.ws-content-field {
+  margin-bottom: 0.75rem;
+}
+
+.ws-content-field:last-child {
+  margin-bottom: 0;
+}
+
+.ws-content-field label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+  color: #475569;
+  letter-spacing: 0.01em;
+}
+
+.ws-content-field input,
+.ws-content-field textarea,
+.ws-content-field select {
+  width: 100%;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: #0f172a;
+  background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ws-content-field input:focus,
+.ws-content-field textarea:focus,
+.ws-content-field select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}
+
+.ws-content-field textarea {
+  resize: vertical;
+  min-height: 4.5rem;
+}
+
+.ws-content-modal-error {
+  padding: 0 1rem 0.5rem;
+  color: #b91c1c;
+  font-size: 0.8125rem;
+  flex-shrink: 0;
+}
+
+.ws-content-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem 0.875rem;
+  border-top: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.ws-content-btn {
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: inherit;
+}
+
+.ws-content-btn-muted {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #475569;
+}
+
+.ws-content-btn-muted:hover {
+  background: #f1f5f9;
+}
+
+.ws-content-btn-primary {
+  background: #2563eb;
+  color: #fff;
+}
+
+.ws-content-btn-primary:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.ws-content-btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Mobile: bottom sheet */
+@media (max-width: 639px) {
+  .ws-content-modal-panel.is-sheet {
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    width: 100% !important;
+    max-width: none;
+    max-height: min(88vh, 32rem);
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: none;
+  }
+
+  .ws-content-modal-panel.is-sheet .ws-content-popover-arrow {
+    display: none;
+  }
+
+  .ws-content-modal-backdrop {
+    background: rgba(15, 23, 42, 0.35);
+  }
+}