@nuasite/cms 0.1.0

package/src/editor/storage.ts

@@ -0,0 +1,266 @@
+import { STORAGE_KEYS } from './constants'
+import type {
+	CmsSettings,
+	PendingAttributeChange,
+	PendingChange,
+	PendingColorChange,
+	PendingImageChange,
+	SavedAttributeEdits,
+	SavedColorEdits,
+	SavedEdits,
+	SavedImageEdits,
+} from './types'
+
+// ============================================================================
+// Text Edits
+// ============================================================================
+
+export function saveEditsToStorage(pendingChanges: Map<string, PendingChange>): void {
+	const edits: SavedEdits = {}
+
+	pendingChanges.forEach((change, cmsId) => {
+		if (change.isDirty) {
+			edits[cmsId] = {
+				originalText: change.originalText,
+				newText: change.newText,
+				currentHTML: change.currentHTML,
+				hasStyledContent: change.hasStyledContent,
+			}
+		}
+	})
+
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_EDITS, JSON.stringify(edits))
+	} catch (e) {
+		console.warn('[CMS] Failed to save edits to storage:', e)
+	}
+}
+
+export function loadEditsFromStorage(): SavedEdits {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_EDITS)
+		return stored ? JSON.parse(stored) : {}
+	} catch (e) {
+		console.warn('[CMS] Failed to load edits from storage:', e)
+		return {}
+	}
+}
+
+export function clearEditsFromStorage(): void {
+	try {
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_EDITS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear edits from storage:', e)
+	}
+}
+
+// ============================================================================
+// Image Edits
+// ============================================================================
+
+export function saveImageEditsToStorage(pendingImageChanges: Map<string, PendingImageChange>): void {
+	const edits: SavedImageEdits = {}
+
+	pendingImageChanges.forEach((change, cmsId) => {
+		if (change.isDirty) {
+			edits[cmsId] = {
+				originalSrc: change.originalSrc,
+				newSrc: change.newSrc,
+				originalAlt: change.originalAlt,
+				newAlt: change.newAlt,
+				originalSrcSet: change.originalSrcSet,
+			}
+		}
+	})
+
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_IMAGE_EDITS, JSON.stringify(edits))
+	} catch (e) {
+		console.warn('[CMS] Failed to save image edits to storage:', e)
+	}
+}
+
+export function loadImageEditsFromStorage(): SavedImageEdits {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_IMAGE_EDITS)
+		return stored ? JSON.parse(stored) : {}
+	} catch (e) {
+		console.warn('[CMS] Failed to load image edits from storage:', e)
+		return {}
+	}
+}
+
+export function clearImageEditsFromStorage(): void {
+	try {
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_IMAGE_EDITS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear image edits from storage:', e)
+	}
+}
+
+// ============================================================================
+// Color Edits
+// ============================================================================
+
+export function saveColorEditsToStorage(pendingColorChanges: Map<string, PendingColorChange>): void {
+	const edits: SavedColorEdits = {}
+
+	pendingColorChanges.forEach((change, cmsId) => {
+		if (change.isDirty) {
+			edits[cmsId] = {
+				originalClasses: change.originalClasses,
+				newClasses: change.newClasses,
+			}
+		}
+	})
+
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_COLOR_EDITS, JSON.stringify(edits))
+	} catch (e) {
+		console.warn('[CMS] Failed to save color edits to storage:', e)
+	}
+}
+
+export function loadColorEditsFromStorage(): SavedColorEdits {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_COLOR_EDITS)
+		return stored ? JSON.parse(stored) : {}
+	} catch (e) {
+		console.warn('[CMS] Failed to load color edits from storage:', e)
+		return {}
+	}
+}
+
+export function clearColorEditsFromStorage(): void {
+	try {
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_COLOR_EDITS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear color edits from storage:', e)
+	}
+}
+
+// ============================================================================
+// Attribute Edits
+// ============================================================================
+
+export function saveAttributeEditsToStorage(pendingAttributeChanges: Map<string, PendingAttributeChange>): void {
+	const edits: SavedAttributeEdits = {}
+
+	pendingAttributeChanges.forEach((change, cmsId) => {
+		if (change.isDirty) {
+			edits[cmsId] = {
+				originalAttributes: change.originalAttributes,
+				newAttributes: change.newAttributes,
+			}
+		}
+	})
+
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS, JSON.stringify(edits))
+	} catch (e) {
+		console.warn('[CMS] Failed to save attribute edits to storage:', e)
+	}
+}
+
+export function loadAttributeEditsFromStorage(): SavedAttributeEdits {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS)
+		return stored ? JSON.parse(stored) : {}
+	} catch (e) {
+		console.warn('[CMS] Failed to load attribute edits from storage:', e)
+		return {}
+	}
+}
+
+export function clearAttributeEditsFromStorage(): void {
+	try {
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_ATTRIBUTE_EDITS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear attribute edits from storage:', e)
+	}
+}
+
+// ============================================================================
+// Settings
+// ============================================================================
+
+export function saveSettingsToStorage(settings: CmsSettings): void {
+	try {
+		localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(settings))
+	} catch (e) {
+		console.warn('[CMS] Failed to save settings to storage:', e)
+	}
+}
+
+export function loadSettingsFromStorage(): CmsSettings | null {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEYS.SETTINGS)
+		return stored ? JSON.parse(stored) : null
+	} catch (e) {
+		console.warn('[CMS] Failed to load settings from storage:', e)
+		return null
+	}
+}
+
+export function clearSettingsFromStorage(): void {
+	try {
+		localStorage.removeItem(STORAGE_KEYS.SETTINGS)
+	} catch (e) {
+		console.warn('[CMS] Failed to clear settings from storage:', e)
+	}
+}
+
+// ============================================================================
+// Pending Entry Navigation (for navigating to a collection entry page and auto-opening editor)
+// ============================================================================
+
+export interface PendingEntryNavigation {
+	collectionName: string
+	slug: string
+	sourcePath: string
+	pathname: string
+}
+
+export function savePendingEntryNavigation(entry: PendingEntryNavigation): void {
+	try {
+		sessionStorage.setItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION, JSON.stringify(entry))
+	} catch (e) {
+		console.warn('[CMS] Failed to save pending entry navigation:', e)
+	}
+}
+
+export function hasPendingEntryNavigation(): boolean {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
+		if (!stored) return false
+		const entry: PendingEntryNavigation = JSON.parse(stored)
+		return window.location.pathname === entry.pathname
+	} catch {
+		return false
+	}
+}
+
+export function loadPendingEntryNavigation(): PendingEntryNavigation | null {
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
+		if (!stored) return null
+		const entry: PendingEntryNavigation = JSON.parse(stored)
+		if (window.location.pathname !== entry.pathname) return null
+		sessionStorage.removeItem(STORAGE_KEYS.PENDING_ENTRY_NAVIGATION)
+		return entry
+	} catch (e) {
+		console.warn('[CMS] Failed to load pending entry navigation:', e)
+		return null
+	}
+}
+
+// ============================================================================
+// Clear All
+// ============================================================================
+
+export function clearAllEditsFromStorage(): void {
+	clearEditsFromStorage()
+	clearImageEditsFromStorage()
+	clearColorEditsFromStorage()
+	clearAttributeEditsFromStorage()
+}

