@rimelight/cms 0.0.1

package/src/client/components/RimelightBlockPicker.tsx

@@ -0,0 +1,305 @@
+import { createSignal, onMount, onCleanup, For, type Component } from "solid-js"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSIcon from "@rimelight/ui/components/icon/RLSIcon.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+const BLOCK_DEFS = [
+  {
+    group: "Text",
+    type: "ParagraphBlock",
+    label: "Paragraph",
+    desc: "Rich text paragraph",
+    icon: "paragraph"
+  },
+  {
+    group: "Text",
+    type: "SectionBlock",
+    label: "Section",
+    desc: "Collapsible section with heading",
+    icon: "heading"
+  },
+  {
+    group: "Media",
+    type: "ImageBlock",
+    label: "Image",
+    desc: "Embed an image with caption",
+    icon: "image"
+  },
+  {
+    group: "Media",
+    type: "CodeBlock",
+    label: "Code",
+    desc: "Code block with syntax highlighting",
+    icon: "code"
+  },
+  {
+    group: "Callout",
+    type: "CalloutBlock",
+    label: "Callout",
+    desc: "Highlighted info/warning/note box",
+    icon: "info"
+  },
+  {
+    group: "Documentation",
+    type: "TableBlock",
+    label: "Table",
+    desc: "Structured data table with columns and rows",
+    icon: "table"
+  },
+  {
+    group: "Documentation",
+    type: "TabsBlock",
+    label: "Tabs",
+    desc: "Tabbed content container",
+    icon: "layers"
+  },
+  {
+    group: "Documentation",
+    type: "TabItemBlock",
+    label: "Tab Item",
+    desc: "Individual tab page",
+    icon: "fileText"
+  },
+  {
+    group: "Documentation",
+    type: "StepsBlock",
+    label: "Steps",
+    desc: "Step-by-step walkthrough sequence",
+    icon: "listOrdered"
+  },
+  {
+    group: "Documentation",
+    type: "StepItemBlock",
+    label: "Step Item",
+    desc: "Individual step",
+    icon: "check"
+  },
+  {
+    group: "Documentation",
+    type: "CardsBlock",
+    label: "Cards Grid",
+    desc: "Grid container for link cards",
+    icon: "grid"
+  },
+  {
+    group: "Documentation",
+    type: "CardBlock",
+    label: "Card",
+    desc: "Interactive doc/link card",
+    icon: "file"
+  },
+  {
+    group: "Documentation",
+    type: "FileTreeBlock",
+    label: "File Tree",
+    desc: "Directory and file structure visualizer",
+    icon: "folder"
+  },
+  {
+    group: "Screenplay",
+    type: "ScriptBlock",
+    label: "Script",
+    desc: "Script container with plot tracking",
+    icon: "fileText"
+  },
+  {
+    group: "Screenplay",
+    type: "SceneBlock",
+    label: "Scene",
+    desc: "Scene with location and time-of-day",
+    icon: "video"
+  },
+  {
+    group: "Screenplay",
+    type: "DialogueBlock",
+    label: "Dialogue",
+    desc: "Character dialogue line",
+    icon: "messageSquare"
+  }
+]
+
+import { ALLOWED_CHILDREN_MAP, MAX_SECTION_DEPTH } from "../../core/types/blocks"
+import { toast } from "../toast"
+export { ALLOWED_CHILDREN_MAP }
+
+export interface RimelightBlockPickerProps {
+  open: boolean
+  sectionDepth?: number | undefined
+  containerType?: string | null | undefined
+  onSelect: (type: string) => void
+  onClose: () => void
+}
+
+export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props) => {
+  let searchInput: HTMLInputElement | undefined = undefined
+  const [query, setQuery] = createSignal("")
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+
+  const allowedTypes = (): string[] => {
+    const parent = props.containerType || "Root"
+    return ALLOWED_CHILDREN_MAP[parent] || ALLOWED_CHILDREN_MAP.Root || []
+  }
+
+  const filteredBlocks = () => {
+    const q = query().toLowerCase()
+    const depth = props.sectionDepth || 0
+    const allowed = allowedTypes()
+
+    return BLOCK_DEFS.filter((b) => {
+      if (!allowed.includes(b.type)) return false
+      if (b.type === "SectionBlock" && depth > MAX_SECTION_DEPTH) return false
+      return (
+        b.label.toLowerCase().includes(q) ||
+        b.type.toLowerCase().includes(q) ||
+        b.desc.toLowerCase().includes(q) ||
+        b.group.toLowerCase().includes(q)
+      )
+    })
+  }
+
+  const handleSelectBlock = (type: string) => {
+    const depth = props.sectionDepth || 0
+    if (type === "SectionBlock" && depth > MAX_SECTION_DEPTH) {
+      toast.error(
+        "Invalid Section Nesting",
+        "Sections cannot be nested inside an H6 section. H6 is the maximum heading level."
+      )
+      return
+    }
+    props.onSelect(type)
+  }
+
+  onMount(() => {
+    const handleGlobalKeydown = (e: KeyboardEvent) => {
+      if (props.open && e.key === "Escape") {
+        props.onClose()
+      }
+    }
+    document.addEventListener("keydown", handleGlobalKeydown)
+    onCleanup(() => document.removeEventListener("keydown", handleGlobalKeydown))
+  })
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    const list = filteredBlocks()
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.min(prev + 1, Math.max(0, list.length - 1)))
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.max(prev - 1, 0))
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      const selected = list[selectedIndex()]
+      if (selected) {
+        handleSelectBlock(selected.type)
+      }
+    }
+  }
+
+  return (
+    <div classList={{ hidden: !props.open }}>
+      <div
+        role="presentation"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) props.onClose()
+        }}
+        class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      >
+        <div class="bg-elevated border border-default rounded-2xl w-full max-w-md shadow-2xl flex flex-col overflow-hidden">
+          <div class="flex items-center justify-between px-4 py-3 border-b border-default">
+            <div class="text-sm font-semibold text-foreground">
+              Add Block{" "}
+              {props.containerType ? `to ${props.containerType.replace("Block", "")}` : ""}
+            </div>
+            <RLSButton
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              square={true}
+              onClick={() => props.onClose()}
+              aria-label="Close"
+              leading={<RLSIcon name="close" size="xs" />}
+            />
+          </div>
+
+          <div class="px-4 py-3 border-b border-default/50">
+            <RLSInput
+              ref={(el: HTMLInputElement) => {
+                searchInput = el
+                if (props.open) setTimeout(() => searchInput?.focus(), 10)
+              }}
+              value={query()}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => {
+                setQuery(e.currentTarget.value)
+                setSelectedIndex(0)
+              }}
+              onKeyDown={handleKeydown}
+              placeholder="Search blocks..."
+              leadingIcon="search"
+              size="sm"
+            />
+          </div>
+
+          <div class="overflow-y-auto max-h-[50vh] pb-2">
+            {filteredBlocks().length === 0 ? (
+              <div class="text-center py-4 text-muted-foreground text-sm">
+                No compatible blocks found
+              </div>
+            ) : (
+              (() => {
+                let currentGroup = ""
+                return (
+                  <For each={filteredBlocks()}>
+                    {(block, index) => {
+                      const showHeader = block.group !== currentGroup
+                      if (showHeader) currentGroup = block.group
+                      const isSelected = index() === selectedIndex()
+
+                      return (
+                        <>
+                          {showHeader && (
+                            <div class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-4 py-1.5 mt-2">
+                              {block.group}
+                            </div>
+                          )}
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              handleSelectBlock(block.type)
+                            }}
+                            onMouseEnter={() => setSelectedIndex(index())}
+                            class="cms-picker-item flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80 w-full text-left bg-transparent border-none"
+                            classList={{ "bg-neutral-100 dark:bg-neutral-800/80": isSelected }}
+                          >
+                            <div class="text-base w-8 h-8 flex items-center justify-center shrink-0 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-foreground border border-default">
+                              <RLSIcon name={block.icon} size="sm" />
+                            </div>
+                            <div class="flex flex-col flex-1 min-w-0">
+                              <div class="flex items-center justify-between">
+                                <span class="text-sm font-medium text-foreground">
+                                  {block.label}
+                                </span>
+                                <span class="text-[10px] font-mono text-muted-foreground bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded border border-default/50">
+                                  {block.type}
+                                </span>
+                              </div>
+                              <span class="text-xs text-muted-foreground mt-0.5 truncate">
+                                {block.desc}
+                              </span>
+                            </div>
+                          </button>
+                        </>
+                      )
+                    }}
+                  </For>
+                )
+              })()
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/RimelightEditor.tsx

