@astro-live-cms/core 0.2.0

package/static/cms/editor/section-controls/mutations.js

@@ -0,0 +1,112 @@
+import { HOME_SECTION_KEYS } from './constants.js';
+import {
+  generateSectionId,
+  humanizeSectionKey,
+  normalizeSpacingY,
+} from './utils.js';
+
+export function mutateSections({
+  sections,
+  action,
+  sectionId,
+  payload,
+  applySpacing,
+}) {
+  const index = sections.findIndex((section) => section.id === sectionId);
+  if (index === -1) return { ok: false, message: 'Section not found' };
+
+  if (action === 'up') {
+    if (index === 0) return { ok: false, message: 'Section is already first' };
+    const next = [...sections];
+    [next[index - 1], next[index]] = [next[index], next[index - 1]];
+    return { ok: true, message: 'Section moved up', sections: next };
+  }
+
+  if (action === 'down') {
+    if (index === sections.length - 1) {
+      return { ok: false, message: 'Section is already last' };
+    }
+    const next = [...sections];
+    [next[index], next[index + 1]] = [next[index + 1], next[index]];
+    return { ok: true, message: 'Section moved down', sections: next };
+  }
+
+  if (action === 'duplicate') {
+    const source = sections[index];
+    const duplicate = {
+      ...source,
+      id: `${source.id}-copy-${Math.random().toString(36).slice(2, 5)}`,
+      enabled: true,
+    };
+    const next = [...sections.slice(0, index + 1), duplicate, ...sections.slice(index + 1)];
+    return { ok: true, message: 'Section duplicated', sections: next };
+  }
+
+  if (action === 'delete') {
+    if (sections.length <= 1) {
+      return { ok: false, message: 'At least one section is required' };
+    }
+    return {
+      ok: true,
+      message: 'Section deleted',
+      sections: sections.filter((section) => section.id !== sectionId),
+    };
+  }
+
+  if (action === 'toggle') {
+    const section = sections[index];
+    const enabledCount = sections.filter((item) => item.enabled).length;
+    if (section.enabled && enabledCount <= 1) {
+      return { ok: false, message: 'At least one section must remain visible' };
+    }
+
+    const next = [...sections];
+    next[index] = {
+      ...section,
+      enabled: !section.enabled,
+    };
+
+    return {
+      ok: true,
+      message: next[index].enabled ? 'Section shown' : 'Section hidden',
+      sections: next,
+    };
+  }
+
+  if (action === 'add') {
+    const key = payload?.sectionKey;
+    if (typeof key !== 'string' || !HOME_SECTION_KEYS.includes(key)) {
+      return { ok: false, message: 'Invalid section key' };
+    }
+    const inserted = {
+      id: generateSectionId(key),
+      key,
+      enabled: true,
+    };
+    const next = [...sections.slice(0, index + 1), inserted, ...sections.slice(index + 1)];
+    return {
+      ok: true,
+      message: `Inserted ${humanizeSectionKey(key)}`,
+      sections: next,
+    };
+  }
+
+  if (action === 'spacing') {
+    const spacingY = normalizeSpacingY(payload?.spacingY);
+    const applied = applySpacing(sectionId, spacingY);
+    if (!applied) return { ok: false, message: 'Section not found' };
+
+    const next = [...sections];
+    next[index] = {
+      ...next[index],
+      spacing_y: spacingY,
+    };
+    return {
+      ok: true,
+      message: `Spacing set to ${spacingY ? spacingY : 'default'}`,
+      sections: next,
+    };
+  }
+
+  return { ok: false, message: 'Unknown action' };
+}

package/static/cms/editor/section-controls/page-context.js

