nebula-cms 0.1.0

package/src/client/css/dialog.css

@@ -0,0 +1,29 @@
+/*
+ * Shared dialog chrome styles for native <dialog> modals.
+ * Provides the surface, backdrop, title, and actions grid
+ * so individual dialog components only supply their own content.
+ */
+
+.dialog {
+  background: var(--cms-surface);
+  color: var(--cms-fg);
+  border: 1px solid var(--cms-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+.dialog::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.dialog__title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.dialog__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}

package/src/client/css/field-input.css

@@ -0,0 +1,39 @@
+/*
+ * Shared form field input styles used by StringField, NumberField,
+ * DateField, and EnumField. Provides the base appearance, focus ring,
+ * and disabled/readonly dimming so each leaf field only adds its own
+ * type-specific overrides.
+ */
+
+.field-input {
+  background: var(--cms-surface, #2a2a2e);
+  border: 1px solid var(--cms-border);
+  border-radius: 4px;
+  padding: 0.5rem;
+  font-size: 1rem;
+  color: var(--cms-fg);
+
+  &:focus {
+    outline: 2px solid var(--plum);
+    outline-offset: -1px;
+  }
+
+  &[readonly],
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+}
+
+/* Intrinsic-width inputs (number, date, select) — prevents stretching to 100% */
+.field-input--auto {
+  width: auto;
+}
+
+/* Native select dropdown with restored arrow and extra padding for the indicator */
+.field-input--select {
+  appearance: auto;
+  width: auto;
+  padding-right: 2rem;
+  cursor: pointer;
+}

package/src/client/css/reset.css

@@ -0,0 +1,59 @@
+/*
+ * Global CSS reset scoped to the .admin root element.
+ * Normalizes browser defaults that leak through when the CMS is embedded
+ * in a host page without its own reset. Imported before icons and theme
+ * so that resets are in place before any styled content renders.
+ */
+
+/* Remove default body margin so the admin fills its container edge-to-edge */
+
+body {
+  margin: 0;
+}
+
+/* Prevent padding/border from inflating element sizes */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Form elements don't inherit font by default */
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+}
+
+/* Reset browser defaults that leak through without a host-page reset */
+
+h1,
+h2,
+h3,
+p,
+ul,
+ol,
+dl {
+  margin: 0;
+}
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+}
+
+/* Fluid images and videos */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Dialog doesn't inherit font family */
+dialog {
+  font-family: var(--font-family);
+}

package/src/client/css/theme.css

