@rimelight/cms 0.0.1

package/src/client/toast.ts

@@ -0,0 +1,12 @@
+export {
+  toasts,
+  toast,
+  addToast,
+  removeToast,
+  clearToasts,
+  showErrorToast,
+  showSuccessToast,
+  type ToastItem,
+  type Toast,
+  type ToastInput
+} from "@rimelight/ui/components/toast/store.ts"

package/src/client/utils/sortable.ts

@@ -0,0 +1,184 @@
+import Sortable from "sortablejs"
+
+const sortableProto: Record<string, any> | undefined = Sortable?.prototype
+
+if (typeof window !== "undefined" && sortableProto && !sortableProto.patchedParentNodeGuard) {
+  sortableProto.patchedParentNodeGuard = true
+  const originalOnDragOver = sortableProto["_onDragOver"]
+  if (typeof originalOnDragOver === "function") {
+    sortableProto["_onDragOver"] = function (evt: Event) {
+      if (evt && evt.target instanceof Element) {
+        const el = evt.target
+        if (typeof document !== "undefined" && !document.contains(el)) {
+          return
+        }
+      }
+      try {
+        originalOnDragOver.call(this, evt)
+      } catch (err: unknown) {
+        if (
+          err instanceof TypeError ||
+          (err instanceof Error && err.message.includes("parentNode"))
+        ) {
+          return
+        }
+        throw err
+      }
+    }
+  }
+}
+
+export interface SortableOptions {
+  onReorder: (oldIndex: number, newIndex: number) => void
+  onAdd?: (
+    blockId: string,
+    newIndex: number,
+    fromContainerId?: string,
+    itemEl?: HTMLElement
+  ) => void
+  onRemove?: (blockId: string, oldIndex: number) => void
+  handle?: string
+  filter?: string
+  group?: string
+}
+
+export function initBlockSortable(container: HTMLElement, options: SortableOptions): Sortable {
+  const runCleanup = (specificItem?: HTMLElement | Element) => {
+    const doClean = () => cleanAllSortableClasses()
+    cleanAllSortableClasses(specificItem)
+    doClean()
+    requestAnimationFrame(doClean)
+    setTimeout(doClean, 50)
+    setTimeout(doClean, 150)
+    setTimeout(doClean, 300)
+    setTimeout(doClean, 600)
+  }
+
+  return Sortable.create(container, {
+    group: {
+      name: options.group || "cms-blocks",
+      pull: true,
+      put: (to, _from, dragEl) => {
+        if (!to || !to.el || !dragEl) return false
+        // Prevent a container block from being dropped into itself or its own descendants
+        if (dragEl === to.el || dragEl.contains(to.el)) return false
+        return true
+      }
+    },
+    animation: 150,
+    handle: options.handle || ".cms-drag-handle, .cms-grip-btn",
+    filter: options.filter || ".locked", // Templated or read-only blocks filtered out from drag
+    forceFallback: false,
+    fallbackOnBody: false,
+    fallbackTolerance: 3,
+    ghostClass: "cms-sortable-ghost",
+    chosenClass: "cms-sortable-chosen",
+    dragClass: "cms-sortable-drag",
+    swapThreshold: 0.65,
+    emptyInsertThreshold: 50,
+    onStart: () => {},
+    onUnchoose: () => {
+      runCleanup()
+    },
+    onSpill: () => {
+      runCleanup()
+    },
+    onEnd: (evt) => {
+      runCleanup(evt.item)
+
+      if (
+        evt.from === evt.to &&
+        evt.oldIndex !== undefined &&
+        evt.newIndex !== undefined &&
+        evt.oldIndex !== evt.newIndex
+      ) {
+        const oldIdx = evt.oldIndex
+        const newIdx = evt.newIndex
+        // Remove SortableJS-placed node; SolidJS will re-render from state
+        evt.item.parentNode?.removeChild(evt.item)
+        requestAnimationFrame(() => {
+          options.onReorder(oldIdx, newIdx)
+          runCleanup(evt.item)
+        })
+      } else {
+        requestAnimationFrame(() => {
+          runCleanup(evt.item)
+        })
+      }
+    },
+    onAdd: (evt) => {
+      runCleanup(evt.item)
+      const itemEl = evt.item
+      const blockId = itemEl.dataset.id || itemEl.getAttribute("data-id")
+      if (blockId && evt.newIndex !== undefined && options.onAdd) {
+        const target = evt.from.closest("[data-block-id]")
+        const containerBlockId = target instanceof HTMLElement ? target.dataset.blockId : undefined
+        // Remove the physically-moved DOM node before calling the callback.
+        // The reactive framework (SolidJS) will re-render the authoritative element
+        // from state, so leaving the SortableJS-placed node causes a visual duplicate.
+        itemEl.parentNode?.removeChild(itemEl)
+        options.onAdd(blockId, evt.newIndex, containerBlockId, itemEl)
+      }
+    },
+    onRemove: (evt) => {
+      runCleanup(evt.item)
+      const itemEl = evt.item
+      const blockId = itemEl.dataset.id || itemEl.getAttribute("data-id")
+      if (blockId && evt.oldIndex !== undefined && options.onRemove) {
+        options.onRemove(blockId, evt.oldIndex)
+      }
+    }
+  })
+}
+
+function cleanElement(el: Element) {
+  if (el instanceof HTMLElement) {
+    el.classList.remove(
+      "cms-sortable-ghost",
+      "cms-sortable-chosen",
+      "cms-sortable-drag",
+      "sortable-fallback"
+    )
+    el.style.pointerEvents = ""
+    el.style.opacity = ""
+    el.style.transform = ""
+    el.style.boxShadow = ""
+    el.style.borderColor = ""
+    el.style.backgroundColor = ""
+  }
+}
+
+export function cleanAllSortableClasses(specificItem?: HTMLElement | Element) {
+  if (specificItem) {
+    cleanElement(specificItem)
+    specificItem.querySelectorAll("*").forEach(cleanElement)
+  }
+
+  if (typeof document !== "undefined") {
+    document
+      .querySelectorAll(
+        ".cms-sortable-ghost, .cms-sortable-chosen, .cms-sortable-drag, .sortable-fallback"
+      )
+      .forEach((el) => {
+        cleanElement(el)
+        el.querySelectorAll("*").forEach(cleanElement)
+      })
+  }
+}
+
+const customWin: Record<string, any> | null = typeof window !== "undefined" ? window : null
+if (customWin && !customWin.cmsSortableGlobalListenersAttached) {
+  customWin.cmsSortableGlobalListenersAttached = true
+  const globalClean = () => {
+    const doClean = () => cleanAllSortableClasses()
+    doClean()
+    setTimeout(doClean, 50)
+    setTimeout(doClean, 150)
+    setTimeout(doClean, 300)
+  }
+  customWin.addEventListener("mouseup", globalClean, { capture: true })
+  customWin.addEventListener("pointerup", globalClean, { capture: true })
+  customWin.addEventListener("touchend", globalClean, { capture: true })
+  customWin.addEventListener("dragend", globalClean, { capture: true })
+  customWin.addEventListener("drop", globalClean, { capture: true })
+}