@@ -0,0 +1,34 @@
+export function getPageContext(parseCmsAttr, sectionNodes) {
+  for (const sectionNode of sectionNodes) {
+    if (!(sectionNode instanceof Element)) continue;
+    const collection = sectionNode.getAttribute('data-cms-collection');
+    const id = sectionNode.getAttribute('data-cms-entry-id');
+    if (collection && id) {
+      return { collection, id };
+    }
+  }
+
+  for (const sectionNode of sectionNodes) {
+    if (!(sectionNode instanceof Element)) continue;
+    const marker = sectionNode.querySelector('[data-cms], [data-cms-img]');
+    if (!marker) continue;
+
+    const attr = marker.getAttribute('data-cms') || marker.getAttribute('data-cms-img');
+    if (!attr) continue;
+
+    const parsed = parseCmsAttr(attr);
+    if (!parsed) continue;
+    if (parsed.collection !== 'pages') continue;
+
+    return {
+      collection: parsed.collection,
+      id: parsed.id,
+    };
+  }
+
+  if (window.location.pathname === '/') {
+    return { collection: 'pages', id: 'home' };
+  }
+
+  return null;
+}

package/static/cms/editor/section-controls/pickers.js

@@ -0,0 +1,196 @@
+import { HOME_SECTION_KEYS, SPACING_Y_OPTIONS } from './constants.js';
+import { humanizeSectionKey } from './utils.js';
+
+function attachGlobalPositioning({ picker, getAnchor }) {
+  function position() {
+    const anchorButton = getAnchor();
+    if (!anchorButton || picker.hidden) return;
+
+    const rect = anchorButton.getBoundingClientRect();
+    const pickerRect = picker.getBoundingClientRect();
+
+    let left = rect.left;
+    if (left + pickerRect.width > window.innerWidth - 12) {
+      left = window.innerWidth - pickerRect.width - 12;
+    }
+    if (left < 12) left = 12;
+
+    const top = rect.bottom + 8;
+    picker.style.left = `${Math.round(left)}px`;
+    picker.style.top = `${Math.round(top)}px`;
+  }
+
+  window.addEventListener('resize', position);
+  window.addEventListener('scroll', position, true);
+  return position;
+}
+
+function attachOutsideClose({ picker, getAnchor, close }) {
+  document.addEventListener('click', (event) => {
+    if (picker.hidden) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+
+    const anchorButton = getAnchor();
+    if (picker.contains(target)) return;
+    if (anchorButton && anchorButton.contains(target)) return;
+    close();
+  });
+}
+
+export function createAddPicker({ onPick }) {
+  const picker = document.createElement('div');
+  picker.className = 'cms-section-add-picker';
+  picker.hidden = true;
+  picker.innerHTML = `
+    <div class="cms-section-add-picker-head">Insert Section</div>
+    <div class="cms-section-add-picker-list"></div>
+  `;
+
+  const list = picker.querySelector('.cms-section-add-picker-list');
+  HOME_SECTION_KEYS.forEach((key) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'cms-section-add-option';
+    btn.dataset.key = key;
+    btn.textContent = humanizeSectionKey(key);
+    list?.appendChild(btn);
+  });
+
+  document.body.appendChild(picker);
+
+  let openForSectionId = null;
+  let anchorButton = null;
+
+  function close() {
+    picker.hidden = true;
+    picker.classList.remove('open');
+    openForSectionId = null;
+    anchorButton = null;
+  }
+
+  const position = attachGlobalPositioning({
+    picker,
+    getAnchor: () => anchorButton,
+  });
+
+  function open(button, sectionId) {
+    anchorButton = button;
+    openForSectionId = sectionId;
+    picker.hidden = false;
+    picker.classList.add('open');
+    position();
+  }
+
+  picker.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    const option = target.closest('.cms-section-add-option');
+    if (!(option instanceof HTMLButtonElement)) return;
+
+    const key = option.dataset.key;
+    if (!openForSectionId || !key) return;
+    onPick(openForSectionId, key);
+    close();
+  });
+
+  attachOutsideClose({
+    picker,
+    getAnchor: () => anchorButton,
+    close,
+  });
+
+  return {
+    open,
+    close,
+    setDisabled(disabled) {
+      picker.querySelectorAll('.cms-section-add-option').forEach((button) => {
+        button.disabled = disabled;
+      });
+    },
+  };
+}
+
+export function createSpacingPicker({ onPick }) {
+  const picker = document.createElement('div');
+  picker.className = 'cms-section-add-picker cms-section-spacing-picker';
+  picker.hidden = true;
+  picker.innerHTML = `
+    <div class="cms-section-add-picker-head">Vertical Spacing</div>
+    <div class="cms-section-add-picker-list"></div>
+  `;
+
+  const list = picker.querySelector('.cms-section-add-picker-list');
+  SPACING_Y_OPTIONS.forEach((option) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'cms-section-add-option';
+    btn.dataset.value = option.value;
+    btn.textContent = option.label;
+    list?.appendChild(btn);
+  });
+
+  document.body.appendChild(picker);
+
+  let openForSectionId = null;
+  let anchorButton = null;
+
+  function close() {
+    picker.hidden = true;
+    picker.classList.remove('open');
+    openForSectionId = null;
+    anchorButton = null;
+  }
+
+  const position = attachGlobalPositioning({
+    picker,
+    getAnchor: () => anchorButton,
+  });
+
+  function open(button, sectionId, currentValue) {
+    anchorButton = button;
+    openForSectionId = sectionId;
+    picker.hidden = false;
+    picker.classList.add('open');
+
+    picker.querySelectorAll('.cms-section-add-option').forEach((item) => {
+      item.classList.toggle(
+        'active',
+        (item instanceof HTMLButtonElement ? item.dataset.value : null) ===
+          (currentValue || 'default'),
+      );
+    });
+
+    position();
+  }
+
+  picker.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    const option = target.closest('.cms-section-add-option');
+    if (!(option instanceof HTMLButtonElement)) return;
+
+    const value = option.dataset.value;
+    if (!openForSectionId || !value) return;
+    onPick(openForSectionId, value);
+    close();
+  });
+
+  attachOutsideClose({
+    picker,
+    getAnchor: () => anchorButton,
+    close,
+  });
+
+  return {
+    open,
+    close,
+    setDisabled(disabled) {
+      picker.querySelectorAll('.cms-section-add-option').forEach((button) => {
+        button.disabled = disabled;
+      });
+    },
+  };
+}

