webspresso 0.0.77 → 0.0.78

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);
+  }
+}