package/src/client/utils/splitpane.ts

@@ -0,0 +1,87 @@
+const SNAP_POINTS = [25, 33.333, 50, 66.667, 75]
+const SNAP_THRESHOLD = 2.0
+
+export function initSplitPane(
+  container: HTMLElement,
+  leftPane: HTMLElement,
+  rightPane: HTMLElement,
+  handle: HTMLElement,
+  onResize?: (leftPct: number) => void
+) {
+  let isDragging = false
+  let animationFrameId: number | null = null
+  let pendingPercentage: number | null = null
+
+  const applyResize = () => {
+    if (pendingPercentage === null) return
+    leftPane.style.flex = `0 0 ${pendingPercentage}%`
+    leftPane.style.width = `${pendingPercentage}%`
+    rightPane.style.flex = `0 0 ${100 - pendingPercentage}%`
+    rightPane.style.width = `${100 - pendingPercentage}%`
+    onResize?.(pendingPercentage)
+    animationFrameId = null
+  }
+
+  const onMouseDown = (e: MouseEvent) => {
+    isDragging = true
+    handle.classList.add("active")
+    container.classList.add("split-dragging")
+    leftPane.style.transition = "none"
+    rightPane.style.transition = "none"
+    document.body.style.cursor = "col-resize"
+    document.body.style.userSelect = "none"
+    e.preventDefault()
+  }
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isDragging) return
+    const containerRect = container.getBoundingClientRect()
+    const offset = e.clientX - containerRect.left
+    let percentage = (offset / containerRect.width) * 100
+
+    // Multi-point snapping (25%, 33.33%, 50%, 66.67%, 75%)
+    for (const snap of SNAP_POINTS) {
+      if (Math.abs(percentage - snap) <= SNAP_THRESHOLD) {
+        percentage = snap
+        break
+      }
+    }
+
+    // Keep within bounds 20% - 80%
+    percentage = Math.max(20, Math.min(80, percentage))
+
+    pendingPercentage = percentage
+    if (!animationFrameId) {
+      animationFrameId = requestAnimationFrame(applyResize)
+    }
+  }
+
+  const onMouseUp = () => {
+    if (isDragging) {
+      isDragging = false
+      handle.classList.remove("active")
+      container.classList.remove("split-dragging")
+      leftPane.style.transition = ""
+      rightPane.style.transition = ""
+      document.body.style.cursor = ""
+      document.body.style.userSelect = ""
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId)
+        animationFrameId = null
+      }
+    }
+  }
+
+  handle.addEventListener("mousedown", onMouseDown)
+  document.addEventListener("mousemove", onMouseMove)
+  document.addEventListener("mouseup", onMouseUp)
+
+  return () => {
+    handle.removeEventListener("mousedown", onMouseDown)
+    document.removeEventListener("mousemove", onMouseMove)
+    document.removeEventListener("mouseup", onMouseUp)
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId)
+    }
+  }
+}

package/src/client/utils/tree-sanitizer.ts

@@ -0,0 +1,33 @@
+import type { BaseBlock } from "../../core/types/blocks"
+
+export function getBlockChildren(b: BaseBlock): BaseBlock[] {
+  if (!b) return []
+  if (Array.isArray(b.props?.children)) return b.props.children
+  if (Array.isArray(b.children)) return b.children
+  return []
+}
+
+export function sanitizeBlockTree(blocks: BaseBlock[]): BaseBlock[] {
+  if (!Array.isArray(blocks)) return []
+
+  const childIds = new Set<string>()
+
+  for (const b of blocks) {
+    if (!b) continue
+    const children = getBlockChildren(b)
+    if (Array.isArray(children) && children.length > 0) {
+      const collect = (list: BaseBlock[]) => {
+        for (const child of list) {
+          if (child && child.id) {
+            childIds.add(child.id)
+            const sub = getBlockChildren(child)
+            if (Array.isArray(sub) && sub.length > 0) collect(sub)
+          }
+        }
+      }
+      collect(children)
+    }
+  }
+
+  return blocks.filter((b) => b && b.id && !childIds.has(b.id))
+}