@rimelight/cms 0.0.1

package/src/client/components/RimelightPropertiesPanel.tsx

@@ -0,0 +1,408 @@
+import { createSignal, onMount, For, Show, type Component } from "solid-js"
+import {
+  getPageDefinition,
+  type PageDefinition,
+  type FieldDefinition
+} from "../../core/page-definitions"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSSelect from "@rimelight/ui/components/select/RLSSelect.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+import RLSBadge from "@rimelight/ui/components/badge/RLSBadge.tsx"
+import RLSModal from "@rimelight/ui/components/modal/RLSModal.tsx"
+import RLSIcon from "@rimelight/ui/components/icon/RLSIcon.tsx"
+
+function getTextValue(value: any): string {
+  if (typeof value === "string") return value
+  if (typeof value === "object" && value !== null && "en" in value) return value.en
+  if (typeof value === "number") return String(value)
+  return ""
+}
+
+export interface RimelightPropertiesPanelProps {
+  pageType?: string
+  initialProperties?: Record<string, any>
+  title?: string
+  slug?: string
+  icon?: string
+  tags?: string[]
+  onPropertiesChange?: (props: Record<string, any>) => void
+  class?: string
+}
+
+export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps> = (
+  componentProps
+) => {
+  const pageType = () => componentProps.pageType || "blog"
+  const definition = (): PageDefinition | null => getPageDefinition(pageType())
+
+  const [properties, setProperties] = createSignal<Record<string, any>>(
+    componentProps.initialProperties || {}
+  )
+  const [expandedGroups, setExpandedGroups] = createSignal<Record<string, boolean>>({})
+  const [arrayInputs, setArrayInputs] = createSignal<Record<string, string>>({})
+  const [links, setLinks] = createSignal<Array<{ label: string; to: string; icon?: string }>>(
+    componentProps.initialProperties?.links || []
+  )
+
+  const [isLinkModalOpen, setIsLinkModalOpen] = createSignal(false)
+  const [editingLinkIndex, setEditingLinkIndex] = createSignal<number | null>(null)
+  const [linkDraft, setLinkDraft] = createSignal({ label: "", to: "", icon: "" })
+
+  onMount(() => {
+    const def = definition()
+    if (def?.properties) {
+      const initialExpanded: Record<string, boolean> = {}
+      Object.entries(def.properties).forEach(([groupId, group]) => {
+        initialExpanded[groupId] = group.defaultOpen ?? true
+      })
+      setExpandedGroups(initialExpanded)
+    }
+
+    const handlePropsChange = (e: Event) => {
+      if (e instanceof CustomEvent && e.detail?.properties) {
+        setProperties(e.detail.properties)
+      }
+    }
+    document.addEventListener("properties-change", handlePropsChange)
+  })
+
+  const handlePropertyChange = (key: string, value: any) => {
+    const updated = { ...properties(), [key]: value }
+    setProperties(updated)
+    componentProps.onPropertiesChange?.(updated)
+    if (typeof document !== "undefined") {
+      document.dispatchEvent(
+        new CustomEvent("properties-change", { detail: { properties: updated }, bubbles: true })
+      )
+    }
+    if (typeof window !== "undefined") {
+      ;(window as any).cmsPageProperties = updated
+    }
+  }
+
+  const toggleGroup = (groupId: string) => {
+    setExpandedGroups((prev) => ({ ...prev, [groupId]: !prev[groupId] }))
+  }
+
+  const openLinkModal = (index: number | null = null) => {
+    setEditingLinkIndex(index)
+    if (index !== null && links()[index]) {
+      const l = links()[index]!
+      setLinkDraft({ label: l.label, to: l.to, icon: l.icon || "" })
+    } else {
+      setLinkDraft({ label: "", to: "", icon: "" })
+    }
+    setIsLinkModalOpen(true)
+  }
+
+  const saveLink = () => {
+    const draft = linkDraft()
+    if (!draft.label || !draft.to) return
+    const current = [...links()]
+    const idx = editingLinkIndex()
+    if (idx !== null) {
+      current[idx] = draft
+    } else {
+      current.push(draft)
+    }
+    setLinks(current)
+    handlePropertyChange("links", current)
+    setIsLinkModalOpen(false)
+  }
+
+  const removeLink = (index: number) => {
+    const current = [...links()]
+    current.splice(index, 1)
+    setLinks(current)
+    handlePropertyChange("links", current)
+  }
+
+  const renderField = (fieldId: string, field: FieldDefinition) => {
+    const label = getTextValue(field.label)
+    const value = properties()[fieldId] !== undefined ? properties()[fieldId] : field.defaultValue
+
+    if (field.type === "text") {
+      return (
+        <div class="flex flex-col gap-1 w-full">
+          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
+            {label}
+          </span>
+          <RLSInput
+            value={getTextValue(value)}
+            onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+              handlePropertyChange(fieldId, e.currentTarget.value)
+            }
+            placeholder="Type here..."
+            size="sm"
+          />
+        </div>
+      )
+    }
+
+    if (field.type === "number") {
+      return (
+        <div class="flex flex-col gap-1 w-full">
+          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
+            {label}
+          </span>
+          <RLSInput
+            type="number"
+            value={value !== undefined ? String(value) : ""}
+            onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+              handlePropertyChange(fieldId, Number(e.currentTarget.value))
+            }
+            placeholder="0"
+            size="sm"
+          />
+        </div>
+      )
+    }
+
+    if (field.type === "enum") {
+      const selectItems = (field.options || []).map((opt) => getTextValue(opt))
+      return (
+        <div class="flex flex-col gap-1 w-full">
+          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
+            {label}
+          </span>
+          <RLSSelect
+            items={selectItems}
+            value={getTextValue(value)}
+            onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
+              handlePropertyChange(fieldId, e.currentTarget.value)
+            }
+            size="sm"
+          />
+        </div>
+      )
+    }
+
+    if (field.type === "text-array" || field.type === "page-array") {
+      const arr: string[] = Array.isArray(value) ? value : []
+
+      const addArrayItem = () => {
+        const inputVal = arrayInputs()[fieldId]?.trim()
+        if (inputVal) {
+          handlePropertyChange(fieldId, [...arr, inputVal])
+          setArrayInputs((prev) => ({ ...prev, [fieldId]: "" }))
+        }
+      }
+
+      const removeArrayItem = (idx: number) => {
+        const updatedArr = [...arr]
+        updatedArr.splice(idx, 1)
+        handlePropertyChange(fieldId, updatedArr)
+      }
+
+      return (
+        <div class="flex flex-col gap-1 w-full">
+          <span class="text-xs font-semibold text-neutral-600 dark:text-neutral-400 block">
+            {label}
+          </span>
+          <div class="flex flex-wrap gap-1 mb-1">
+            <For each={arr}>
+              {(item, idx) => (
+                <RLSBadge variant="soft" color="neutral" size="sm">
+                  <span>{item}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeArrayItem(idx())}
+                    class="ml-1 text-muted-foreground hover:text-red-500 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center"
+                  >
+                    ×
+                  </button>
+                </RLSBadge>
+              )}
+            </For>
+          </div>
+          <div class="flex gap-1 mt-1">
+            <div class="flex-1">
+              <RLSInput
+                value={arrayInputs()[fieldId] || ""}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  setArrayInputs((prev) => ({ ...prev, [fieldId]: e.currentTarget.value }))
+                }
+                onKeyDown={(e: KeyboardEvent) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    addArrayItem()
+                  }
+                }}
+                size="sm"
+                placeholder="Add item..."
+              />
+            </div>
+            <RLSButton
+              variant="outline"
+              color="neutral"
+              size="sm"
+              onClick={addArrayItem}
+              label="+"
+            />
+          </div>
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  return (
+    <aside id="cms-properties-panel" class="flex flex-col gap-4 p-4 w-full bg-transparent">
+      <div class="flex flex-col">
+        {/* Top header content */}
+        <div class="flex flex-col gap-2 items-center text-center">
+          <div class="relative group/icon mb-1">
+            <div class="w-10 h-10 rounded-full flex items-center justify-center border border-default text-muted-foreground">
+              <RLSIcon name="fileText" size="md" />
+            </div>
+          </div>
+
+          <span class="text-xs text-dimmed uppercase tracking-wider text-center block font-semibold text-muted-foreground">
+            {pageType()} Properties
+          </span>
+        </div>
+
+        {/* Property Groups Accordion */}
+        <div class="mt-4 space-y-2 w-full">
+          <For each={Object.entries(definition()?.properties || {})}>
+            {([groupId, group]) => {
+              const isExpanded = () => expandedGroups()[groupId] ?? true
+              return (
+                <div class="w-full" data-group-id={groupId}>
+                  <button
+                    type="button"
+                    onClick={() => toggleGroup(groupId)}
+                    class="flex justify-between items-center w-full p-2 rounded-lg text-left font-medium text-sm text-foreground hover:bg-elevated transition cursor-pointer mt-2 bg-transparent border-0"
+                  >
+                    <span>{getTextValue(group.label)}</span>
+                    <RLSIcon
+                      name="chevronDown"
+                      size="sm"
+                      class={`transition-transform duration-150 text-muted-foreground ${
+                        isExpanded() ? "rotate-180" : ""
+                      }`}
+                    />
+                  </button>
+
+                  {isExpanded() && (
+                    <div class="p-3 flex flex-col gap-3 border-t border-default/50 -mt-1">
+                      <For each={Object.entries(group.fields || {})}>
+                        {([fieldId, field]) => renderField(fieldId, field)}
+                      </For>
+                    </div>
+                  )}
+                </div>
+              )
+            }}
+          </For>
+        </div>
+      </div>
+
+      {/* Links section */}
+      <div class="flex flex-col gap-2 pt-2 border-t border-default">
+        <div class="flex items-center justify-between mb-1">
+          <h6 class="text-xs font-bold uppercase tracking-wider text-muted-foreground">Links</h6>
+          <RLSButton
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            onClick={() => openLinkModal()}
+            leadingIcon="plus"
+            label="Add"
+          />
+        </div>
+
+        <Show
+          when={links().length > 0}
+          fallback={<p class="text-xs text-muted-foreground italic">No links added</p>}
+        >
+          <div class="flex flex-col gap-2">
+            <For each={links()}>
+              {(item, index) => (
+                <div class="flex items-center justify-between p-2 rounded-lg border border-default text-sm">
+                  <div class="flex items-center gap-2 truncate">
+                    <RLSIcon name="link" size="xs" class="text-muted-foreground shrink-0" />
+                    <span class="font-medium text-foreground truncate">{item.label}</span>
+                  </div>
+                  <div class="flex items-center gap-1 shrink-0">
+                    <RLSButton
+                      variant="ghost"
+                      color="neutral"
+                      size="xs"
+                      square={true}
+                      onClick={() => openLinkModal(index())}
+                      aria-label="Edit"
+                      title="Edit"
+                      leading={<RLSIcon name="edit" size="xs" />}
+                    />
+                    <RLSButton
+                      variant="ghost"
+                      color="neutral"
+                      size="xs"
+                      square={true}
+                      onClick={() => removeLink(index())}
+                      aria-label="Delete"
+                      title="Delete"
+                      class="!text-red-500 hover:!text-red-600"
+                      leading={<RLSIcon name="trash" size="xs" />}
+                    />
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+
+      {/* Link Add/Edit Modal */}
+      <RLSModal
+        open={isLinkModalOpen()}
+        onClose={() => setIsLinkModalOpen(false)}
+        title={editingLinkIndex() !== null ? "Edit Link" : "Add Link"}
+        footerSlot={
+          <>
+            <RLSButton
+              variant="outline"
+              color="neutral"
+              size="sm"
+              onClick={() => setIsLinkModalOpen(false)}
+              label="Cancel"
+            />
+            <RLSButton
+              variant="solid"
+              color="primary"
+              size="sm"
+              onClick={saveLink}
+              label={editingLinkIndex() !== null ? "Update" : "Add"}
+            />
+          </>
+        }
+      >
+        <div class="flex flex-col gap-4 py-2">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted-foreground">Label</span>
+            <RLSInput
+              value={linkDraft().label}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setLinkDraft({ ...linkDraft(), label: e.currentTarget.value })
+              }
+              placeholder="e.g. GitHub Repository"
+            />
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-semibold text-muted-foreground">URL</span>
+            <RLSInput
+              value={linkDraft().to}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setLinkDraft({ ...linkDraft(), to: e.currentTarget.value })
+              }
+              placeholder="https://..."
+            />
+          </div>
+        </div>
+      </RLSModal>
+    </aside>
+  )
+}