@@ -0,0 +1,77 @@
+/*
+ * Theme definitions for nebula-cms.
+ * Provides CSS custom properties for both light and dark modes.
+ * Variables are defined on :root so that top-layer elements (dialogs
+ * opened with showModal()) inherit them. The resolved theme is applied
+ * via a data-theme attribute on document.documentElement.
+ */
+
+/* Shared tokens that don't change between themes */
+
+:root {
+  --plum: #dd2270;
+  --light-plum: #e8508f;
+  --button-bg: linear-gradient(135deg, #d83333, var(--plum));
+  --button-hover-bg: linear-gradient(135deg, #e04848, #f565ff);
+  /*
+   * Always light text on the gradient — intentionally not --cms-fg,
+   * which inverts in light mode and would produce dark-on-gradient.
+   */
+  --button-color: #e8eaf0;
+  --spacing: 2rem;
+  --font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Dark mode — deep background with rose accent */
+
+:root[data-theme='dark'] {
+  --cms-bg: rgb(13, 15, 20);
+  --cms-surface: #151720;
+  --cms-border: #252830;
+  --cms-muted: #8b90a0;
+  --cms-fg: #e8eaf0;
+  --gold: #fbbf24;
+  --light-red: #f87171;
+  --red: #dc2626;
+  --light-green: #34d399;
+  --green: #059669;
+  --light-orange: #fb923c;
+  --light-teal: #5eead4;
+  --light-purple: #e879f9;
+  --editor-caret: #e8eaf0;
+  --editor-active-line: rgba(224, 58, 128, 0.1);
+  color-scheme: dark;
+}
+
+/*
+ * Light mode — white background, same accent.
+ * Variable names are functional roles (--cms-bg = page background,
+ * --cms-fg = body text), not literal colors.
+ */
+
+:root[data-theme='light'] {
+  --cms-bg: #ffffff;
+  --cms-surface: #f8f5f7;
+  --cms-border: #ddd5da;
+  --cms-muted: #6e6870;
+  --cms-fg: #1e1a1c;
+  --gold: #b45309;
+  --light-red: #dc2626;
+  --red: #b91c1c;
+  --light-green: #059669;
+  --green: #047857;
+  --light-orange: #c2410c;
+  --light-teal: #0f766e;
+  --light-purple: #a21caf;
+  --editor-caret: #1e1a1c;
+  --editor-active-line: rgba(224, 58, 128, 0.06);
+  color-scheme: light;
+}
+
+/* Base styles for the admin shell */
+
+.admin {
+  font-family: var(--font-family);
+  background: var(--cms-bg);
+  color: var(--cms-fg);
+}

package/src/client/index.ts

@@ -0,0 +1 @@
+export { default } from './Admin.svelte';

package/src/client/js/drafts/merge.svelte.ts

@@ -0,0 +1,121 @@
+import { loadDrafts, type Draft } from './storage';
+import { splitFrontmatter } from '../utils/frontmatter';
+import { storageClient } from '../state/state.svelte';
+
+// Drafts for the current collection
+let draftList = $state<Draft[]>([]);
+// Map of draftId → whether the live content has diverged from the draft's snapshot
+let outdatedMap = $state<Record<string, boolean>>({});
+
+export const drafts = {
+  // All drafts for the active collection.
+  get all(): Draft[] {
+    return draftList;
+  },
+  // Map of draft ID to whether live content has diverged.
+  get outdated(): Record<string, boolean> {
+    return outdatedMap;
+  },
+};
+// Worker for off-thread snapshot comparison
+let diffWorker: Worker | null = null;
+
+/**
+ * Initializes the diff worker singleton and wires up the result handler.
+ * @return {Worker} The existing or newly created diff worker
+ */
+function ensureDiffWorker(): Worker {
+  if (diffWorker) return diffWorker;
+  // Uses .js extension because svelte-package does not rewrite URL string literals
+  diffWorker = new Worker(new URL('./workers/diff.js', import.meta.url), {
+    type: 'module',
+  });
+  diffWorker.addEventListener('message', (event) => {
+    const data = event.data;
+    if (data.type === 'diff-result') {
+      outdatedMap = data.results;
+    }
+  });
+  return diffWorker;
+}
+
+/**
+ * Loads drafts for a collection from IndexedDB and dispatches snapshot comparisons to the diff worker for any drafts linked to live files. Reads live file contents via the StorageClient.
+ * @param {string} collection - The collection to load drafts for
+ * @return {Promise<void>}
+ */
+export async function mergeDrafts(collection: string): Promise<void> {
+  draftList = await loadDrafts(collection);
+
+  /*
+   * Filter to drafts that need outdated checking:
+   * must be linked to a live file (not new), have a snapshot, and have a filename.
+   */
+  const candidates = draftList.filter(
+    (d) => !d.isNew && d.snapshot && d.filename,
+  );
+  if (candidates.length === 0) {
+    outdatedMap = {};
+    return;
+  }
+
+  /*
+   * Read all candidate files in parallel instead of sequentially.
+   * js-yaml is dynamically imported because it's a transitive dep — hoist
+   * before the loop so the import is evaluated once, not per-candidate.
+   */
+  const { load } = await import('js-yaml');
+  const settled = await Promise.all(
+    candidates.map(async (d) => {
+      try {
+        const text = await storageClient.readFile(collection, d.filename!);
+        const { rawFrontmatter, body } = splitFrontmatter(text);
+        const liveFormData = (load(rawFrontmatter) ?? {}) as Record<
+          string,
+          unknown
+        >;
+        const liveBody = body.replace(/^\n+/, '').replace(/\n+$/, '');
+        return {
+          draftId: d.id,
+          snapshot: d.snapshot!,
+          liveFormData,
+          liveBody,
+        };
+      } catch {
+        // File not found or unreadable — skip
+        return null;
+      }
+    }),
+  );
+  const entries = settled.filter((e): e is NonNullable<typeof e> => e !== null);
+
+  if (entries.length === 0) {
+    outdatedMap = {};
+    return;
+  }
+
+  // Dispatch to the diff worker for off-thread comparison
+  const worker = ensureDiffWorker();
+  worker.postMessage({ type: 'diff', entries });
+}
+
+/**
+ * Re-reads drafts from IndexedDB for the given collection and updates the reactive drafts list.
+ * Used after saving/deleting a draft so the sidebar reflects changes immediately without a full collection reload.
+ * @param {string} collection - The collection to refresh drafts for
+ * @return {Promise<void>}
+ */
+export async function refreshDrafts(collection: string): Promise<void> {
+  draftList = await loadDrafts(collection);
+}
+
+/**
+ * Resets draft-related state and terminates the diff worker. Called during disconnect.
+ * @return {void}
+ */
+export function resetDraftMerge(): void {
+  diffWorker?.terminate();
+  diffWorker = null;
+  draftList = [];
+  outdatedMap = {};
+}

package/src/client/js/drafts/ops.svelte.ts

@@ -0,0 +1,227 @@
+import {
+  saveDraft as persistDraft,
+  loadDraft as fetchDraft,
+  deleteDraft as removeDraft,
+  type Draft,
+} from './storage';
+import { stableStringify } from '../utils/stable-stringify';
+import {
+  applyEditorState,
+  _getDraftState,
+  _setDraftState,
+} from '../editor/editor.svelte';
+import { storageClient } from '../state/state.svelte';
+import { getFileCategory, getDataFormat } from '../utils/file-types';
+
+/**
+ * Loads a draft by ID from IndexedDB and populates the editor. Falls back to empty state if the draft is not found (safety fallback for the "Add" button flow).
+ * @param {string} id - The draft UUID to load
+ * @param {string} collection - The collection this draft belongs to
+ * @return {Promise<void>}
+ */
+export async function loadDraftById(
+  id: string,
+  collection: string,
+): Promise<void> {
+  const draft = await fetchDraft(id);
+
+  if (!draft) {
+    applyEditorState(
+      {
+        body: '',
+        formData: {},
+        filename: '',
+        bodyLoaded: true,
+        draftId: id,
+        isNewDraft: true,
+        snapshot: null,
+        collection,
+        draftCreatedAt: new Date().toISOString(),
+      },
+      true,
+    );
+    return;
+  }
+
+  applyEditorState(
+    {
+      body: draft.body,
+      formData: draft.formData,
+      filename: draft.filename ?? '',
+      bodyLoaded: true,
+      draftId: draft.id,
+      isNewDraft: draft.isNew,
+      snapshot: draft.snapshot,
+      collection,
+      draftCreatedAt: draft.createdAt,
+    },
+    true,
+  );
+}
+
+/**
+ * Saves the current editor content as a draft in IndexedDB. On first save, generates a UUID and createdAt timestamp. For live content edits, captures a snapshot of the original data.
+ * @return {Promise<void>}
+ */
+export async function saveDraftToIDB(): Promise<void> {
+  const s = _getDraftState();
+  _setDraftState({ saving: true });
+
+  try {
+    let { draftId, draftCreatedAt, snapshot } = s;
+
+    // Generate draft ID and timestamp on first save
+    if (!draftId) {
+      draftId = crypto.randomUUID();
+      draftCreatedAt = new Date().toISOString();
+
+      // For live content edits, capture a snapshot of the original saved data
+      if (!s.isNewDraft) {
+        snapshot = stableStringify({
+          formData: JSON.parse(s.lastSavedFormData),
+          body: s.lastSavedBody,
+        });
+      }
+
+      _setDraftState({ draftId, draftCreatedAt, snapshot });
+    }
+
+    const draft: Draft = {
+      id: draftId,
+      collection: s.currentCollection,
+      filename: s.filename || null,
+      isNew: s.isNewDraft,
+      formData: $state.snapshot(s.formData) as Record<string, unknown>,
+      body: s.body,
+      snapshot,
+      createdAt: draftCreatedAt!,
+    };
+
+    await persistDraft(draft);
+    _setDraftState({
+      lastSavedBody: s.body,
+      lastSavedFormData: JSON.stringify(s.formData),
+      dirty: false,
+    });
+  } finally {
+    _setDraftState({ saving: false });
+  }
+}
+
+/**
+ * Legacy alias for saveDraftToIDB — preserves existing test mock call sites.
+ * @return {Promise<void>}
+ */
+export async function saveFile(): Promise<void> {
+  return saveDraftToIDB();
+}
+
+/**
+ * Serializes editor content based on the target file format. Data files produce pure JSON/YAML/TOML; frontmatter files produce the standard `---` delimited format.
+ * @param {string} filename - The target filename, used to determine format
+ * @param {Record<string, unknown>} formData - The structured data to serialize
+ * @param {string} body - The body content (only used for frontmatter files)
+ * @return {Promise<string>} The serialized file content
+ */
+async function serializeContent(
+  filename: string,
+  formData: Record<string, unknown>,
+  body: string,
+): Promise<string> {
+  const category = getFileCategory(filename);
+
+  // Lazy-load js-yaml once for both data and frontmatter YAML paths
+  const loadYAML = () => import('js-yaml');
+
+  if (category === 'data') {
+    const format = getDataFormat(filename);
+    switch (format) {
+      case 'json':
+        return JSON.stringify(formData, null, 2) + '\n';
+      case 'yaml': {
+        const { dump } = await loadYAML();
+        return dump(formData, { lineWidth: -1 });
+      }
+      case 'toml': {
+        const { stringify } = await import('smol-toml');
+        return stringify(formData);
+      }
+      default:
+        throw new Error(`Unsupported data format: ${format}`);
+    }
+  }
+
+  // Frontmatter files: ---\nyaml\n---\n\nbody\n
+  const { dump } = await loadYAML();
+  // dump() adds a trailing newline, so the template omits a \n before ---
+  const yaml = dump(formData, { lineWidth: -1 });
+  return `---\n${yaml}---\n\n${body}\n`;
+}
+
+/**
+ * Writes editor content to the storage backend via StorageClient. Dispatches serialization by file format. If originalFilename is provided and differs from filename, deletes the old file (file type conversion). Deletes the associated draft from IndexedDB after a successful write.
+ * @param {string} collection - The collection the file belongs to
+ * @param {string} filename - The filename to write within the collection
+ * @param {string} [originalFilename] - The previous filename if the file was renamed/converted
+ * @return {Promise<void>}
+ */
+export async function publishFile(
+  collection: string,
+  filename: string,
+  originalFilename?: string,
+): Promise<void> {
+  const s = _getDraftState();
+  _setDraftState({ saving: true });
+
+  try {
+    const content = await serializeContent(filename, s.formData, s.body);
+    await storageClient.writeFile(collection, filename, content);
+
+    // Remove the old file if the filename changed (file type conversion)
+    if (originalFilename && originalFilename !== filename) {
+      await storageClient.deleteFile(collection, originalFilename);
+    }
+
+    // Clean up the draft from IndexedDB after successful publish
+    if (s.draftId) {
+      await removeDraft(s.draftId);
+      _setDraftState({
+        draftId: null,
+        isNewDraft: false,
+        snapshot: null,
+        draftCreatedAt: null,
+      });
+    }
+
+    /*
+     * Update originalFilename so subsequent publishes know the current on-disk name.
+     * Without this, a second format change would not detect the rename because
+     * originalFilename would still point to the pre-first-publish name.
+     */
+    _setDraftState({
+      lastSavedBody: s.body,
+      lastSavedFormData: JSON.stringify(s.formData),
+      dirty: false,
+      originalFilename: filename,
+    });
+  } finally {
+    _setDraftState({ saving: false });
+  }
+}
+
+/**
+ * Deletes the current draft from IndexedDB and resets draft-related state fields.
+ * @return {Promise<void>}
+ */
+export async function deleteCurrentDraft(): Promise<void> {
+  const { draftId } = _getDraftState();
+  if (draftId) {
+    await removeDraft(draftId);
+  }
+  _setDraftState({
+    draftId: null,
+    isNewDraft: false,
+    snapshot: null,
+    draftCreatedAt: null,
+  });
+}

package/src/client/js/drafts/storage.ts

@@ -0,0 +1,108 @@
+/*
+ * Draft persistence layer backed by IndexedDB.
+ * CRUD operations for draft content entries, used by the editor and merge logic.
+ */
+
+import { openDB } from '../storage/db';
+
+/**
+ * A draft content entry persisted in IndexedDB.
+ */
+export type Draft = {
+  // UUID primary key
+  id: string;
+  // Collection this draft belongs to
+  collection: string;
+  // Filename (null if not yet named)
+  filename: string | null;
+  // true = brand new content, false = draft of existing live file
+  isNew: boolean;
+  // Parsed frontmatter data
+  formData: Record<string, unknown>;
+  // Markdown body content
+  body: string;
+  // Stable-stringified snapshot of original live {formData, body} at draft creation — null for new content
+  snapshot: string | null;
+  // ISO date string of when the draft was first created
+  createdAt: string;
+};
+
+// Object store name for drafts
+const STORE = 'drafts';
+
+/**
+ * Saves or updates a draft in IndexedDB.
+ * @param {Draft} draft - The draft record to persist
+ * @return {Promise<void>}
+ */
+export async function saveDraft(draft: Draft): Promise<void> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readwrite');
+    tx.objectStore(STORE).put(draft);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/**
+ * Loads all drafts for a given collection.
+ * @param {string} collection - The collection name to filter by
+ * @return {Promise<Draft[]>} All drafts belonging to the collection
+ */
+export async function loadDrafts(collection: string): Promise<Draft[]> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readonly');
+    const request = tx.objectStore(STORE).getAll();
+    request.onsuccess = () => {
+      const all = request.result as Draft[];
+      resolve(all.filter((d) => d.collection === collection));
+    };
+    request.onerror = () => reject(request.error);
+  });
+}
+
+/**
+ * Loads a single draft by ID.
+ * @param {string} id - The draft UUID
+ * @return {Promise<Draft | null>} The draft, or null if not found
+ */
+export async function loadDraft(id: string): Promise<Draft | null> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readonly');
+    const request = tx.objectStore(STORE).get(id);
+    request.onsuccess = () => resolve(request.result ?? null);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+/**
+ * Deletes a draft from IndexedDB by ID.
+ * @param {string} id - The draft UUID to delete
+ * @return {Promise<void>}
+ */
+export async function deleteDraft(id: string): Promise<void> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readwrite');
+    tx.objectStore(STORE).delete(id);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/**
+ * Finds a draft linked to a specific live file.
+ * @param {string} collection - The collection name
+ * @param {string} filename - The live file's filename
+ * @return {Promise<Draft | null>} The matching draft, or null if none exists
+ */
+export async function getDraftByFile(
+  collection: string,
+  filename: string,
+): Promise<Draft | null> {
+  const drafts = await loadDrafts(collection);
+  return drafts.find((d) => !d.isNew && d.filename === filename) ?? null;
+}