@@ -0,0 +1,131 @@
+import { onMount, onCleanup, For, type Component } from "solid-js"
+import type { EditorState } from "../state/editor-store"
+import { RimelightBlock } from "./RimelightBlock"
+import { RimelightBlockPicker } from "./RimelightBlockPicker"
+import { initBlockSortable, cleanAllSortableClasses } from "../utils/sortable"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface RimelightEditorProps {
+  state: EditorState
+}
+
+export const RimelightEditor: Component<RimelightEditorProps> = (props) => {
+  let canvasContainer: HTMLDivElement | undefined = undefined
+  let sortableInstance: any = null
+
+  onMount(() => {
+    if (canvasContainer) {
+      sortableInstance = initBlockSortable(canvasContainer, {
+        handle: ".cms-grip-btn",
+        filter: ".cms-empty-state, .locked",
+        onReorder: (oldIdx: number, newIdx: number) => {
+          cleanAllSortableClasses()
+          const list = [...props.state.blocks]
+          const item = list.splice(oldIdx, 1)[0]
+          if (item) {
+            list.splice(newIdx, 0, item)
+            props.state.setBlocks(list)
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onAdd: (blockId: string, newIdx: number) => {
+          cleanAllSortableClasses()
+          props.state.relocateBlock(blockId, newIdx, null)
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onRemove: (_blockId: string, _oldIdx: number) => {
+          cleanAllSortableClasses()
+        }
+      })
+    }
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault()
+        props.state.undo()
+      } else if ((e.ctrlKey || e.metaKey) && (e.key === "y" || (e.key === "z" && e.shiftKey))) {
+        e.preventDefault()
+        props.state.redo()
+      }
+    }
+    window.addEventListener("keydown", handleKeydown)
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeydown)
+      if (sortableInstance) sortableInstance.destroy()
+    })
+  })
+
+  return (
+    <div class="flex flex-col gap-6 w-full bg-transparent">
+      <div ref={canvasContainer} class="flex flex-col gap-3 w-full min-h-[200px] pl-6">
+        {props.state.blocks.length === 0 ? (
+          <div class="flex flex-col items-center justify-center p-8 sm:p-12 rounded-xl border border-dashed border-default text-center my-4">
+            <div class="text-3xl text-muted-foreground mb-2">📄</div>
+            <h4 class="text-base font-semibold text-foreground">No blocks yet</h4>
+            <p class="text-xs text-muted-foreground mt-1 max-w-xs">
+              Start building your page content by adding your first block below.
+            </p>
+            <div class="mt-4">
+              <RLSButton
+                variant="outline"
+                color="neutral"
+                size="sm"
+                onClick={() => props.state.openPicker(null, "after", 0)}
+                leadingIcon="plus"
+                label="Add Block"
+              />
+            </div>
+          </div>
+        ) : (
+          <For each={props.state.blocks}>
+            {(block) => (
+              <RimelightBlock
+                block={block}
+                sectionDepth={0}
+                onPropsChange={props.state.updateBlockProps}
+                onMove={props.state.moveBlock}
+                onDelete={props.state.deleteBlock}
+                onDuplicate={props.state.duplicateBlock}
+                onAddAdjacent={(targetId, pos) => props.state.openPicker(targetId, pos, 0)}
+                onRelocate={props.state.relocateBlock}
+                onOpenPicker={(targetId, pos, depth, parentId, containerType) =>
+                  props.state.openPicker(targetId, pos, depth, parentId, containerType)
+                }
+              />
+            )}
+          </For>
+        )}
+      </div>
+
+      {props.state.blocks.length > 0 && (
+        <div class="flex flex-col items-center justify-center gap-4 p-4 mt-2">
+          <RLSButton
+            variant="outline"
+            color="neutral"
+            size="sm"
+            onClick={() => props.state.openPicker(null, "after", 0, null, "Root")}
+            leadingIcon="plus"
+            label="Add Block"
+          />
+        </div>
+      )}
+
+      <RimelightBlockPicker
+        open={props.state.pickerTarget().open}
+        sectionDepth={props.state.pickerTarget().sectionDepth}
+        containerType={props.state.pickerTarget().containerType}
+        onSelect={(type) => {
+          const { targetId, position, parentId } = props.state.pickerTarget()
+          props.state.insertBlock(type, targetId, position, parentId)
+          props.state.closePicker()
+        }}
+        onClose={props.state.closePicker}
+      />
+    </div>
+  )
+}