package/static/cms/editor/section-controls/reorder.js

@@ -0,0 +1,92 @@
+import { reorderByDrag } from './model.js';
+
+export function bindDragSourceHandlers({
+  controls,
+  sectionId,
+  sectionNode,
+  setDragSourceId,
+  clearDropIndicators,
+}) {
+  controls.addEventListener('dragstart', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const dragHandle = target.closest('.cms-section-btn-drag');
+    if (!(dragHandle instanceof HTMLButtonElement)) return;
+
+    setDragSourceId(sectionId);
+    sectionNode.classList.add('cms-section-drag-source');
+    document.body.classList.add('cms-section-dragging');
+
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', sectionId);
+    }
+  });
+
+  controls.addEventListener('dragend', () => {
+    setDragSourceId(null);
+    clearDropIndicators();
+  });
+}
+
+export function bindDropTargetHandlers({
+  sectionNode,
+  sectionId,
+  isBusy,
+  getDragSourceId,
+  getSections,
+  setSections,
+  clearDropIndicators,
+  onReordered,
+}) {
+  sectionNode.addEventListener('dragover', (event) => {
+    const dragSourceId = getDragSourceId();
+    if (!dragSourceId || isBusy()) return;
+    if (dragSourceId === sectionId) return;
+
+    event.preventDefault();
+    const rect = sectionNode.getBoundingClientRect();
+    const placeAfter = event.clientY > rect.top + rect.height / 2;
+
+    sectionNode.classList.add('cms-section-drop-target');
+    sectionNode.classList.toggle('cms-section-drop-before', !placeAfter);
+    sectionNode.classList.toggle('cms-section-drop-after', placeAfter);
+    sectionNode.dataset.dropPosition = placeAfter ? 'after' : 'before';
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+  });
+
+  sectionNode.addEventListener('dragleave', (event) => {
+    const related = event.relatedTarget;
+    if (related instanceof Node && sectionNode.contains(related)) return;
+    sectionNode.classList.remove(
+      'cms-section-drop-target',
+      'cms-section-drop-before',
+      'cms-section-drop-after',
+    );
+    delete sectionNode.dataset.dropPosition;
+  });
+
+  sectionNode.addEventListener('drop', (event) => {
+    const dragSourceId = getDragSourceId();
+    if (!dragSourceId || isBusy()) return;
+    if (dragSourceId === sectionId) return;
+
+    event.preventDefault();
+    const placeAfter = sectionNode.dataset.dropPosition === 'after';
+    const currentSections = getSections();
+    const nextSections = reorderByDrag({
+      sections: currentSections,
+      sourceId: dragSourceId,
+      targetId: sectionId,
+      placeAfter,
+    });
+
+    clearDropIndicators();
+    if (nextSections === currentSections) return;
+    setSections(nextSections);
+    onReordered();
+  });
+}