package/src/client/js/drafts/workers/diff.ts

@@ -0,0 +1,40 @@
+import { stableStringify } from '../../utils/stable-stringify';
+
+/**
+ * Input entry for comparing a draft snapshot against live content.
+ */
+type DiffEntry = {
+  // Draft UUID
+  draftId: string;
+  // The draft's stored snapshot string (from stableStringify at draft creation)
+  snapshot: string;
+  // Current live frontmatter data
+  liveFormData: Record<string, unknown>;
+  // Current live body content
+  liveBody: string;
+};
+
+/*
+ * Listens for diff requests, compares each draft's snapshot against current
+ * live content, and returns a map of draftId to isOutdated.
+ */
+self.addEventListener('message', (event: MessageEvent) => {
+  const { type, entries } = event.data as {
+    type: string;
+    entries: DiffEntry[];
+  };
+  if (type !== 'diff') return;
+
+  const results: Record<string, boolean> = {};
+
+  for (const entry of entries) {
+    // Reconstruct the comparable string using the same format as snapshot creation
+    const liveString = stableStringify({
+      formData: entry.liveFormData,
+      body: entry.liveBody,
+    });
+    results[entry.draftId] = liveString !== entry.snapshot;
+  }
+
+  self.postMessage({ type: 'diff-result', results });
+});