@rimelight/cms 0.0.1

package/src/client/state/lock-manager.ts

@@ -0,0 +1,89 @@
+export interface LockState {
+  isLocked: boolean
+  lockedByUserId?: string
+  lockedByUserName?: string
+  expiresAt?: string
+}
+
+export class LockManager {
+  private pageId: string
+  private heartbeatInterval: ReturnType<typeof setInterval> | null = null
+  private heartbeatMs: number
+
+  constructor(pageId: string, heartbeatMs = 30000) {
+    this.pageId = pageId
+    this.heartbeatMs = heartbeatMs
+  }
+
+  async acquireCheckout(
+    userId: string,
+    userName: string
+  ): Promise<{ success: boolean; lockState: LockState }> {
+    try {
+      const res = await fetch(`/api/cms/pages/${this.pageId}/lock/checkout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId, userName })
+      })
+
+      const data = await res.json()
+      if (res.ok && data.success) {
+        this.startHeartbeat(userId)
+        return {
+          success: true,
+          lockState: { isLocked: false }
+        }
+      } else {
+        return {
+          success: false,
+          lockState: {
+            isLocked: true,
+            lockedByUserId: data.lockedByUserId,
+            lockedByUserName: data.lockedByUserName,
+            expiresAt: data.expiresAt
+          }
+        }
+      }
+    } catch {
+      return {
+        success: false,
+        lockState: { isLocked: true, lockedByUserName: "Unknown (Network Error)" }
+      }
+    }
+  }
+
+  private startHeartbeat(userId: string): void {
+    this.stopHeartbeat()
+    this.heartbeatInterval = setInterval(async () => {
+      try {
+        await fetch(`/api/cms/pages/${this.pageId}/lock/heartbeat`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ userId })
+        })
+      } catch {
+        // Silently retry on next heartbeat interval
+      }
+    }, this.heartbeatMs)
+  }
+
+  stopHeartbeat(): void {
+    if (this.heartbeatInterval !== null) {
+      clearInterval(this.heartbeatInterval)
+      this.heartbeatInterval = null
+    }
+  }
+
+  async releaseCheckout(userId: string): Promise<void> {
+    this.stopHeartbeat()
+    try {
+      await fetch(`/api/cms/pages/${this.pageId}/lock/release`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId })
+      })
+    } catch {
+      // Ignore cleanup error
+    }
+  }
+}

package/src/client/styles/cms-editor.css

@@ -0,0 +1,653 @@
+/* Custom Elements display & sizing defaults */
+rimelight-block,
+rimelight-paragraph-editor,
+rimelight-section-editor,
+rimelight-callout-editor,
+rimelight-image-editor,
+rimelight-code-editor,
+rimelight-script-editor,
+rimelight-scene-editor,
+rimelight-dialogue-editor {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+rimelight-properties-panel {
+  display: block;
+  width: 18rem;
+  flex-shrink: 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+:host,
+rimelight-editor-layout,
+.rimelight-cms-editor-container {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+  box-sizing: border-box;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  background-color: transparent;
+  color: inherit;
+}
+
+.cms-split-layout {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+  overflow: hidden;
+  position: relative;
+  background-color: transparent;
+}
+
+/* Astro's client:only wraps the component in <astro-island> which defaults to display:inline.
+   Scope to .cms-editor-main so only the editor island is affected, not the properties panel. */
+.cms-editor-main > astro-island {
+  display: flex;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+}
+
+rimelight-editor,
+.cms-editor-pane {
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  border-right: 1px solid var(--rl-border, rgba(128, 128, 128, 0.2));
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+rimelight-preview,
+.cms-preview-pane {
+  display: flex;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  background-color: transparent;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+/* Canvas & scroll containers */
+#cms-canvas-scroll,
+.cms-block-canvas {
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-sizing: border-box;
+  background-color: transparent;
+}
+
+#cms-canvas {
+  width: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-sizing: border-box;
+}
+
+#cms-footer {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cms-block-node {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  padding: 0.5rem 0;
+  position: relative;
+}
+
+/* Ensure inputs in block content span 100% width and shrink-safe */
+.cms-block-content input[type="text"],
+.cms-block-content textarea,
+.cms-block-content select {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.cms-resize-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  cursor: col-resize;
+  background-color: transparent;
+  border-left: 1px solid rgba(75, 85, 99, 0.3);
+  border-right: 1px solid rgba(75, 85, 99, 0.3);
+  transition: background-color 0.15s ease;
+  z-index: 20;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.cms-resize-handle:hover,
+.cms-resize-handle.active {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+
+.cms-resize-pill {
+  width: 4px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: #4b5563;
+  transition: background-color 0.15s ease;
+}
+
+.cms-resize-handle:hover .cms-resize-pill,
+.cms-resize-handle.active .cms-resize-pill {
+  background-color: #3b82f6;
+}
+
+/* Editor Header & Status Bar */
+.cms-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: #1f2937;
+  border-bottom: 1px solid #374151;
+}
+
+.cms-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.cms-status-saved {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+}
+.cms-status-unsaved {
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
+}
+.cms-status-saving {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: #60a5fa;
+}
+.cms-status-error {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+/* Perforce Checkout Lock Banner */
+.cms-lock-banner {
+  background-color: #7c2d12;
+  color: #ffedd5;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #9a3412;
+}
+
+/* Block Item Canvas */
+.cms-block-canvas {
+  flex: 1 1 auto;
+  width: 100%;
+  padding: 1.5rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-sizing: border-box;
+}
+
+#cms-canvas {
+  width: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-sizing: border-box;
+}
+
+#cms-footer {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cms-contenteditable {
+  outline: none;
+  min-height: 1.5rem;
+}
+
+.cms-contenteditable:focus {
+  background-color: rgba(255, 255, 255, 0.03);
+  border-radius: 0.25rem;
+}
+
+/* ─── Block hover grip & context menu ──────────────────────────────────────── */
+
+.cms-block-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.cms-block-grip {
+  position: absolute;
+  left: -1.75rem;
+  top: 0.25rem;
+  z-index: 30;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.cms-block-wrap:hover .cms-block-grip,
+.cms-block-wrap:focus-within .cms-block-grip {
+  opacity: 1;
+}
+
+.cms-grip-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  cursor: grab;
+  color: var(--rl-text-muted, #9ca3af);
+  background: transparent;
+  border: none;
+  font-size: 1rem;
+  user-select: none;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.cms-grip-btn:hover {
+  background-color: var(--rl-bg-hover, rgba(128, 128, 128, 0.1));
+  color: var(--rl-text-highlighted, #f3f4f6);
+}
+
+.cms-grip-btn:active {
+  cursor: grabbing;
+}
+
+/* ─── SortableJS Ghost Drop Indicator ─────────────────────────────────────── */
+
+.cms-sortable-ghost {
+  opacity: 0.85 !important;
+  background-color: rgba(59, 130, 246, 0.12) !important;
+  border: 2px dashed #3b82f6 !important;
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3) !important;
+  border-radius: 0.5rem !important;
+  min-height: 48px !important;
+  position: relative !important;
+}
+
+.cms-sortable-ghost * {
+  opacity: 0.5 !important;
+}
+
+.cms-sortable-chosen {
+  background-color: #1f2937 !important;
+  opacity: 0.9 !important;
+}
+
+.cms-sortable-drag {
+  opacity: 0.95 !important;
+  transform: scale(1.02);
+  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.7) !important;
+  cursor: grabbing !important;
+  z-index: 9999 !important;
+  background-color: #111827 !important;
+  border: 1px solid #3b82f6 !important;
+  border-radius: 0.5rem !important;
+}
+
+.cms-block-menu {
+  position: absolute;
+  left: 0;
+  top: 2rem;
+  z-index: 50;
+  width: 12rem;
+  background-color: #111827;
+  border: 1px solid #374151;
+  border-radius: 0.75rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.5),
+    0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  padding: 0.25rem;
+}
+
+.cms-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  color: #d1d5db;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.cms-menu-item:hover {
+  background-color: #1f2937;
+}
+
+.cms-menu-item.danger {
+  color: #f87171;
+}
+
+.cms-menu-item.danger:hover {
+  background-color: #450a0a;
+}
+
+.cms-menu-separator {
+  height: 1px;
+  background-color: #1f2937;
+  margin: 0.25rem 0;
+}
+
+/* ─── Block content padding for grip handle ─────────────────────────────────── */
+
+.cms-block-canvas .cms-block-node {
+  padding-left: 2.5rem;
+  position: relative;
+}
+
+/* ─── Block picker modal ────────────────────────────────────────────────────── */
+
+.cms-block-picker-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+.cms-block-picker-panel {
+  background-color: #111827;
+  border: 1px solid #374151;
+  border-radius: 1rem;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 80vh;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cms-block-picker-search {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #1f2937;
+}
+
+.cms-block-picker-search input {
+  width: 100%;
+  background-color: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #f3f4f6;
+  outline: none;
+}
+
+.cms-block-picker-search input:focus {
+  border-color: #3b82f6;
+}
+
+.cms-block-picker-list {
+  overflow-y: auto;
+  flex: 1;
+  padding-bottom: 0.5rem;
+}
+
+.cms-block-picker-category {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #6b7280;
+  padding: 0.75rem 1rem 0.25rem;
+}
+
+.cms-block-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.cms-block-picker-item:hover,
+.cms-block-picker-item.active {
+  background-color: #1f2937;
+}
+
+.cms-block-picker-item-icon {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+/* ─── Properties panel ──────────────────────────────────────────────────────── */
+
+.cms-properties-panel {
+  min-width: 280px;
+  max-width: 320px;
+}
+
+.cms-prop-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0;
+  background: transparent;
+  border: none;
+  color: #9ca3af;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  border-bottom: 1px solid #1f2937;
+}
+
+.cms-prop-group-header:hover {
+  color: #d1d5db;
+}
+
+/* ─── Inline editors ──────────────────────────────────────────────────────────*/
+
+.cms-inline-input {
+  width: 100%;
+  background-color: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  color: #f3f4f6;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.cms-inline-input:focus {
+  border-color: #3b82f6;
+}
+
+.cms-inline-label {
+  display: block;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #6b7280;
+  margin-bottom: 0.25rem;
+}
+
+/* ─── Editor layout with properties panel ────────────────────────────────────*/
+
+.cms-editor-with-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.cms-editor-main {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Paragraph editor toolbar ───────────────────────────────────────────────*/
+
+.cms-para-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #1f2937;
+  border: 1px solid #374151;
+  border-bottom: none;
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+
+.cms-para-toolbar-btn {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.1s ease,
+    color 0.1s ease;
+}
+
+.cms-para-toolbar-btn:hover {
+  background-color: #374151;
+  color: #f3f4f6;
+}
+
+/* ─── Empty state ────────────────────────────────────────────────────────────*/
+
+.cms-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 300px;
+  padding: 4rem 1rem;
+  text-align: center;
+  color: #6b7280;
+  box-sizing: border-box;
+}
+
+.cms-empty-state h4 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #9ca3af;
+  margin: 0.5rem 0 0.25rem;
+}
+
+.cms-empty-state p {
+  font-size: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.cms-add-first-block {
+  padding: 0.5rem 1rem;
+  background-color: #2563eb;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.cms-add-first-block:hover {
+  background-color: #1d4ed8;
+}
+
+.cms-add-block-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.cms-add-block-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px dashed #374151;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: #6b7280;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.cms-add-block-btn:hover {
+  border-color: #3b82f6;
+  color: #60a5fa;
+}