@rimelight/cms 0.0.1

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

@@ -0,0 +1,185 @@
+import { createSignal, onMount, onCleanup, For, Show, 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 RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface CalloutEditorProps {
+  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
+}
+
+const VARIANTS: Record<string, { icon: string; label: string }> = {
+  info: { icon: "info", label: "Info" },
+  success: { icon: "check", label: "Success" },
+  warning: { icon: "triangleAlert", label: "Warning" },
+  error: { icon: "circleAlert", label: "Error" },
+  commentary: { icon: "messageSquare", label: "Commentary" },
+  ideation: { icon: "lightbulb", label: "Ideation" },
+  source: { icon: "code", label: "Source" }
+}
+
+const VARIANT_OPTIONS = Object.entries(VARIANTS).map(([key, item]) => ({
+  label: item.label,
+  value: key
+}))
+
+const TARGET_OPTIONS = [
+  { label: "Same tab", value: "_self" },
+  { label: "New tab (_blank)", value: "_blank" }
+]
+
+export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) => {
+  const [linkSettingsOpen, setLinkSettingsOpen] = createSignal(!!componentProps.props.to)
+  let childrenContainer: HTMLDivElement | undefined = undefined
+  let sortableInstance: any = null
+
+  const variant = () => componentProps.props.variant || "info"
+
+  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 saveLinkProps = (to?: string, target?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      to: to !== undefined ? to : componentProps.props.to,
+      target: target !== undefined ? target : componentProps.props.target
+    })
+  }
+
+  const setVariant = (v: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      variant: v
+    })
+  }
+
+  return (
+    <div class="w-full flex flex-col gap-3 p-3 rounded-xl border border-default/70">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+            Callout:
+          </span>
+          <div class="w-36">
+            <RLSSelect
+              items={VARIANT_OPTIONS}
+              value={variant()}
+              onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
+                setVariant(e.currentTarget.value)
+              }
+              size="xs"
+            />
+          </div>
+        </div>
+
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          onClick={() => setLinkSettingsOpen(!linkSettingsOpen())}
+          title="Link settings"
+          leadingIcon="link"
+          label={componentProps.props.to ? "Linked" : "Add Link"}
+        />
+      </div>
+
+      <Show when={linkSettingsOpen()}>
+        <div class="flex items-center gap-2 p-2 rounded-lg border border-default text-xs">
+          <div class="flex-1">
+            <RLSInput
+              type="text"
+              placeholder="Link URL (e.g. https://... or /slug)"
+              value={componentProps.props.to || ""}
+              onBlur={(e: FocusEvent & { currentTarget: HTMLInputElement }) =>
+                saveLinkProps(e.currentTarget.value, componentProps.props.target)
+              }
+              size="sm"
+            />
+          </div>
+          <div class="w-32">
+            <RLSSelect
+              items={TARGET_OPTIONS}
+              value={componentProps.props.target || "_self"}
+              onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
+                saveLinkProps(componentProps.props.to, e.currentTarget.value)
+              }
+              size="xs"
+            />
+          </div>
+        </div>
+      </Show>
+
+      <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-2">
+            <span class="text-xs text-muted-foreground block">Empty callout</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/CardEditor.tsx