package/static/cms/editor/section-controls/selection.js

@@ -0,0 +1,54 @@
+export function createSectionSelectionController({
+  sectionNodeById,
+  isSelectionLocked,
+}) {
+  let activeSectionId = null;
+  let observer = null;
+
+  function setActiveSection(sectionId) {
+    if (!sectionId || activeSectionId === sectionId) return;
+    activeSectionId = sectionId;
+
+    sectionNodeById.forEach((node, id) => {
+      if (!(node instanceof HTMLElement)) return;
+      node.classList.toggle('cms-section-active', id === sectionId);
+    });
+  }
+
+  function startObserver() {
+    if (typeof IntersectionObserver === 'undefined') return;
+    if (observer) {
+      observer.disconnect();
+    }
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (isSelectionLocked()) return;
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        const top = visible[0];
+        if (!(top?.target instanceof HTMLElement)) return;
+
+        const sectionId = top.target.getAttribute('data-cms-section-id');
+        if (!sectionId) return;
+        setActiveSection(sectionId);
+      },
+      {
+        root: null,
+        rootMargin: '-24% 0px -48% 0px',
+        threshold: [0.2, 0.35, 0.5, 0.7],
+      },
+    );
+
+    sectionNodeById.forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      observer?.observe(node);
+    });
+  }
+
+  return {
+    setActiveSection,
+    startObserver,
+  };
+}

package/static/cms/editor/section-controls/spacing-drag.js

@@ -0,0 +1,83 @@
+import { SPACING_Y_VALUES } from './constants.js';
+import { spacingIndex } from './utils.js';
+
+export function createSpacingDragController({
+  isBusy,
+  isReordering,
+  closePickers,
+  getSectionSpacing,
+  updateSpacingByToken,
+  setActiveSection,
+  onCommitted,
+}) {
+  let dragState = null;
+
+  function stop() {
+    if (!dragState) return;
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onEnd);
+    window.removeEventListener('pointercancel', onEnd);
+    document.body.classList.remove('cms-spacing-dragging');
+    dragState.handle.classList.remove('is-dragging');
+    dragState = null;
+  }
+
+  function start(event, sectionId, handle) {
+    if (isBusy()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    setActiveSection(sectionId);
+    closePickers();
+
+    const currentSpacing = getSectionSpacing(sectionId);
+    dragState = {
+      sectionId,
+      startY: event.clientY,
+      startIndex: spacingIndex(currentSpacing),
+      currentIndex: spacingIndex(currentSpacing),
+      changed: false,
+      handle,
+    };
+
+    handle.classList.add('is-dragging');
+    document.body.classList.add('cms-spacing-dragging');
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onEnd, { once: true });
+    window.addEventListener('pointercancel', onEnd, { once: true });
+  }
+
+  function onMove(event) {
+    if (!dragState || isBusy() || isReordering()) return;
+
+    const delta = event.clientY - dragState.startY;
+    const step = Math.round(delta / 56);
+    const nextIndex = Math.max(
+      0,
+      Math.min(SPACING_Y_VALUES.length - 1, dragState.startIndex + step),
+    );
+
+    if (nextIndex === dragState.currentIndex) return;
+
+    dragState.currentIndex = nextIndex;
+    dragState.changed = true;
+    const nextToken = SPACING_Y_VALUES[nextIndex];
+    updateSpacingByToken(dragState.sectionId, nextToken);
+  }
+
+  function onEnd() {
+    if (!dragState) return;
+    const changed = dragState.changed;
+    const sectionId = dragState.sectionId;
+    stop();
+    if (changed) {
+      onCommitted(sectionId);
+    }
+  }
+
+  return {
+    start,
+    stop,
+    isDragging: () => dragState !== null,
+  };
+}

