@rimelight/cms 0.0.1

package/src/client/components/editors/TabItemEditor.tsx

@@ -0,0 +1,113 @@
+import { onMount, onCleanup, For, type Component } from "solid-js"
+import type { BaseBlock } from "../../../core/types/blocks"
+import { initBlockSortable, cleanAllSortableClasses } from "../../utils/sortable"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface TabItemEditorProps {
+  blockId?: string
+  props: Record<string, any>
+  children?: BaseBlock[] | (() => BaseBlock[])
+  sectionDepth?: number
+  onPropsChange: (newProps: Record<string, any>) => void
+  onRelocate?: ((id: string, newIndex: number, targetParentId?: string | null) => void) | undefined
+  onOpenPicker?: () => void
+  renderChildBlock?: (block: BaseBlock, depth: number) => any
+}
+
+export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) => {
+  let childrenContainer: HTMLDivElement | undefined = undefined
+  let sortableInstance: any = null
+
+  const childrenBlocks = (): BaseBlock[] => {
+    if (typeof componentProps.children === "function") {
+      return componentProps.children() || []
+    }
+    return componentProps.children || componentProps.props.children || []
+  }
+
+  onMount(() => {
+    if (childrenContainer) {
+      sortableInstance = initBlockSortable(childrenContainer, {
+        filter: ".cms-empty-placeholder, .locked",
+        onReorder: (oldIdx: number, newIdx: number) => {
+          cleanAllSortableClasses()
+          const list = [...childrenBlocks()]
+          const item = list.splice(oldIdx, 1)[0]
+          if (item) {
+            list.splice(newIdx, 0, item)
+            componentProps.onPropsChange({ ...componentProps.props, children: list })
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onAdd: (blockId: string, newIdx: number) => {
+          cleanAllSortableClasses()
+          if (componentProps.onRelocate && componentProps.blockId) {
+            componentProps.onRelocate(blockId, newIdx, componentProps.blockId)
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onRemove: (_blockId: string, _oldIdx: number) => {
+          cleanAllSortableClasses()
+        }
+      })
+    }
+
+    onCleanup(() => {
+      if (sortableInstance) sortableInstance.destroy()
+    })
+  })
+
+  const saveLabel = (label: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      label,
+      value: componentProps.props.value || label.toLowerCase().replace(/\s+/g, "-")
+    })
+  }
+
+  return (
+    <div class="rimelight-tab-item-editor flex flex-col gap-2 p-3 rounded-lg border border-default bg-muted/10 w-full">
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold text-muted-foreground uppercase">Tab Label:</span>
+        <div class="flex-1 max-w-xs">
+          <RLSInput
+            type="text"
+            placeholder="e.g. pnpm, Astro, TypeScript"
+            value={componentProps.props.label || ""}
+            onBlur={(e) => saveLabel(e.currentTarget.value)}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div
+        ref={(el) => (childrenContainer = el)}
+        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px] bg-background"
+      >
+        {childrenBlocks().length === 0 ? (
+          <div class="text-center py-2">
+            <span class="text-xs text-muted-foreground block">Empty tab content</span>
+            <RLSButton
+              variant="link"
+              color="primary"
+              size="xs"
+              onClick={() => componentProps.onOpenPicker?.()}
+              label="+ Add block"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock) =>
+              componentProps.renderChildBlock?.(childBlock, componentProps.sectionDepth || 0)
+            }
+          </For>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/components/editors/TableEditor.tsx

@@ -0,0 +1,181 @@
+import { For, type Component } from "solid-js"
+import type { TableColumnDef } from "../../../core/types/blocks"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface TableEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+export const TableEditor: Component<TableEditorProps> = (componentProps) => {
+  const columns = (): TableColumnDef[] =>
+    componentProps.props.columns || [
+      { key: "col1", header: "Header 1", align: "left" },
+      { key: "col2", header: "Header 2", align: "left" }
+    ]
+
+  const rows = (): Record<string, string>[] =>
+    componentProps.props.rows || [{ col1: "Cell 1", col2: "Cell 2" }]
+
+  const save = (newCols: TableColumnDef[], newRows: Record<string, string>[], caption?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      columns: newCols,
+      rows: newRows,
+      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+    })
+  }
+
+  const addColumn = () => {
+    const nextIdx = columns().length + 1
+    const key = `col${nextIdx}`
+    const newCols = [...columns(), { key, header: `Header ${nextIdx}`, align: "left" as const }]
+    const newRows = rows().map((r) => ({ ...r, [key]: "" }))
+    save(newCols, newRows)
+  }
+
+  const removeColumn = (colIdx: number) => {
+    if (columns().length <= 1) return
+    const targetKey = columns()[colIdx]!.key
+    const newCols = columns().filter((_, i) => i !== colIdx)
+    const newRows = rows().map((r) => {
+      const next = { ...r }
+      delete next[targetKey]
+      return next
+    })
+    save(newCols, newRows)
+  }
+
+  const addRow = () => {
+    const newRow: Record<string, string> = {}
+    for (const col of columns()) {
+      newRow[col.key] = ""
+    }
+    save(columns(), [...rows(), newRow])
+  }
+
+  const removeRow = (rowIdx: number) => {
+    if (rows().length <= 1) return
+    save(
+      columns(),
+      rows().filter((_, i) => i !== rowIdx)
+    )
+  }
+
+  const updateHeader = (colIdx: number, val: string) => {
+    const newCols = [...columns()]
+    newCols[colIdx] = { ...newCols[colIdx]!, header: val }
+    save(newCols, rows())
+  }
+
+  const updateCell = (rowIdx: number, colKey: string, val: string) => {
+    const newRows = [...rows()]
+    newRows[rowIdx] = { ...newRows[rowIdx], [colKey]: val }
+    save(columns(), newRows)
+  }
+
+  return (
+    <div class="rimelight-table-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full overflow-x-auto">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">Table</span>
+        <div class="flex items-center gap-2">
+          <RLSButton
+            variant="outline"
+            color="neutral"
+            size="xs"
+            onClick={addColumn}
+            leadingIcon="plus"
+            label="Add Column"
+          />
+          <RLSButton
+            variant="outline"
+            color="neutral"
+            size="xs"
+            onClick={addRow}
+            leadingIcon="plus"
+            label="Add Row"
+          />
+        </div>
+      </div>
+
+      <div class="overflow-x-auto border border-default rounded-lg">
+        <table class="w-full text-xs border-collapse">
+          <thead>
+            <tr class="bg-muted/30 border-b border-default">
+              <For each={columns()}>
+                {(col, colIdx) => (
+                  <th class="p-1 min-w-[120px] font-medium text-left">
+                    <div class="flex items-center gap-1">
+                      <input
+                        type="text"
+                        aria-label={`Column ${colIdx() + 1} header`}
+                        class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 font-semibold outline-none text-foreground"
+                        value={col.header}
+                        onBlur={(e) => updateHeader(colIdx(), e.currentTarget.value)}
+                      />
+                      {columns().length > 1 && (
+                        <button
+                          type="button"
+                          aria-label="Delete column"
+                          class="text-muted-foreground hover:text-danger p-1 text-xs"
+                          onClick={() => removeColumn(colIdx())}
+                          title="Delete column"
+                        >
+                          ✕
+                        </button>
+                      )}
+                    </div>
+                  </th>
+                )}
+              </For>
+              <th class="w-8 p-1" aria-label="Row actions"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={rows()}>
+              {(row, rowIdx) => (
+                <tr class="border-b border-default/50 hover:bg-muted/20">
+                  <For each={columns()}>
+                    {(col) => (
+                      <td class="p-1">
+                        <input
+                          type="text"
+                          aria-label={`${col.header} row ${rowIdx() + 1}`}
+                          class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 outline-none text-foreground"
+                          value={row[col.key] || ""}
+                          onBlur={(e) => updateCell(rowIdx(), col.key, e.currentTarget.value)}
+                        />
+                      </td>
+                    )}
+                  </For>
+                  <td class="p-1 text-center">
+                    {rows().length > 1 && (
+                      <button
+                        type="button"
+                        aria-label="Delete row"
+                        class="text-muted-foreground hover:text-danger p-1 text-xs"
+                        onClick={() => removeRow(rowIdx())}
+                        title="Delete row"
+                      >
+                        ✕
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+
+      <RLSInput
+        type="text"
+        placeholder="Table caption (optional)"
+        value={componentProps.props.caption || ""}
+        onBlur={(e) => save(columns(), rows(), e.currentTarget.value)}
+        size="sm"
+      />
+    </div>
+  )
+}

package/src/client/components/editors/TabsEditor.tsx

@@ -0,0 +1,105 @@
+import { onMount, onCleanup, For, type Component } from "solid-js"
+import type { BaseBlock } from "../../../core/types/blocks"
+import { initBlockSortable, cleanAllSortableClasses } from "../../utils/sortable"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface TabsEditorProps {
+  blockId?: string
+  props: Record<string, any>
+  children?: BaseBlock[] | (() => BaseBlock[])
+  sectionDepth?: number
+  onPropsChange: (newProps: Record<string, any>) => void
+  onRelocate?: ((id: string, newIndex: number, targetParentId?: string | null) => void) | undefined
+  onOpenPicker?: () => void
+  renderChildBlock?: (block: BaseBlock, depth: number) => any
+}
+
+export const TabsEditor: Component<TabsEditorProps> = (componentProps) => {
+  let childrenContainer: HTMLDivElement | undefined = undefined
+  let sortableInstance: any = null
+
+  const childrenBlocks = (): BaseBlock[] => {
+    if (typeof componentProps.children === "function") {
+      return componentProps.children() || []
+    }
+    return componentProps.children || componentProps.props.children || []
+  }
+
+  onMount(() => {
+    if (childrenContainer) {
+      sortableInstance = initBlockSortable(childrenContainer, {
+        filter: ".cms-empty-placeholder, .locked",
+        onReorder: (oldIdx: number, newIdx: number) => {
+          cleanAllSortableClasses()
+          const list = [...childrenBlocks()]
+          const item = list.splice(oldIdx, 1)[0]
+          if (item) {
+            list.splice(newIdx, 0, item)
+            componentProps.onPropsChange({ ...componentProps.props, children: list })
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onAdd: (blockId: string, newIdx: number) => {
+          cleanAllSortableClasses()
+          if (componentProps.onRelocate && componentProps.blockId) {
+            componentProps.onRelocate(blockId, newIdx, componentProps.blockId)
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onRemove: (_blockId: string, _oldIdx: number) => {
+          cleanAllSortableClasses()
+        }
+      })
+    }
+
+    onCleanup(() => {
+      if (sortableInstance) sortableInstance.destroy()
+    })
+  })
+
+  return (
+    <div class="rimelight-tabs-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          Tabs Container
+        </span>
+        <RLSButton
+          variant="outline"
+          color="neutral"
+          size="xs"
+          onClick={() => componentProps.onOpenPicker?.()}
+          leadingIcon="plus"
+          label="Add Tab Item"
+        />
+      </div>
+
+      <div
+        ref={(el) => (childrenContainer = el)}
+        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px]"
+      >
+        {childrenBlocks().length === 0 ? (
+          <div class="text-center py-3">
+            <span class="text-xs text-muted-foreground block mb-2">No tabs in container</span>
+            <RLSButton
+              variant="link"
+              color="primary"
+              size="xs"
+              onClick={() => componentProps.onOpenPicker?.()}
+              label="+ Add Tab Item"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock) =>
+              componentProps.renderChildBlock?.(childBlock, componentProps.sectionDepth || 0)
+            }
+          </For>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./RimelightBlock"
+export * from "./RimelightBlockPicker"
+export * from "./RimelightEditor"
+export * from "./RimelightEditorLayout"
+export * from "./RimelightPreview"
+export * from "./RimelightPropertiesPanel"
+export * from "./RimelightTemplateEditor"

package/src/client/loader.ts

@@ -0,0 +1,19 @@
+import "./styles/cms-editor.css"
+
+// SolidJS components
+export { RimelightEditorLayout } from "./components/RimelightEditorLayout"
+export { RimelightEditor } from "./components/RimelightEditor"
+export { RimelightBlock } from "./components/RimelightBlock"
+export { RimelightPreview } from "./components/RimelightPreview"
+export { RimelightPropertiesPanel } from "./components/RimelightPropertiesPanel"
+export { RimelightBlockPicker } from "./components/RimelightBlockPicker"
+export { RimelightTemplateEditor } from "./components/RimelightTemplateEditor"
+
+export { ParagraphEditor } from "./components/editors/ParagraphEditor"
+export { CalloutEditor } from "./components/editors/CalloutEditor"
+export { CodeEditor } from "./components/editors/CodeEditor"
+export { DialogueEditor } from "./components/editors/DialogueEditor"
+export { ImageEditor } from "./components/editors/ImageEditor"
+export { SceneEditor } from "./components/editors/SceneEditor"
+export { ScriptEditor } from "./components/editors/ScriptEditor"
+export { SectionEditor } from "./components/editors/SectionEditor"

package/src/client/state/autosave.ts

@@ -0,0 +1,122 @@
+export type AutosaveStatus = "saved" | "unsaved" | "saving" | "error"
+
+export interface AutosaveOptions {
+  pageId: string
+  saveEndpoint?: string
+  debounceMs?: number
+  onStatusChange?: ((status: AutosaveStatus, errorMsg?: string) => void) | undefined
+}
+
+export class AutosaveController {
+  private pageId: string
+  private saveEndpoint: string
+  private debounceMs: number
+  private timer: number | null = null
+  private status: AutosaveStatus = "saved"
+  private lastContent: any = null
+  private onStatusChange?: ((status: AutosaveStatus, errorMsg?: string) => void) | undefined
+
+  constructor(options: AutosaveOptions) {
+    this.pageId = options.pageId
+    this.saveEndpoint = options.saveEndpoint || `/api/cms/pages/${this.pageId}/draft`
+    this.debounceMs = options.debounceMs || 500
+    this.onStatusChange = options.onStatusChange
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("beforeunload", () => this.flushSync())
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") {
+          this.flushSync()
+        }
+      })
+    }
+  }
+
+  getPageId(): string {
+    return this.pageId
+  }
+
+  notifyChange(content: any): void {
+    this.lastContent = content
+    this.saveToLocalStorage(content)
+    this.setStatus("unsaved")
+
+    if (this.timer !== null) {
+      clearTimeout(this.timer)
+    }
+
+    this.timer = window.setTimeout(() => {
+      void this.save(content)
+    }, this.debounceMs)
+  }
+
+  async saveImmediate(content: any): Promise<boolean> {
+    this.lastContent = content
+    this.saveToLocalStorage(content)
+    if (this.timer !== null) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    return this.save(content)
+  }
+
+  async save(content: any): Promise<boolean> {
+    this.setStatus("saving")
+    try {
+      const res = await fetch(this.saveEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content })
+      })
+
+      if (res.ok) {
+        this.setStatus("saved")
+        return true
+      } else {
+        const data = await res.json().catch(() => ({}))
+        this.setStatus("error", data.message || "Failed to save draft")
+        return false
+      }
+    } catch (err: any) {
+      this.setStatus("error", err?.message || "Network error")
+      return false
+    }
+  }
+
+  private saveToLocalStorage(content: any): void {
+    if (typeof localStorage === "undefined" || !this.pageId) return
+    try {
+      localStorage.setItem(`cms_draft_backup_${this.pageId}`, JSON.stringify(content))
+    } catch (e) {
+      console.warn("Failed to write draft backup to localStorage", e)
+    }
+  }
+
+  private flushSync(): void {
+    if (this.status === "unsaved" && this.lastContent) {
+      if (this.timer !== null) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      try {
+        void fetch(this.saveEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content: this.lastContent }),
+          keepalive: true
+        })
+      } catch {}
+    }
+  }
+
+  getStatus(): AutosaveStatus {
+    return this.status
+  }
+
+  private setStatus(status: AutosaveStatus, errorMsg?: string) {
+    this.status = status
+    if (this.onStatusChange) {
+      this.onStatusChange(status, errorMsg)
+    }
+  }
+}