@rimelight/cms 0.0.1

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

@@ -0,0 +1,245 @@
+import { createSignal, 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 RLSTextarea from "@rimelight/ui/components/textarea/RLSTextarea.tsx"
+import RLSBadge from "@rimelight/ui/components/badge/RLSBadge.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface ScriptEditorProps {
+  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 ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
+  const [charInputVal, setCharInputVal] = createSignal("")
+  let childrenContainer: HTMLDivElement | null = null as HTMLDivElement | null
+  let sortableInstance: any = null
+
+  const characters = (): string[] => componentProps.props.characters || []
+  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 saveProps = (partial: Record<string, any>) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      ...partial,
+      children: childrenBlocks()
+    })
+  }
+
+  const addCharacter = (name: string) => {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    const currentChars = characters()
+    if (!currentChars.includes(trimmed)) {
+      const updated = [...currentChars, trimmed]
+      setCharInputVal("")
+      componentProps.onPropsChange({ ...componentProps.props, characters: updated })
+    }
+  }
+
+  const removeCharacter = (name: string) => {
+    const updated = characters().filter((c) => c !== name)
+    componentProps.onPropsChange({ ...componentProps.props, characters: updated })
+  }
+
+  return (
+    <div class="rimelight-script-editor flex flex-col gap-4 p-3 border-l-2 border-primary/50 w-full">
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
+          Script Title
+        </span>
+        <RLSInput
+          data-field="title"
+          value={componentProps.props.title || ""}
+          onInput={(e) => saveProps({ title: e.currentTarget.value })}
+          placeholder="Script Title"
+          size="sm"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
+          Synopsis
+        </span>
+        <RLSTextarea
+          data-field="synopsis"
+          value={componentProps.props.synopsis || ""}
+          onInput={(e) => saveProps({ synopsis: e.currentTarget.value })}
+          placeholder="Synopsis..."
+          rows={2}
+        />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
+          Characters
+        </span>
+        <div class="chars-container flex flex-wrap gap-1.5 mb-1.5 min-h-[24px]">
+          {characters().length === 0 ? (
+            <div class="text-xs text-muted-foreground italic py-0.5">No characters added</div>
+          ) : (
+            <For each={characters()}>
+              {(char) => (
+                <RLSBadge variant="soft" color="primary" size="sm">
+                  <span>{char}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeCharacter(char)}
+                    class="hover:text-red-500 cursor-pointer ml-1 font-bold bg-transparent border-none p-0 inline-flex items-center"
+                  >
+                    ×
+                  </button>
+                </RLSBadge>
+              )}
+            </For>
+          )}
+        </div>
+        <div class="flex gap-2">
+          <div class="flex-1">
+            <RLSInput
+              data-field="char-input"
+              value={charInputVal()}
+              onInput={(e) => setCharInputVal(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  addCharacter(charInputVal())
+                }
+              }}
+              placeholder="New character name"
+              size="sm"
+            />
+          </div>
+          <RLSButton
+            variant="outline"
+            color="neutral"
+            size="sm"
+            onClick={() => addCharacter(charInputVal())}
+            label="Add"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">Plots</span>
+        <div class="grid grid-cols-3 gap-2">
+          <RLSInput
+            data-field="aPlot"
+            value={componentProps.props.aPlot || ""}
+            onInput={(e) => saveProps({ aPlot: e.currentTarget.value })}
+            placeholder="A-Plot"
+            size="sm"
+          />
+          <RLSInput
+            data-field="bPlot"
+            value={componentProps.props.bPlot || ""}
+            onInput={(e) => saveProps({ bPlot: e.currentTarget.value })}
+            placeholder="B-Plot"
+            size="sm"
+          />
+          <RLSInput
+            data-field="cPlot"
+            value={componentProps.props.cPlot || ""}
+            onInput={(e) => saveProps({ cPlot: e.currentTarget.value })}
+            placeholder="C-Plot"
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
+          Stinger
+        </span>
+        <RLSInput
+          data-field="stinger"
+          value={componentProps.props.stinger || ""}
+          onInput={(e) => saveProps({ stinger: e.currentTarget.value })}
+          placeholder="Stinger (post-credits etc)"
+          size="sm"
+        />
+      </div>
+
+      <div class="mt-2">
+        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest block mb-1">
+          Scenes & Content
+        </span>
+        <div
+          ref={(el) => (childrenContainer = el)}
+          class="children-container mt-1 pl-3 border-l-2 border-default flex flex-col gap-2 min-h-[60px]"
+        >
+          {childrenBlocks().length === 0 ? (
+            <div class="cms-empty-placeholder relative flex flex-col items-center justify-center gap-2 p-3 rounded-lg border border-dashed border-default text-center my-1">
+              <div class="text-xs font-semibold text-muted-foreground">Empty script content</div>
+              <RLSButton
+                variant="outline"
+                color="neutral"
+                size="xs"
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation()
+                  componentProps.onOpenPicker?.()
+                }}
+                leadingIcon="plus"
+                label="Add Block"
+              />
+            </div>
+          ) : (
+            <For each={childrenBlocks()}>
+              {(childBlock) =>
+                componentProps.renderChildBlock?.(childBlock, componentProps.sectionDepth || 0)
+              }
+            </For>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { onMount, onCleanup, For, type Component } from "solid-js"
+import { type BaseBlock, calculateHeadingLevel } from "../../../core/types/blocks"
+import { initBlockSortable, cleanAllSortableClasses } from "../../utils/sortable"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface SectionEditorProps {
+  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 SectionEditor: Component<SectionEditorProps> = (componentProps) => {
+  let titleInput: HTMLInputElement | null = null as HTMLInputElement | null
+  let descInput: HTMLInputElement | null = null as HTMLInputElement | null
+  let childrenContainer: HTMLDivElement | null = null as HTMLDivElement | null
+  let sortableInstance: any = null
+
+  const headingLevel = () => calculateHeadingLevel(componentProps.sectionDepth || 0)
+
+  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 saveProps = () => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      title: titleInput?.value || "",
+      description: descInput?.value || "",
+      level: headingLevel(),
+      children: childrenBlocks()
+    })
+  }
+
+  return (
+    <div class="w-full flex flex-col gap-2 py-0.5">
+      <div class="flex items-center gap-2.5">
+        <span class="text-xs font-bold text-muted-foreground select-none shrink-0 tracking-wider">
+          H{headingLevel()}
+        </span>
+        <input
+          ref={(el) => (titleInput = el)}
+          type="text"
+          value={componentProps.props.title || ""}
+          onInput={saveProps}
+          placeholder="Section Title"
+          class="flex-1 font-bold text-lg bg-transparent border-0 focus:outline-none text-foreground placeholder:text-muted-foreground/60 py-0.5"
+        />
+      </div>
+
+      <input
+        ref={(el) => (descInput = el)}
+        type="text"
+        value={componentProps.props.description || ""}
+        onInput={saveProps}
+        placeholder="Section description (optional)..."
+        class="text-sm text-muted-foreground bg-transparent border-0 focus:outline-none placeholder:text-muted-foreground/50 py-0.5"
+      />
+
+      <div
+        ref={(el) => (childrenContainer = el)}
+        class="ml-1 pl-8 border-l-2 border-primary/30 flex flex-col gap-2 mt-1 min-h-[32px]"
+      >
+        {childrenBlocks().length === 0 ? (
+          <div class="flex flex-col items-center justify-center p-3 border border-dashed border-default rounded-lg text-center">
+            <span class="text-xs text-muted-foreground">Empty section</span>
+            <RLSButton
+              variant="link"
+              color="primary"
+              size="xs"
+              onClick={() => componentProps.onOpenPicker?.()}
+              label="+ Add first block"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock: BaseBlock) =>
+              componentProps.renderChildBlock?.(childBlock, (componentProps.sectionDepth || 0) + 1)
+            }
+          </For>
+        )}
+      </div>
+
+      <div class="flex items-center pt-1">
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          onClick={() => componentProps.onOpenPicker?.()}
+          leadingIcon="plus"
+          label="Add block"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,117 @@
+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 StepItemEditorProps {
+  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 StepItemEditor: Component<StepItemEditorProps> = (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 saveMeta = (title?: string, description?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      title: title !== undefined ? title : componentProps.props.title || "",
+      description: description !== undefined ? description : componentProps.props.description || ""
+    })
+  }
+
+  return (
+    <div class="rimelight-step-item-editor flex flex-col gap-2 p-3 rounded-lg border border-default bg-muted/10 w-full">
+      <div class="flex flex-col gap-1.5">
+        <RLSInput
+          type="text"
+          placeholder="Step title (e.g. Install Dependencies)"
+          value={componentProps.props.title || ""}
+          onBlur={(e) => saveMeta(e.currentTarget.value, undefined)}
+          size="sm"
+        />
+        <RLSInput
+          type="text"
+          placeholder="Step description (optional)"
+          value={componentProps.props.description || ""}
+          onBlur={(e) => saveMeta(undefined, e.currentTarget.value)}
+          size="sm"
+        />
+      </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 step 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/StepsEditor.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 StepsEditorProps {
+  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 StepsEditor: Component<StepsEditorProps> = (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-steps-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">
+          Steps Walkthrough
+        </span>
+        <RLSButton
+          variant="outline"
+          color="neutral"
+          size="xs"
+          onClick={() => componentProps.onOpenPicker?.()}
+          leadingIcon="plus"
+          label="Add Step 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 steps in walkthrough</span>
+            <RLSButton
+              variant="link"
+              color="primary"
+              size="xs"
+              onClick={() => componentProps.onOpenPicker?.()}
+              label="+ Add Step Item"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock) =>
+              componentProps.renderChildBlock?.(childBlock, componentProps.sectionDepth || 0)
+            }
+          </For>
+        )}
+      </div>
+    </div>
+  )
+}