package/src/client/components/RimelightTemplateEditor.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 RLSSelect from "@rimelight/ui/components/select/RLSSelect.tsx"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSCheckbox from "@rimelight/ui/components/checkbox/RLSCheckbox.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+import RLSIcon from "@rimelight/ui/components/icon/RLSIcon.tsx"
+
+export interface RimelightTemplateEditorProps {
+  initialBlocks?: BaseBlock[]
+  onChange?: (blocks: BaseBlock[]) => void
+  ref?: (el: any) => void
+}
+
+function escapeHtml(str: string): string {
+  return (str || "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+const TEMPLATE_BLOCK_OPTIONS = [
+  { label: "Paragraph", value: "ParagraphBlock" },
+  { label: "Section Heading", value: "SectionBlock" },
+  { label: "Callout Box", value: "CalloutBlock" },
+  { label: "Code Snippet", value: "CodeBlock" },
+  { label: "Image", value: "ImageBlock" },
+  { label: "Script", value: "ScriptBlock" },
+  { label: "Scene", value: "SceneBlock" },
+  { label: "Dialogue", value: "DialogueBlock" }
+]
+
+export const RimelightTemplateEditor: Component<RimelightTemplateEditorProps> = (props) => {
+  const [blocks, setBlocks] = createSignal<BaseBlock[]>(
+    props.initialBlocks ? JSON.parse(JSON.stringify(props.initialBlocks)) : []
+  )
+  const [selectedType, setSelectedType] = createSignal("ParagraphBlock")
+  let canvasContainer: HTMLDivElement | undefined
+  let sortableInstance: any = null
+
+  const updateBlocks = (newBlocks: BaseBlock[]) => {
+    setBlocks(newBlocks)
+    props.onChange?.(newBlocks)
+  }
+
+  onMount(() => {
+    if (canvasContainer) {
+      sortableInstance = initBlockSortable(canvasContainer, {
+        onReorder: (oldIdx: number, newIdx: number) => {
+          cleanAllSortableClasses()
+          const list = [...blocks()]
+          const item = list.splice(oldIdx, 1)[0]
+          if (item) {
+            list.splice(newIdx, 0, item)
+            updateBlocks(list)
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        }
+      })
+    }
+
+    const publicMethods = {
+      getBlocks: () => JSON.parse(JSON.stringify(blocks())),
+      setBlocks: (newBlocks: BaseBlock[]) => updateBlocks(JSON.parse(JSON.stringify(newBlocks)))
+    }
+
+    if (props.ref) props.ref(publicMethods)
+
+    onCleanup(() => {
+      if (sortableInstance) sortableInstance.destroy()
+    })
+  })
+
+  const addBlock = (type: string) => {
+    let blockProps: Record<string, any> = {}
+    if (type === "SectionBlock") {
+      blockProps = { title: "Section Heading" }
+    } else if (type === "CalloutBlock") {
+      blockProps = { text: { en: "Callout note content..." }, variant: "info" }
+    } else if (type === "CodeBlock") {
+      blockProps = { code: "// Code snippet", language: "typescript" }
+    } else if (type === "ImageBlock") {
+      blockProps = { src: "https://via.placeholder.com/600x300", alt: "Image description" }
+    } else if (type === "ScriptBlock") {
+      blockProps = { title: "Scene Script" }
+    } else if (type === "SceneBlock") {
+      blockProps = { heading: "INT. SCENE - DAY" }
+    } else if (type === "DialogueBlock") {
+      blockProps = { character: "CHARACTER", text: { en: "Dialogue text..." } }
+    } else {
+      blockProps = { text: { en: "Paragraph content..." } }
+    }
+
+    const newBlock: BaseBlock = {
+      id: crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2),
+      type,
+      isTemplated: false,
+      props: blockProps
+    }
+
+    updateBlocks([...blocks(), newBlock])
+  }
+
+  const deleteBlock = (id: string) => {
+    updateBlocks(blocks().filter((b) => b.id !== id))
+  }
+
+  const updateBlockItem = (id: string, updater: (b: BaseBlock) => void) => {
+    const list: BaseBlock[] = JSON.parse(JSON.stringify(blocks()))
+    const target = list.find((b) => b.id === id)
+    if (target) {
+      updater(target)
+      updateBlocks(list)
+    }
+  }
+
+  return (
+    <div class="cms-template-editor border border-default rounded-xl p-4 space-y-4">
+      <div class="flex items-center justify-between p-3 rounded-lg border border-default">
+        <div>
+          <h4 class="text-sm font-semibold text-foreground">Initial Template Blocks</h4>
+          <p class="text-xs text-muted-foreground">
+            Visually design the initial layout and set block locks for pages instantiated from this
+            template.
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-44">
+            <RLSSelect
+              items={TEMPLATE_BLOCK_OPTIONS}
+              value={selectedType()}
+              onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
+                setSelectedType(e.currentTarget.value)
+              }
+              size="sm"
+            />
+          </div>
+          <RLSButton
+            variant="solid"
+            color="primary"
+            size="sm"
+            onClick={() => addBlock(selectedType())}
+            leadingIcon="plus"
+            label="Add Block"
+          />
+        </div>
+      </div>
+
+      <div
+        ref={(el) => (canvasContainer = el)}
+        id="tmpl-block-canvas"
+        class="space-y-3 min-h-[120px] p-3 border border-dashed border-default rounded-lg"
+      >
+        {blocks().length === 0 ? (
+          <div class="text-center py-8 text-xs text-muted-foreground italic">
+            No initial blocks added yet. Use the dropdown above to add initial template blocks.
+          </div>
+        ) : (
+          <For each={blocks()}>
+            {(block, index) => {
+              const rawText =
+                block.props.text || block.props.title || block.props.code || block.props.src || ""
+              const textVal = typeof rawText === "object" ? rawText.en || "" : rawText || ""
+
+              return (
+                <div
+                  data-id={block.id}
+                  class="cms-template-block-card border border-default rounded-lg p-3 text-xs space-y-2 relative"
+                >
+                  <div class="flex items-center justify-between border-b border-default/60 pb-2">
+                    <div class="flex items-center gap-2">
+                      <span class="font-bold text-foreground uppercase">{block.type}</span>
+                      <span class="text-[10px] text-muted-foreground">#{index() + 1}</span>
+                    </div>
+                    <RLSButton
+                      variant="ghost"
+                      color="neutral"
+                      size="xs"
+                      onClick={() => deleteBlock(block.id)}
+                      class="!text-red-500 hover:!text-red-600"
+                      leading={<RLSIcon name="trash" size="xs" />}
+                      label="Delete"
+                    />
+                  </div>
+
+                  <div class="flex items-center gap-4 py-1">
+                    <RLSCheckbox
+                      checked={!!block.isTemplated}
+                      onChange={(e: Event & { currentTarget: HTMLInputElement }) =>
+                        updateBlockItem(block.id, (b) => {
+                          b.isTemplated = e.currentTarget.checked
+                        })
+                      }
+                      label="📌 Anchor (Permanent)"
+                      size="sm"
+                    />
+                    <RLSCheckbox
+                      checked={block.templatedProps === true}
+                      onChange={(e: Event & { currentTarget: HTMLInputElement }) =>
+                        updateBlockItem(block.id, (b) => {
+                          b.templatedProps = e.currentTarget.checked
+                        })
+                      }
+                      label="🔒 Lock Content"
+                      size="sm"
+                    />
+                  </div>
+
+                  <div>
+                    <div>
+                      <span class="block text-[11px] text-muted-foreground mb-1">
+                        Block Content / Text
+                      </span>
+                      <div class="mt-1">
+                        <RLSInput
+                          id={`tmpl-content-${block.id}`}
+                          value={escapeHtml(textVal)}
+                          onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => {
+                            const val = e.currentTarget.value
+                            updateBlockItem(block.id, (b) => {
+                              if (b.type === "SectionBlock") b.props.title = val
+                              else if (b.type === "CodeBlock") b.props.code = val
+                              else if (b.type === "ImageBlock") b.props.src = val
+                              else b.props.text = { en: val }
+                            })
+                          }}
+                          size="sm"
+                          placeholder="Enter default block content..."
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            }}
+          </For>
+        )}
+      </div>
+    </div>
+  )
+}