@rimelight/cms 0.0.2 → 0.0.3

package/src/client/components/RimelightBylinesManager.tsx

@@ -0,0 +1,438 @@
+import { createSignal, onMount, For, Show, createMemo, type Component } from "solid-js"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+import RLSBadge from "@rimelight/ui/components/badge/RLSBadge.tsx"
+import RLSIcon from "@rimelight/ui/components/icon/RLSIcon.tsx"
+
+export interface BylineEntity {
+  id: string
+  name: string
+  slug: string
+  websiteUrl?: string | null
+  bio?: string | null
+  avatar?: string | null
+  userId?: string | null
+  socials?: Record<string, string>
+  metadata?: Record<string, any>
+  createdAt?: string
+}
+
+export const RimelightBylinesManager: Component = () => {
+  const [bylines, setBylines] = createSignal<BylineEntity[]>([])
+  const [selectedId, setSelectedId] = createSignal<string | null>(null)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  const [isLoading, setIsLoading] = createSignal(false)
+  const [isSaving, setIsSaving] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+
+  // Form State
+  const [form, setForm] = createSignal<{
+    name: string
+    slug: string
+    websiteUrl: string
+    bio: string
+    avatar: string
+    userId: string
+  }>({
+    name: "",
+    slug: "",
+    websiteUrl: "",
+    bio: "",
+    avatar: "",
+    userId: ""
+  })
+
+  const loadBylines = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const res = await fetch("/api/cms/bylines")
+      if (!res.ok) throw new Error("Failed to load bylines")
+      const data = await res.json()
+      const list: BylineEntity[] = Array.isArray(data) ? data : []
+      setBylines(list)
+
+      if (list.length > 0 && !selectedId()) {
+        selectByline(list[0]!)
+      } else if (list.length === 0) {
+        startNewByline()
+      }
+    } catch (err: any) {
+      setError(err.message || "Failed to load bylines")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  onMount(() => {
+    void loadBylines()
+  })
+
+  const filteredBylines = createMemo(() => {
+    const q = searchQuery().toLowerCase().trim()
+    if (!q) return bylines()
+    return bylines().filter(
+      (b) =>
+        b.name.toLowerCase().includes(q) ||
+        b.slug.toLowerCase().includes(q) ||
+        (b.bio && b.bio.toLowerCase().includes(q))
+    )
+  })
+
+  const selectByline = (byline: BylineEntity) => {
+    setSelectedId(byline.id)
+    setForm({
+      name: byline.name || "",
+      slug: byline.slug || "",
+      websiteUrl: byline.websiteUrl || "",
+      bio: byline.bio || "",
+      avatar: byline.avatar || "",
+      userId: byline.userId || ""
+    })
+  }
+
+  const startNewByline = () => {
+    setSelectedId(null)
+    setForm({
+      name: "",
+      slug: "",
+      websiteUrl: "",
+      bio: "",
+      avatar: "",
+      userId: ""
+    })
+  }
+
+  const handleNameChange = (name: string) => {
+    const isNew = !selectedId()
+    const autoSlug = isNew
+      ? name
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/(^-|-$)/g, "")
+      : form().slug
+
+    setForm((prev) => ({
+      ...prev,
+      name,
+      slug: isNew ? autoSlug : prev.slug
+    }))
+  }
+
+  const handleSave = async (e?: Event) => {
+    e?.preventDefault()
+    const f = form()
+    if (!f.name.trim()) {
+      alert("Display name is required")
+      return
+    }
+
+    const slug =
+      f.slug.trim() ||
+      f.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/(^-|-$)/g, "")
+
+    const payload = {
+      name: f.name.trim(),
+      slug,
+      websiteUrl: f.websiteUrl.trim() || null,
+      bio: f.bio.trim() || null,
+      avatar: f.avatar.trim() || null,
+      userId: f.userId.trim() || null
+    }
+
+    setIsSaving(true)
+    try {
+      if (selectedId()) {
+        const res = await fetch(`/api/cms/bylines/${selectedId()}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        })
+        if (!res.ok) throw new Error("Failed to update byline")
+        const updated = await res.json()
+        setBylines((prev) => prev.map((b) => (b.id === updated.id ? updated : b)))
+      } else {
+        const res = await fetch("/api/cms/bylines", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        })
+        if (!res.ok) throw new Error("Failed to create byline")
+        const created = await res.json()
+        setBylines((prev) => [created, ...prev])
+        setSelectedId(created.id)
+      }
+    } catch (err: any) {
+      alert(err.message || "Failed to save byline")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    const id = selectedId()
+    if (!id) return
+    const current = bylines().find((b) => b.id === id)
+    if (!confirm(`Are you sure you want to delete byline "${current?.name || id}"?`)) return
+
+    try {
+      const res = await fetch(`/api/cms/bylines/${id}`, { method: "DELETE" })
+      if (!res.ok) throw new Error("Failed to delete byline")
+      setBylines((prev) => prev.filter((b) => b.id !== id))
+      const remaining = bylines().filter((b) => b.id !== id)
+      if (remaining.length > 0) {
+        selectByline(remaining[0]!)
+      } else {
+        startNewByline()
+      }
+    } catch (err: any) {
+      alert(err.message || "Failed to delete byline")
+    }
+  }
+
+  return (
+    <div class="flex flex-col gap-6 w-full max-w-7xl mx-auto py-2">
+      {/* Top Header */}
+      <div class="flex items-center justify-between border-b border-default pb-4">
+        <div>
+          <h1 class="text-2xl font-bold text-highlighted tracking-tight">Bylines</h1>
+          <p class="text-xs text-muted mt-0.5">
+            Manage author profiles and multi-author attributions across articles and pages.
+          </p>
+        </div>
+      </div>
+
+      {/* 2-Column Master-Detail Layout */}
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+        {/* Left Column: Search & Byline Cards List (5 Cols) */}
+        <div class="lg:col-span-5 flex flex-col gap-3">
+          <div class="flex items-center gap-2">
+            <div class="flex-1">
+              <RLSInput
+                value={searchQuery()}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  setSearchQuery(e.currentTarget.value)
+                }
+                placeholder="Search bylines..."
+                size="sm"
+              />
+            </div>
+            <RLSButton
+              variant="solid"
+              color="primary"
+              size="sm"
+              onClick={startNewByline}
+              leadingIcon="plus"
+              label="New"
+            />
+          </div>
+
+          <Show when={isLoading()}>
+            <div class="p-8 text-center text-xs text-muted animate-pulse">Loading bylines...</div>
+          </Show>
+
+          <Show when={error()}>
+            <div class="p-4 text-center text-xs text-error-500">{error()}</div>
+          </Show>
+
+          <Show when={!isLoading() && filteredBylines().length === 0}>
+            <div class="p-8 text-center border border-dashed border-default rounded-xl flex flex-col items-center gap-2">
+              <RLSIcon name="user" size="md" class="text-muted/50" />
+              <span class="text-xs font-semibold text-highlighted">No bylines found</span>
+              <p class="text-[11px] text-muted">
+                Create a byline to attribute authors to your posts.
+              </p>
+            </div>
+          </Show>
+
+          <div class="flex flex-col gap-2 max-h-[calc(100vh-280px)] overflow-y-auto pr-1">
+            <For each={filteredBylines()}>
+              {(item) => {
+                const isSelected = () => selectedId() === item.id
+                return (
+                  <button
+                    type="button"
+                    onClick={() => selectByline(item)}
+                    class={`flex items-center gap-3 p-3 rounded-xl border text-left transition cursor-pointer ${
+                      isSelected()
+                        ? "bg-elevated/90 border-primary shadow-sm"
+                        : "bg-background/40 hover:bg-elevated/40 border-default"
+                    }`}
+                  >
+                    {item.avatar ? (
+                      <img
+                        src={item.avatar}
+                        alt={item.name}
+                        class="w-10 h-10 rounded-full object-cover shrink-0 border border-default"
+                      />
+                    ) : (
+                      <div class="w-10 h-10 rounded-full bg-primary/10 text-primary font-bold text-sm flex items-center justify-center shrink-0 border border-primary/20">
+                        {item.name.charAt(0).toUpperCase()}
+                      </div>
+                    )}
+                    <div class="flex flex-col min-w-0 flex-1">
+                      <div class="flex items-center justify-between gap-1">
+                        <span class="text-sm font-semibold text-highlighted truncate">
+                          {item.name}
+                        </span>
+                        <Show when={isSelected()}>
+                          <RLSBadge variant="solid" color="primary" size="sm">
+                            Active
+                          </RLSBadge>
+                        </Show>
+                      </div>
+                      <span class="text-xs font-mono text-muted truncate">{item.slug}</span>
+                    </div>
+                  </button>
+                )
+              }}
+            </For>
+          </div>
+        </div>
+
+        {/* Right Column: Edit / Create Form (7 Cols) */}
+        <div class="lg:col-span-7 bg-elevated/30 border border-default rounded-2xl p-6 flex flex-col gap-5">
+          <div class="flex items-center justify-between border-b border-default pb-3">
+            <h3 class="text-lg font-bold text-highlighted">
+              {selectedId() ? "Edit byline" : "Create byline"}
+            </h3>
+            <Show when={selectedId()}>
+              <span class="text-xs font-mono text-muted">ID: {selectedId()}</span>
+            </Show>
+          </div>
+
+          <form onSubmit={handleSave} class="flex flex-col gap-4">
+            {/* Display Name */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Display name *</label>
+              <RLSInput
+                value={form().name}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  handleNameChange(e.currentTarget.value)
+                }
+                placeholder="e.g. Guest Contributor, EmDash Editorial"
+              />
+            </div>
+
+            {/* Slug */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Slug</label>
+              <RLSInput
+                value={form().slug}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  setForm((prev) => ({ ...prev, slug: e.currentTarget.value }))
+                }
+                placeholder="guest-contributor"
+              />
+            </div>
+
+            {/* Website URL */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Website URL</label>
+              <RLSInput
+                value={form().websiteUrl}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  setForm((prev) => ({ ...prev, websiteUrl: e.currentTarget.value }))
+                }
+                placeholder="https://..."
+              />
+            </div>
+
+            {/* Bio */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Bio</label>
+              <textarea
+                value={form().bio}
+                onInput={(e: InputEvent & { currentTarget: HTMLTextAreaElement }) =>
+                  setForm((prev) => ({ ...prev, bio: e.currentTarget.value }))
+                }
+                rows={3}
+                placeholder="Short author bio..."
+                class="w-full text-sm py-2 px-3 rounded-lg border border-default bg-background text-highlighted focus:outline-none focus:ring-1 focus:ring-primary resize-none"
+              />
+            </div>
+
+            {/* Avatar URL & Preview */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Avatar Image URL</label>
+              <div class="flex items-center gap-3">
+                <Show
+                  when={form().avatar}
+                  fallback={
+                    <div class="w-12 h-12 rounded-xl border border-dashed border-default flex items-center justify-center text-muted/50 shrink-0">
+                      <RLSIcon name="image" size="md" />
+                    </div>
+                  }
+                >
+                  <img
+                    src={form().avatar}
+                    alt="Preview"
+                    class="w-12 h-12 rounded-xl object-cover border border-default shrink-0"
+                  />
+                </Show>
+                <div class="flex-1">
+                  <RLSInput
+                    value={form().avatar}
+                    onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                      setForm((prev) => ({ ...prev, avatar: e.currentTarget.value }))
+                    }
+                    placeholder="https://... / avatar.png"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Linked User ID */}
+            <div class="flex flex-col gap-1.5">
+              <label class="text-xs font-semibold text-neutral-700">Linked user</label>
+              <RLSInput
+                value={form().userId}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                  setForm((prev) => ({ ...prev, userId: e.currentTarget.value }))
+                }
+                placeholder="Optional system User ID or email"
+              />
+            </div>
+
+            {/* Form Actions */}
+            <div class="flex items-center justify-between border-t border-default pt-4 mt-2">
+              <Show when={selectedId()} fallback={<div />}>
+                <RLSButton
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  size="sm"
+                  onClick={handleDelete}
+                  label="Delete"
+                  class="!text-error-500 hover:!text-error-600 !border-error-500/30"
+                />
+              </Show>
+
+              <div class="flex items-center gap-2">
+                <RLSButton
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  size="sm"
+                  onClick={startNewByline}
+                  label="Cancel"
+                />
+                <RLSButton
+                  type="submit"
+                  variant="solid"
+                  color="primary"
+                  size="sm"
+                  disabled={isSaving()}
+                  label={isSaving() ? "Saving..." : selectedId() ? "Save Changes" : "Create Byline"}
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/RimelightEditor.tsx

@@ -65,9 +65,9 @@ export const RimelightEditor: Component<RimelightEditorProps> = (props) => {
       <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">
+            <div class="text-3xl text-muted mb-2">📄</div>
+            <h4 class="text-base font-semibold text-highlighted">No blocks yet</h4>
+            <p class="text-xs text-muted mt-1 max-w-xs">
               Start building your page content by adding your first block below.
             </p>
             <div class="mt-4">

package/src/client/components/RimelightPreview.tsx

@@ -85,7 +85,7 @@ export const RimelightPreview: Component<RimelightPreviewProps> = (props) => {
               </span>
             )}
             {title() && (
-              <h1 class="text-3xl sm:text-4xl font-extrabold text-foreground tracking-tight leading-tight">
+              <h1 class="text-3xl sm:text-4xl font-extrabold text-highlighted tracking-tight leading-tight">
                 {title()}
               </h1>
             )}
@@ -150,11 +150,11 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
           if (node.type === "link") {
             const inner = node.children ? renderNodes(node.children) : escapeHtml(node.text || "")
             const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
-            return `<a href="${escapeHtml(node.url || "#")}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+            return `<a href="${escapeHtml(node.url || "#")}"${target} class="text-info-500 hover:text-info-400 underline underline-offset-2">${inner}</a>`
           }
           if (node.type === "page_mention") {
             const title = escapeHtml(node.displayTitle || node.pageSlug || node.pageId || "Page")
-            return `<span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 text-sm font-medium">📄 ${title}</span>`
+            return `<span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-info-500/10 text-info-400 text-sm font-medium">📄 ${title}</span>`
           }
           return ""
         })