@@ -0,0 +1,60 @@
+import { type Component } from "solid-js"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+
+export interface CardEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+export const CardEditor: Component<CardEditorProps> = (componentProps) => {
+  const save = (field: string, value: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      [field]: value
+    })
+  }
+
+  return (
+    <div class="rimelight-card-editor flex flex-col gap-2 p-3 rounded-xl border border-default bg-muted/10 w-full">
+      <div class="grid grid-cols-2 gap-2">
+        <RLSInput
+          type="text"
+          placeholder="Card Title"
+          value={componentProps.props.title || ""}
+          onBlur={(e) => save("title", e.currentTarget.value)}
+          size="sm"
+        />
+        <RLSInput
+          type="text"
+          placeholder="Link (href e.g. /docs/getting-started)"
+          value={componentProps.props.href || ""}
+          onBlur={(e) => save("href", e.currentTarget.value)}
+          size="sm"
+        />
+      </div>
+      <RLSInput
+        type="text"
+        placeholder="Card Description"
+        value={componentProps.props.description || ""}
+        onBlur={(e) => save("description", e.currentTarget.value)}
+        size="sm"
+      />
+      <div class="grid grid-cols-2 gap-2">
+        <RLSInput
+          type="text"
+          placeholder="Icon (e.g. i-lucide-book-open)"
+          value={componentProps.props.icon || ""}
+          onBlur={(e) => save("icon", e.currentTarget.value)}
+          size="sm"
+        />
+        <RLSInput
+          type="text"
+          placeholder="Badge (optional e.g. New, Beta)"
+          value={componentProps.props.badge || ""}
+          onBlur={(e) => save("badge", e.currentTarget.value)}
+          size="sm"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,132 @@
+import { 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 RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface CardsEditorProps {
+  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
+}
+
+const COLUMN_OPTIONS = [
+  { label: "1 Column", value: "1" },
+  { label: "2 Columns", value: "2" },
+  { label: "3 Columns", value: "3" },
+  { label: "4 Columns", value: "4" }
+]
+
+export const CardsEditor: Component<CardsEditorProps> = (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 setColumns = (colStr: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      columns: Number.parseInt(colStr, 10) || 2
+    })
+  }
+
+  return (
+    <div class="rimelight-cards-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+            Cards Grid
+          </span>
+          <div class="w-32">
+            <RLSSelect
+              items={COLUMN_OPTIONS}
+              value={String(componentProps.props.columns || 2)}
+              onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
+                setColumns(e.currentTarget.value)
+              }
+              size="xs"
+            />
+          </div>
+        </div>
+        <RLSButton
+          variant="outline"
+          color="neutral"
+          size="xs"
+          onClick={() => componentProps.onOpenPicker?.()}
+          leadingIcon="plus"
+          label="Add Card"
+        />
+      </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 cards in grid</span>
+            <RLSButton
+              variant="link"
+              color="primary"
+              size="xs"
+              onClick={() => componentProps.onOpenPicker?.()}
+              label="+ Add Card"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock) =>
+              componentProps.renderChildBlock?.(childBlock, componentProps.sectionDepth || 0)
+            }
+          </For>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,101 @@
+import { onMount, type Component } from "solid-js"
+import RLSSelect from "@rimelight/ui/components/select/RLSSelect.tsx"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+
+export interface CodeEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+const LANGUAGES = [
+  "typescript",
+  "javascript",
+  "python",
+  "bash",
+  "html",
+  "css",
+  "json",
+  "markdown",
+  "sql",
+  "rust",
+  "go",
+  "c",
+  "cpp",
+  "other"
+]
+
+export const CodeEditor: Component<CodeEditorProps> = (componentProps) => {
+  let codeTextarea: HTMLTextAreaElement | undefined
+
+  const autoResize = () => {
+    if (codeTextarea) {
+      codeTextarea.style.height = "auto"
+      codeTextarea.style.height = `${codeTextarea.scrollHeight + 2}px`
+    }
+  }
+
+  const saveProps = (lang?: string, code?: string, caption?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      language: lang !== undefined ? lang : componentProps.props.language || "typescript",
+      code: code !== undefined ? code : codeTextarea?.value || "",
+      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+    })
+  }
+
+  onMount(() => {
+    if (codeTextarea) {
+      codeTextarea.value = componentProps.props.code || ""
+      autoResize()
+    }
+  })
+
+  return (
+    <div class="rimelight-code-editor flex flex-col gap-2 p-2 w-full">
+      <div class="flex items-center justify-between mb-1">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            Language
+          </span>
+          <div class="w-36">
+            <RLSSelect
+              items={LANGUAGES}
+              value={componentProps.props.language || "typescript"}
+              onChange={(e) => saveProps(e.currentTarget.value)}
+              size="xs"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="relative w-full">
+        <textarea
+          ref={(el) => (codeTextarea = el)}
+          data-field="code"
+          class="w-full bg-neutral-950/80 border border-default rounded-lg px-3 py-2 text-sm text-green-400 font-mono resize-none outline-none focus:border-primary min-h-[120px] leading-relaxed"
+          placeholder="// Write code here..."
+          spellcheck={false}
+          onInput={autoResize}
+          onBlur={() => saveProps()}
+          onKeyDown={(e) => {
+            if (e.key === "Tab" && codeTextarea) {
+              e.preventDefault()
+              const start = codeTextarea.selectionStart
+              const end = codeTextarea.selectionEnd
+              const val = codeTextarea.value
+              codeTextarea.value = val.substring(0, start) + "  " + val.substring(end)
+              codeTextarea.selectionStart = codeTextarea.selectionEnd = start + 2
+            }
+          }}
+        />
+      </div>
+      <RLSInput
+        type="text"
+        data-field="caption"
+        value={componentProps.props.caption || ""}
+        onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
+        size="sm"
+        placeholder="Caption (optional)"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { type Component } from "solid-js"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSTextarea from "@rimelight/ui/components/textarea/RLSTextarea.tsx"
+
+export interface DialogueEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+export const DialogueEditor: Component<DialogueEditorProps> = (componentProps) => {
+  const saveProps = (character?: string, parenthetical?: string, line?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      character: character !== undefined ? character : componentProps.props.character || "",
+      parenthetical:
+        parenthetical !== undefined ? parenthetical : componentProps.props.parenthetical || "",
+      line: line !== undefined ? line : componentProps.props.line || ""
+    })
+  }
+
+  return (
+    <div class="rimelight-dialogue-editor flex flex-col gap-2 p-2 border-l-2 border-primary/50 w-full">
+      <div class="w-48 mx-auto">
+        <RLSInput
+          data-field="character"
+          value={componentProps.props.character || ""}
+          onBlur={(e) => saveProps(e.currentTarget.value)}
+          class="text-center font-bold text-sm uppercase"
+          placeholder="CHARACTER"
+          size="sm"
+        />
+      </div>
+      <div class="w-64 mx-auto">
+        <RLSInput
+          data-field="parenthetical"
+          value={componentProps.props.parenthetical || ""}
+          onBlur={(e) => saveProps(undefined, e.currentTarget.value)}
+          class="text-center italic text-sm"
+          placeholder="(parenthetical)"
+          size="sm"
+        />
+      </div>
+      <RLSTextarea
+        data-field="line"
+        value={componentProps.props.line || ""}
+        onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
+        placeholder="Dialogue line..."
+        rows={2}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { onMount, type Component } from "solid-js"
+import type { FileTreeNode } from "../../../core/types/blocks"
+
+export interface FileTreeEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+export const FileTreeEditor: Component<FileTreeEditorProps> = (componentProps) => {
+  let jsonTextarea: HTMLTextAreaElement | undefined
+
+  const tree = (): FileTreeNode[] =>
+    componentProps.props.tree || [
+      { name: "src", isDir: true, children: [{ name: "index.ts", isDir: false }] },
+      { name: "package.json", isDir: false }
+    ]
+
+  const autoResize = () => {
+    if (jsonTextarea) {
+      jsonTextarea.style.height = "auto"
+      jsonTextarea.style.height = `${jsonTextarea.scrollHeight + 2}px`
+    }
+  }
+
+  onMount(() => {
+    if (jsonTextarea) {
+      jsonTextarea.value = JSON.stringify(tree(), null, 2)
+      autoResize()
+    }
+  })
+
+  const saveJson = (val: string) => {
+    try {
+      const parsed = JSON.parse(val)
+      if (Array.isArray(parsed)) {
+        componentProps.onPropsChange({
+          ...componentProps.props,
+          tree: parsed
+        })
+      }
+    } catch {
+      // Ignore invalid JSON on intermediate typing
+    }
+  }
+
+  return (
+    <div class="rimelight-file-tree-editor flex flex-col gap-2 p-3 rounded-xl border border-default w-full">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+          File Tree JSON
+        </span>
+        <span class="text-xs text-muted-foreground italic">
+          Format: Array of {`{ name, isDir, comment, children }`}
+        </span>
+      </div>
+      <textarea
+        ref={(el) => (jsonTextarea = el)}
+        class="w-full bg-neutral-950/80 border border-default rounded-lg p-2.5 text-xs text-amber-400 font-mono resize-none outline-none focus:border-primary min-h-[100px] leading-relaxed"
+        spellcheck={false}
+        onInput={autoResize}
+        onBlur={(e) => saveJson(e.currentTarget.value)}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { type Component } from "solid-js"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+
+export interface ImageEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
+  const saveProps = (src?: string, alt?: string, caption?: string) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      src: src !== undefined ? src : componentProps.props.src || "",
+      alt: alt !== undefined ? alt : componentProps.props.alt || "",
+      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+    })
+  }
+
+  return (
+    <div class="w-full flex flex-col gap-3 p-2">
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-bold text-muted-foreground uppercase">Image URL</span>
+        <RLSInput
+          id="image-src-input"
+          type="text"
+          value={componentProps.props.src || ""}
+          onBlur={(e) => saveProps(e.currentTarget.value)}
+          placeholder="https://..."
+          leadingIcon="image"
+        />
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-bold text-muted-foreground uppercase">Alt Text</span>
+          <RLSInput
+            id="image-alt-input"
+            type="text"
+            value={componentProps.props.alt || ""}
+            onBlur={(e) => saveProps(undefined, e.currentTarget.value)}
+            placeholder="Alt description"
+            size="sm"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-bold text-muted-foreground uppercase">Caption</span>
+          <RLSInput
+            id="image-caption-input"
+            type="text"
+            value={componentProps.props.caption || ""}
+            onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
+            placeholder="Image caption"
+            size="sm"
+          />
+        </div>
+      </div>
+
+      {componentProps.props.src && (
+        <div class="mt-2 flex justify-center p-2 rounded-lg border border-default">
+          <img
+            src={componentProps.props.src}
+            alt={componentProps.props.alt || "Image preview"}
+            class="max-h-48 object-cover rounded shadow-sm"
+          />
+        </div>
+      )}
+    </div>
+  )
+}