package/static/cms/editor/section-controls/ui-elements.js

@@ -0,0 +1,54 @@
+import { spacingToken, humanizeSectionKey } from './utils.js';
+
+export function createSectionControlsElement() {
+  const controls = document.createElement('div');
+  controls.className = 'cms-section-controls';
+  controls.innerHTML = `
+    <div class="cms-section-controls-actions">
+      <button type="button" class="cms-section-btn cms-section-btn-drag" data-action="drag" title="Drag to reorder" draggable="true">Drag</button>
+      <button type="button" class="cms-section-btn" data-action="up" title="Move up">Up</button>
+      <button type="button" class="cms-section-btn" data-action="down" title="Move down">Down</button>
+      <button type="button" class="cms-section-btn" data-action="duplicate" title="Duplicate">Duplicate</button>
+      <button type="button" class="cms-section-btn" data-action="delete" title="Delete">Delete</button>
+      <button type="button" class="cms-section-btn" data-action="toggle" title="Toggle visibility">Hide</button>
+      <button type="button" class="cms-section-btn" data-action="spacing" title="Set vertical spacing">Space</button>
+    </div>
+  `;
+  return controls;
+}
+
+export function createSectionBadge(section, order) {
+  const badge = document.createElement('div');
+  badge.className = 'cms-section-chip';
+  badge.textContent = `${order}. ${humanizeSectionKey(section.key)}`;
+  return badge;
+}
+
+export function createSpacingDragHandle(section) {
+  const handle = document.createElement('button');
+  handle.type = 'button';
+  handle.className = 'cms-section-gap-handle';
+  handle.title = 'Drag vertically to resize section spacing';
+  handle.dataset.sectionId = section.id;
+  handle.innerHTML = `
+    <span class="cms-section-gap-grip"></span>
+    <span class="cms-section-gap-label">${
+      spacingToken(section.spacing_y) === 'default'
+        ? 'Y'
+        : `Y:${spacingToken(section.spacing_y)}`
+    }</span>
+  `;
+  return handle;
+}
+
+export function createInsertHandle() {
+  const handle = document.createElement('button');
+  handle.type = 'button';
+  handle.className = 'cms-section-insert-handle';
+  handle.title = 'Insert section below';
+  handle.setAttribute('aria-label', 'Insert section below');
+  handle.innerHTML = `
+    <span class="cms-section-insert-plus">+</span>
+  `;
+  return handle;
+}

package/static/cms/editor/section-controls/utils.js

@@ -0,0 +1,35 @@
+import { SPACING_Y_VALUES } from './constants.js';
+
+export function humanizeSectionKey(key) {
+  const short = key.startsWith('home.') ? key.slice('home.'.length) : key;
+  return short.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function normalizeSpacingY(value) {
+  if (typeof value !== 'string') return undefined;
+  return SPACING_Y_VALUES.includes(value) && value !== 'default' ? value : undefined;
+}
+
+export function spacingToken(value) {
+  return normalizeSpacingY(value) || 'default';
+}
+
+export function spacingIndex(value) {
+  const idx = SPACING_Y_VALUES.indexOf(spacingToken(value));
+  return idx === -1 ? 0 : idx;
+}
+
+export function spacingButtonLabel(value) {
+  const token = spacingToken(value);
+  return token === 'default' ? 'Space' : `Space:${token}`;
+}
+
+export function isRecord(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function generateSectionId(key) {
+  return `sec-${key.replace(/\./g, '-')}-${Date.now().toString(36)}-${Math.random()
+    .toString(36)
+    .slice(2, 6)}`;
+}