@@ -167,7 +167,7 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     } else {
       html = escapeHtml(textVal)
     }
-    return `<p class="text-neutral-800 dark:text-neutral-200 text-base leading-relaxed my-3 whitespace-pre-wrap break-words">${html || '<span class="text-neutral-500 italic">Empty paragraph</span>'}</p>`
+    return `<p class="text-neutral-800 text-base leading-relaxed my-3 whitespace-pre-wrap break-words">${html || '<span class="text-neutral-500 italic">Empty paragraph</span>'}</p>`
   }
 
   if (b.type === "SectionBlock") {
@@ -175,9 +175,8 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     const title = props.title || "Untitled Section"
     const slug = title.toLowerCase().replace(/\W+/g, "-")
     const description = props.description
-    let headingClasses = "font-bold text-neutral-900 dark:text-white"
-    if (level === 2)
-      headingClasses += " text-3xl mt-6 mb-3 border-b border-gray-200 dark:border-gray-800 pb-2"
+    let headingClasses = "font-bold text-neutral-900"
+    if (level === 2) headingClasses += " text-3xl mt-6 mb-3 border-b border-neutral-200 pb-2"
     else if (level === 3) headingClasses += " text-2xl font-semibold mt-5 mb-2.5"
     else if (level === 4) headingClasses += " text-xl font-medium mt-4 mb-2"
     else if (level === 5) headingClasses += " text-lg font-medium mt-3 mb-1.5"
@@ -185,8 +184,8 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
 
     return `<div class="section-block my-6">
       <h${level} id="${slug}" class="${headingClasses}">${escapeHtml(title)}</h${level}>
-      ${description ? `<p class="text-gray-500 dark:text-gray-400 text-sm mt-1 mb-4 italic">${escapeHtml(description)}</p>` : ""}
-      <div class="mt-4 pl-4 border-l-2 border-gray-200 dark:border-gray-800">
+      ${description ? `<p class="text-neutral-500 text-sm mt-1 mb-4 italic">${escapeHtml(description)}</p>` : ""}
+      <div class="mt-4 pl-4 border-l-2 border-neutral-200">
         ${getChildren(b)
           .map((c) => renderBlockPreviewHtml(c, sectionDepth + 1))
           .join("")}
@@ -209,26 +208,19 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     }
     const icon = icons[variant] || icons.info
 
-    let variantClasses =
-      "bg-blue-50/50 dark:bg-blue-950/10 border-blue-200 dark:border-blue-900/50 text-blue-800 dark:text-blue-200"
+    let variantClasses = "bg-info-50/50 border-info-200 text-info-800"
     if (variant === "success") {
-      variantClasses =
-        "bg-green-50/50 dark:bg-green-950/10 border-green-200 dark:border-green-900/50 text-green-800 dark:text-green-200"
+      variantClasses = "bg-success-50/50 border-success-200 text-success-800"
     } else if (variant === "warning") {
-      variantClasses =
-        "bg-yellow-50/50 dark:bg-yellow-950/10 border-yellow-200 dark:border-yellow-900/50 text-yellow-800 dark:text-yellow-200"
+      variantClasses = "bg-warning-50/50 border-warning-200 text-warning-800"
     } else if (variant === "error") {
-      variantClasses =
-        "bg-red-50/50 dark:bg-red-950/10 border-red-200 dark:border-red-900/50 text-red-800 dark:text-red-200"
+      variantClasses = "bg-error-50/50 border-error-200 text-error-800"
     } else if (variant === "commentary") {
-      variantClasses =
-        "bg-purple-50/50 dark:bg-purple-950/10 border-purple-200 dark:border-purple-900/50 text-purple-800 dark:text-purple-200"
+      variantClasses = "bg-ideation-50/50 border-ideation-200 text-ideation-800"
     } else if (variant === "ideation") {
-      variantClasses =
-        "bg-amber-50/50 dark:bg-amber-950/10 border-amber-200 dark:border-amber-900/50 text-amber-800 dark:text-amber-200"
+      variantClasses = "bg-warning-50/50 border-warning-200 text-warning-800"
     } else if (variant === "source") {
-      variantClasses =
-        "bg-indigo-50/50 dark:bg-indigo-950/10 border-indigo-200 dark:border-indigo-900/50 text-indigo-800 dark:text-indigo-200"
+      variantClasses = "bg-info-50/50 border-info-200 text-info-800"
     }
 
     const tag = to ? `a href="${escapeHtml(to)}" target="${escapeHtml(target)}"` : "div"
@@ -249,8 +241,8 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     const alt = props.alt || "Image"
     const caption = props.caption
     return `<figure class="mx-auto my-6 flex flex-col items-center max-w-full">
-      <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 dark:border-neutral-800 shadow-sm" />
-      ${caption ? `<figcaption class="mt-2 text-center text-xs text-neutral-500 dark:text-neutral-400 italic">${escapeHtml(caption)}</figcaption>` : ""}
+      <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 shadow-sm" />
+      ${caption ? `<figcaption class="mt-2 text-center text-xs text-neutral-500 italic">${escapeHtml(caption)}</figcaption>` : ""}
     </figure>`
   }
 
@@ -258,10 +250,10 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     const code = props.code || textVal
     const language = props.language || "plaintext"
     const caption = props.caption
-    return `<div class="cms-code my-4 rounded-lg bg-gray-950 p-4 font-mono text-sm border border-gray-800 overflow-x-auto">
-      <div class="text-xs text-gray-500 uppercase mb-2 select-none">${escapeHtml(language)}</div>
-      <pre class="m-0"><code class="text-green-300 font-mono">${escapeHtml(code)}</code></pre>
-      ${caption ? `<div class="mt-2 text-center text-xs text-gray-500 italic">${escapeHtml(caption)}</div>` : ""}
+    return `<div class="cms-code my-4 rounded-lg bg-neutral-950 p-4 font-mono text-sm border border-neutral-800 overflow-x-auto">
+      <div class="text-xs text-neutral-500 uppercase mb-2 select-none">${escapeHtml(language)}</div>
+      <pre class="m-0"><code class="text-success-300 font-mono">${escapeHtml(code)}</code></pre>
+      ${caption ? `<div class="mt-2 text-center text-xs text-neutral-500 italic">${escapeHtml(caption)}</div>` : ""}
     </div>`
   }
 