package/src/editor/styles.css

@@ -0,0 +1,465 @@
+@import "tailwindcss";
+
+@source "./components/**/*.tsx";
+@source "./index.tsx";
+
+@theme {
+  /* Surface Colors */
+  --color-cms-bg: #E8E8E8;
+  --color-cms-card: #FFFFFF;
+  --color-cms-overlay: rgba(0, 0, 0, 0.3);
+
+  /* Brand Colors - Neutral with lime accent */
+  --color-cms-primary: #DFFF40;
+  --color-cms-primary-hover: #d4f535;
+  --color-cms-primary-text: #1A1A1A;
+  --color-cms-accent: #B8C5F2;
+  --color-cms-accent-hover: #a8b5e2;
+  --color-cms-dark: #1A1A1A;
+  --color-cms-dark-hover: #333333;
+
+  /* Text Colors */
+  --color-cms-text: #1A1A1A;
+  --color-cms-text-muted: #6B6B6B;
+  --color-cms-text-subtle: #9A9A9A;
+
+  /* Semantic Colors */
+  --color-cms-success: #1A1A1A;
+  --color-cms-error: #E53935;
+  --color-cms-warning: #F59E0B;
+
+  /* Border & Radius */
+  --color-cms-border: rgba(0, 0, 0, 0.08);
+  --radius-cms-sm: 8px;
+  --radius-cms-md: 16px;
+  --radius-cms-lg: 24px;
+  --radius-cms-xl: 32px;
+  --radius-cms-pill: 9999px;
+
+  /* Shadows (soft, diffused) */
+  --shadow-cms-sm: 0 1px 3px rgba(0,0,0,0.04);
+  --shadow-cms-md: 0 2px 8px rgba(0,0,0,0.04);
+  --shadow-cms-lg: 0 4px 20px rgba(0,0,0,0.06);
+  --shadow-cms-xl: 0 8px 30px rgba(0,0,0,0.08);
+
+  /* Legacy mappings for backwards compat */
+  --color-blue-bold: var(--color-cms-dark);
+  --shadow-brutalist-sm: var(--shadow-cms-md);
+  --shadow-brutalist-md: var(--shadow-cms-lg);
+}
+
+/* Reset for shadow DOM isolation */
+:host {
+  all: initial;
+}
+
+.cms-root {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.cms-root *,
+.cms-root *::before,
+.cms-root *::after {
+  box-sizing: border-box;
+}
+
+/* Custom animations for CMS */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+/* Markdown styles for AI chat messages */
+.cms-markdown p {
+  margin: 0 0 0.5em 0;
+}
+
+.cms-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.cms-markdown strong {
+  font-weight: 700;
+}
+
+.cms-markdown em {
+  font-style: italic;
+}
+
+.cms-markdown code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+.cms-markdown pre {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0.75em;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.cms-markdown pre code {
+  background: none;
+  padding: 0;
+}
+
+.cms-markdown ul {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+  list-style-type: disc;
+}
+
+.cms-markdown ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+  list-style-type: decimal;
+}
+
+.cms-markdown ul ul {
+  list-style-type: circle;
+}
+
+.cms-markdown ul ul ul {
+  list-style-type: square;
+}
+
+.cms-markdown li {
+  margin: 0.25em 0;
+  display: list-item;
+}
+
+.cms-markdown h1, .cms-markdown h2, .cms-markdown h3,
+.cms-markdown h4, .cms-markdown h5, .cms-markdown h6 {
+  margin: 0.75em 0 0.25em 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.cms-markdown h1 {
+  font-size: 1.4em;
+}
+
+.cms-markdown h2 {
+  font-size: 1.2em;
+}
+
+.cms-markdown h3 {
+  font-size: 1.1em;
+}
+
+.cms-markdown h1:first-child, .cms-markdown h2:first-child, .cms-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.cms-markdown hr {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin: 0.75em 0;
+}
+
+.cms-markdown a {
+  color: #93c5fd;
+  text-decoration: underline;
+}
+
+.cms-markdown a:hover {
+  color: #bfdbfe;
+}
+
+.cms-markdown blockquote {
+  border-left: 3px solid #93c5fd;
+  margin: 0.5em 0;
+  padding-left: 1em;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Soft Design System Card Component */
+.cms-card {
+  background: var(--color-cms-card);
+  border-radius: var(--radius-cms-lg);
+  box-shadow: var(--shadow-cms-lg);
+  border: 1px solid var(--color-cms-border);
+}
+
+/* Button variants */
+.cms-btn {
+  padding: 10px 20px;
+  border-radius: var(--radius-cms-pill);
+  font-weight: 500;
+  transition: all 150ms ease;
+  border: none;
+  cursor: pointer;
+}
+
+.cms-btn-primary {
+  background: var(--color-cms-primary);
+  color: var(--color-cms-primary-text);
+}
+
+.cms-btn-primary:hover {
+  background: var(--color-cms-primary-hover);
+}
+
+.cms-btn-secondary {
+  background: var(--color-cms-secondary);
+  color: white;
+}
+
+.cms-btn-secondary:hover {
+  background: var(--color-cms-secondary-hover);
+}
+
+.slide-in {
+  animation: slideIn 0.2s ease;
+}
+
+/* Milkdown editor styles */
+.milkdown-editor {
+  min-height: 200px;
+}
+
+.milkdown-editor .editor {
+  outline: none;
+}
+
+.milkdown-editor .ProseMirror {
+  outline: none;
+  min-height: 150px;
+}
+
+.milkdown-editor .ProseMirror p {
+  margin: 0 0 1em 0;
+}
+
+.milkdown-editor .ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1em 0;
+  border-radius: 8px;
+}
+
+.milkdown-editor .ProseMirror h1,
+.milkdown-editor .ProseMirror h2,
+.milkdown-editor .ProseMirror h3,
+.milkdown-editor .ProseMirror h4,
+.milkdown-editor .ProseMirror h5,
+.milkdown-editor .ProseMirror h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+.milkdown-editor .ProseMirror ul {
+  padding-left: 1.5em;
+  margin: 1em 0;
+  list-style-type: disc;
+}
+
+.milkdown-editor .ProseMirror ol {
+  padding-left: 1.5em;
+  margin: 1em 0;
+  list-style-type: decimal;
+}
+
+.milkdown-editor .ProseMirror li {
+  display: list-item;
+  margin: 0.25em 0;
+}
+
+.milkdown-editor .ProseMirror ul ul {
+  list-style-type: circle;
+}
+
+.milkdown-editor .ProseMirror ul ul ul {
+  list-style-type: square;
+}
+
+.milkdown-editor .ProseMirror blockquote {
+  border-left: 3px solid #e5e5e5;
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #666;
+}
+
+.milkdown-editor .ProseMirror code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+.milkdown-editor .ProseMirror pre {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1em;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.milkdown-editor .ProseMirror a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+/* Dark mode milkdown editor */
+.milkdown-dark.milkdown-editor {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.milkdown-dark .ProseMirror {
+  color: rgba(255, 255, 255, 0.9);
+  caret-color: var(--color-cms-primary);
+}
+
+.milkdown-dark .ProseMirror p {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.milkdown-dark .ProseMirror h1,
+.milkdown-dark .ProseMirror h2,
+.milkdown-dark .ProseMirror h3,
+.milkdown-dark .ProseMirror h4,
+.milkdown-dark .ProseMirror h5,
+.milkdown-dark .ProseMirror h6 {
+  color: white;
+}
+
+.milkdown-dark .ProseMirror h1 {
+  font-size: 1.75em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 0.3em;
+}
+
+.milkdown-dark .ProseMirror h2 {
+  font-size: 1.5em;
+}
+
+.milkdown-dark .ProseMirror h3 {
+  font-size: 1.25em;
+}
+
+.milkdown-dark .ProseMirror strong {
+  color: white;
+  font-weight: 600;
+}
+
+.milkdown-dark .ProseMirror em {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.milkdown-dark .ProseMirror blockquote {
+  border-left: 3px solid var(--color-cms-primary);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.5em 1em;
+  margin: 1em 0;
+  color: rgba(255, 255, 255, 0.7);
+  border-radius: 0 8px 8px 0;
+}
+
+.milkdown-dark .ProseMirror code {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-cms-primary);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.milkdown-dark .ProseMirror pre {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 1em;
+}
+
+.milkdown-dark .ProseMirror pre code {
+  background: none;
+  color: rgba(255, 255, 255, 0.85);
+  padding: 0;
+}
+
+.milkdown-dark .ProseMirror a {
+  color: var(--color-cms-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.milkdown-dark .ProseMirror a:hover {
+  color: var(--color-cms-primary-hover);
+}
+
+.milkdown-dark .ProseMirror ul {
+  color: rgba(255, 255, 255, 0.85);
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.milkdown-dark .ProseMirror ol {
+  color: rgba(255, 255, 255, 0.85);
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.milkdown-dark .ProseMirror ul ul {
+  list-style-type: circle;
+}
+
+.milkdown-dark .ProseMirror ul ul ul {
+  list-style-type: square;
+}
+
+.milkdown-dark .ProseMirror li {
+  display: list-item;
+  margin: 0.5em 0;
+}
+
+.milkdown-dark .ProseMirror li::marker {
+  color: var(--color-cms-primary);
+}
+
+.milkdown-dark .ProseMirror hr {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 2em 0;
+}
+
+.milkdown-dark .ProseMirror img {
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Selection styling for dark mode */
+.milkdown-dark .ProseMirror ::selection {
+  background: rgba(223, 255, 64, 0.3);
+}
+
+/* Placeholder styling */
+.milkdown-dark .ProseMirror p.is-editor-empty:first-child::before {
+  content: 'Start writing...';
+  color: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}