package/src/client/components/RimelightEditorLayout.tsx

@@ -0,0 +1,143 @@
+import { onMount, createEffect, createMemo, Show, type Component } from "solid-js"
+import type { BaseBlock } from "../../core/types/blocks"
+import { createEditorState } from "../state/editor-store"
+import { RimelightEditor } from "./RimelightEditor"
+import { RimelightPreview } from "./RimelightPreview"
+import { initSplitPane } from "../utils/splitpane"
+
+export interface RimelightEditorLayoutProps {
+  pageId?: string
+  initialBlocks?: BaseBlock[] | string
+  showInternalPreview?: boolean
+  ref?: (el: any) => void
+}
+
+export const RimelightEditorLayout: Component<RimelightEditorLayoutProps> = (componentProps) => {
+  let containerRef: HTMLDivElement | undefined = undefined
+  let editorPaneRef: HTMLDivElement | undefined = undefined
+  let previewPaneRef: HTMLDivElement | undefined = undefined
+  let handleRef: HTMLDivElement | undefined = undefined
+
+  let parsedInitialBlocks: BaseBlock[] = []
+  if (typeof componentProps.initialBlocks === "string") {
+    try {
+      parsedInitialBlocks = JSON.parse(componentProps.initialBlocks)
+    } catch {
+      parsedInitialBlocks = []
+    }
+  } else if (Array.isArray(componentProps.initialBlocks)) {
+    parsedInitialBlocks = componentProps.initialBlocks
+  }
+
+  const state = createEditorState(parsedInitialBlocks, componentProps.pageId || "default-page")
+
+  // Snapshot of blocks as plain objects for the preview.
+  const previewBlocks = createMemo<BaseBlock[]>(() => {
+    const len = state.blocks.length
+    const result: BaseBlock[] = []
+    for (let i = 0; i < len; i++) {
+      const blockObj = JSON.parse(JSON.stringify(state.blocks[i]))
+      if (blockObj && typeof blockObj === "object") {
+        result.push(blockObj)
+      }
+    }
+    return result
+  })
+
+  createEffect(() => {
+    const currentStatus = state.status()
+    if (typeof document !== "undefined") {
+      document.dispatchEvent(
+        new CustomEvent("status-change", { detail: { status: currentStatus }, bubbles: true })
+      )
+    }
+  })
+
+  createEffect(() => {
+    const rawBlocks = previewBlocks()
+    if (typeof document !== "undefined") {
+      document.dispatchEvent(
+        new CustomEvent("blocks-change", { detail: { blocks: rawBlocks }, bubbles: true })
+      )
+    }
+  })
+
+  onMount(() => {
+    const publicMethods = {
+      undo: () => state.undo(),
+      redo: () => state.redo(),
+      addBlock: (_type?: string) => state.openPicker(null, "after", 0),
+      saveDraft: () => state.saveDraft(),
+      togglePreview: () => {
+        const next = !state.previewVisible()
+        state.setPreviewVisible(next)
+        if (typeof document !== "undefined") {
+          document.dispatchEvent(
+            new CustomEvent("preview-toggle", { detail: { visible: next }, bubbles: true })
+          )
+        }
+        return next
+      },
+      getBlocks: () => JSON.parse(JSON.stringify(state.blocks)),
+      setBlocks: (newBlocks: BaseBlock[]) => state.setBlocks(newBlocks),
+      getAttribute: (attr: string) => (attr === "page-id" ? componentProps.pageId : null)
+    }
+
+    if (componentProps.ref) {
+      componentProps.ref(publicMethods)
+    }
+
+    if (typeof window !== "undefined") {
+      const win = window as Window & { cmsEditorLayout?: Record<string, any> }
+      win.cmsEditorLayout = publicMethods
+    }
+
+    if (containerRef) {
+      Object.assign(containerRef, publicMethods)
+    }
+  })
+
+  createEffect(() => {
+    if (componentProps.showInternalPreview && state.previewVisible()) {
+      queueMicrotask(() => {
+        if (containerRef && editorPaneRef && previewPaneRef && handleRef) {
+          initSplitPane(containerRef, editorPaneRef, previewPaneRef, handleRef)
+        }
+      })
+    }
+  })
+
+  return (
+    <div class="rimelight-cms-editor-container flex-1 w-full h-full flex">
+      <div
+        ref={containerRef}
+        class="cms-split-layout w-full h-full flex flex-row overflow-hidden relative"
+        id="cms-layout"
+      >
+        <div
+          ref={editorPaneRef}
+          style={{
+            flex:
+              componentProps.showInternalPreview && state.previewVisible() ? "0 0 50%" : "1 1 100%"
+          }}
+          class="flex flex-col h-full overflow-hidden w-full"
+        >
+          <RimelightEditor state={state} />
+        </div>
+
+        <Show when={componentProps.showInternalPreview && state.previewVisible()}>
+          <div ref={handleRef} class="cms-resize-handle" id="cms-resize-handle">
+            <div class="cms-resize-pill" />
+          </div>
+          <div
+            ref={previewPaneRef}
+            style={{ flex: "0 0 50%" }}
+            class="flex flex-col h-full overflow-hidden border-l border-gray-800"
+          >
+            <RimelightPreview blocks={previewBlocks} />
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}