@@ -270,22 +262,22 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     const synopsis = props.synopsis
     const chars = props.characters || []
     const { aPlot, bPlot, cPlot, stinger } = props
-    return `<div class="my-6 p-4 border-l-4 border-amber-400 bg-amber-50/20 dark:bg-amber-950/10 rounded-r-lg">
+    return `<div class="my-6 p-4 border-l-4 border-warning-400 bg-warning-50/20 rounded-r-lg">
       <div class="mb-4">
-        <h3 class="text-xl font-bold text-amber-900 dark:text-amber-100">${escapeHtml(title)}</h3>
-        ${synopsis ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 italic">${escapeHtml(synopsis)}</p>` : ""}
-        ${chars.length ? `<div class="flex flex-wrap gap-3 mt-3 text-xs">${chars.map((c: string) => `<span class="px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200">${escapeHtml(c)}</span>`).join("")}</div>` : ""}
+        <h3 class="text-xl font-bold text-warning-900">${escapeHtml(title)}</h3>
+        ${synopsis ? `<p class="text-sm text-neutral-500 mt-1 italic">${escapeHtml(synopsis)}</p>` : ""}
+        ${chars.length ? `<div class="flex flex-wrap gap-3 mt-3 text-xs">${chars.map((c: string) => `<span class="px-2 py-0.5 rounded-full bg-warning-100 text-warning-800">${escapeHtml(c)}</span>`).join("")}</div>` : ""}
       </div>
       ${
         aPlot || bPlot || cPlot
           ? `<div class="grid grid-cols-1 md:grid-cols-3 gap-3 my-3">
-        ${aPlot ? `<div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700"><div class="text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">A Plot</div><div class="text-sm mt-0.5">${escapeHtml(aPlot)}</div></div>` : ""}
-        ${bPlot ? `<div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700"><div class="text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">B Plot</div><div class="text-sm mt-0.5">${escapeHtml(bPlot)}</div></div>` : ""}
-        ${cPlot ? `<div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700"><div class="text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">C Plot</div><div class="text-sm mt-0.5">${escapeHtml(cPlot)}</div></div>` : ""}
+        ${aPlot ? `<div class="bg-neutral-50/50 rounded p-2 border border-neutral-200"><div class="text-[10px] font-bold uppercase tracking-wider text-neutral-500">A Plot</div><div class="text-sm mt-0.5">${escapeHtml(aPlot)}</div></div>` : ""}
+        ${bPlot ? `<div class="bg-neutral-50/50 rounded p-2 border border-neutral-200"><div class="text-[10px] font-bold uppercase tracking-wider text-neutral-500">B Plot</div><div class="text-sm mt-0.5">${escapeHtml(bPlot)}</div></div>` : ""}
+        ${cPlot ? `<div class="bg-neutral-50/50 rounded p-2 border border-neutral-200"><div class="text-[10px] font-bold uppercase tracking-wider text-neutral-500">C Plot</div><div class="text-sm mt-0.5">${escapeHtml(cPlot)}</div></div>` : ""}
       </div>`
           : ""
       }
-      ${stinger ? `<p class="text-sm text-gray-500 dark:text-gray-400 italic mt-2 border-t border-gray-200 dark:border-gray-700 pt-2">Stinger: ${escapeHtml(stinger)}</p>` : ""}
+      ${stinger ? `<p class="text-sm text-neutral-500 italic mt-2 border-t border-neutral-200 pt-2">Stinger: ${escapeHtml(stinger)}</p>` : ""}
       <div class="mt-4">
         ${getChildren(b)
           .map((c) => renderBlockPreviewHtml(c, sectionDepth))
@@ -325,12 +317,12 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     if (location) parts.push(location)
     if (tod && tod !== "Other") parts.push(`- ${tod}`)
 
-    return `<div class="my-4 p-3 border-l-4 border-indigo-400 bg-indigo-50/20 dark:bg-indigo-950/10 rounded-r-lg">
-      <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-indigo-800 dark:text-indigo-200 mb-2">
+    return `<div class="my-4 p-3 border-l-4 border-info-400 bg-info-50/20 rounded-r-lg">
+      <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-info-800 mb-2">
         ${parts.map((p) => `<span>${escapeHtml(p)}</span>`).join("")}
-        ${transition ? `<span class="ml-auto text-[10px] italic text-gray-500 dark:text-gray-400">${escapeHtml(transition)}</span>` : ""}
+        ${transition ? `<span class="ml-auto text-[10px] italic text-neutral-500">${escapeHtml(transition)}</span>` : ""}
       </div>
-      ${props.description ? `<p class="text-sm text-gray-700 dark:text-gray-300 mb-2">${escapeHtml(props.description)}</p>` : ""}
+      ${props.description ? `<p class="text-sm text-neutral-700 mb-2">${escapeHtml(props.description)}</p>` : ""}
       <div class="mt-3">
         ${getChildren(b)
           .map((c) => renderBlockPreviewHtml(c, sectionDepth))
@@ -344,11 +336,11 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
     const parenthetical = props.parenthetical
     const line = props.line || ""
     return `<div class="my-3 mx-8 max-w-md">
-      <div class="text-sm font-bold text-center text-pink-800 dark:text-pink-200">${escapeHtml(character)}</div>
-      ${parenthetical ? `<div class="text-xs italic text-center text-gray-500 dark:text-gray-400 mt-0.5">(${escapeHtml(parenthetical)})</div>` : ""}
-      <div class="text-sm text-center text-gray-700 dark:text-gray-300 mt-1">${escapeHtml(line)}</div>
+      <div class="text-sm font-bold text-center text-commentary-800">${escapeHtml(character)}</div>
+      ${parenthetical ? `<div class="text-xs italic text-center text-neutral-500 mt-0.5">(${escapeHtml(parenthetical)})</div>` : ""}
+      <div class="text-sm text-center text-neutral-700 mt-1">${escapeHtml(line)}</div>
     </div>`
   }
 
-  return `<div class="p-3 bg-gray-900 border border-gray-800 rounded text-sm text-gray-400 my-2">${escapeHtml(b.type)}: ${escapeHtml(textVal)}</div>`
+  return `<div class="p-3 bg-neutral-900 border border-neutral-800 rounded text-sm text-neutral-400 my-2">${escapeHtml(b.type)}: ${escapeHtml(textVal)}</div>`
 }