@rimelight/cms 0.0.2 → 0.0.3

package/src/admin/pages/templates-new.astro

@@ -0,0 +1,193 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLAInput from "@rimelight/ui/components/input/RLAInput.astro";
+import RLATextarea from "@rimelight/ui/components/textarea/RLATextarea.astro";
+import RLASelect from "@rimelight/ui/components/select/RLASelect.astro";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+const defaultRolesList = [
+  { name: "admin", displayName: "Administrator", description: "Full system & CMS access" },
+  { name: "editor", displayName: "Editor", description: "Can create and publish pages" },
+  { name: "author", displayName: "Author", description: "Can create and edit drafts" },
+  { name: "reviewer", displayName: "Reviewer", description: "Can review & approve versions" },
+  { name: "viewer", displayName: "Viewer", description: "Read-only access" }
+];
+
+const roleOptions = defaultRolesList.map((r) => ({
+  label: r.displayName || r.name,
+  value: r.name,
+  description: r.description || ""
+}));
+---
+
+<CMSDashboardLayout title="Create Template" description="Create a new CMS template" activeSection="templates">
+  <div class="max-w-3xl mx-auto space-y-6">
+    <form id="template-form" class="bg-elevated/40 border border-default p-6 rounded-2xl shadow space-y-6">
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Slug</label>
+        <RLAInput name="slug" required />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Title</label>
+        <RLAInput name="title" required />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Description</label>
+        <RLATextarea name="description" rows="3" />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Page Type</label>
+        <RLASelect
+          name="pageType"
+          placeholder="Select page type..."
+          items={[
+            { label: "Blog Post", value: "blog" },
+            { label: "Wiki Page", value: "wiki" },
+            { label: "Documentation", value: "doc" },
+            { label: "Announcement", value: "announcement" }
+          ]}
+          required
+        />
+      </div>
+
+      <div class="border-t border-default pt-6 space-y-4">
+        <h3 class="text-md font-semibold text-highlighted">Role Permissions</h3>
+        <p class="text-xs text-muted mb-4">Define granular user role access for pages instantiated from this template.</p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Create</label>
+            <RLASelect
+              name="whoCanCreate"
+              placeholder="Select creator roles..."
+              multiple={true}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Edit</label>
+            <RLASelect
+              name="whoCanEdit"
+              placeholder="Select editor roles..."
+              multiple={true}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Review</label>
+            <RLASelect
+              name="whoCanReview"
+              placeholder="Select reviewer roles..."
+              multiple={true}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can View</label>
+            <RLASelect
+              name="whoCanView"
+              placeholder="Select viewer roles..."
+              multiple={true}
+              items={roleOptions}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="border-t border-default pt-6">
+        <rimelight-template-editor id="template-block-editor"></rimelight-template-editor>
+      </div>
+
+      <div class="border-t border-default pt-6 flex items-center justify-end gap-3">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates")} variant="outline" color="neutral" size="sm">
+          Cancel
+        </RLAButton>
+        <RLAButton variant="solid" color="primary" size="sm" type="submit">
+          Create Template
+        </RLAButton>
+      </div>
+    </form>
+  </div>
+
+  <script is:inline define:vars={{ currentLocale }}>
+    import('@rimelight/cms/client/loader').then(({ defineCustomElements }) => {
+      return defineCustomElements();
+    });
+
+    function parseRoles(rawVal) {
+      if (!rawVal) return [];
+      try {
+        const parsed = JSON.parse(rawVal);
+        return Array.isArray(parsed) ? parsed : [rawVal];
+      } catch {
+        return rawVal.split(',').map(r => r.trim()).filter(Boolean);
+      }
+    }
+
+    document.getElementById('template-form')?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const formData = new FormData(e.target);
+      const whoCanCreate = parseRoles(formData.get('whoCanCreate'));
+      const whoCanEdit = parseRoles(formData.get('whoCanEdit'));
+      const whoCanReview = parseRoles(formData.get('whoCanReview'));
+      const whoCanView = parseRoles(formData.get('whoCanView'));
+
+      const templateEditor = document.getElementById('template-block-editor');
+      const initialBlocks = templateEditor && typeof templateEditor.getBlocks === 'function'
+        ? templateEditor.getBlocks()
+        : [];
+
+      const rolePermissions = {
+        whoCanCreate,
+        whoCanEdit,
+        whoCanReview,
+        whoCanView
+      };
+
+      const data = {
+        slug: formData.get('slug'),
+        title: formData.get('title'),
+        description: formData.get('description'),
+        pageType: formData.get('pageType'),
+        allowedRoles: whoCanCreate,
+        rolePermissions,
+        initialBlocks,
+        approvalRules: {
+          allowSelfApproval: true,
+          minApprovals: 1,
+          requiredRolesForApproval: whoCanReview
+        },
+        defaultProperties: {}
+      };
+
+      try {
+        const response = await fetch('/api/cms/templates', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          window.location.href = `/${currentLocale}/cms/templates`;
+        } else {
+          const errorData = (await response.json().catch(() => ({})));
+          alert(`Failed to create template: ${errorData.error || 'Unknown error'}`);
+        }
+      } catch {
+        alert('Error creating template: Network error');
+      }
+    });
+  </script>
+</CMSDashboardLayout>

package/src/admin/pages/users.astro

@@ -0,0 +1,74 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import RLAAvatar from "@rimelight/ui/components/avatar/RLAAvatar.astro";
+import RLATable from "@rimelight/ui/components/table/RLATable.astro";
+import type { TableColumn } from "@rimelight/ui/components/table/table.ts";
+
+export const prerender = false;
+
+const users = [
+  { id: "usr_1", name: "Idan T.", email: "idan@rimelight.com", role: "Super Admin", status: "active", lastActive: "Just now" },
+  { id: "usr_2", name: "Sarah Connor", email: "sarah@rimelight.com", role: "Editor", status: "active", lastActive: "2 hours ago" },
+  { id: "usr_3", name: "Alex Rivers", email: "alex@rimelight.com", role: "Author", status: "active", lastActive: "Yesterday" },
+  { id: "usr_4", name: "Elena Vance", email: "elena@rimelight.com", role: "Reviewer", status: "invited", lastActive: "Never" },
+];
+
+const columns: TableColumn[] = [
+  { id: "user", accessorKey: "name", header: "User", enableSorting: true },
+  { id: "role", accessorKey: "role", header: "Role", enableSorting: true },
+  { id: "status", accessorKey: "status", header: "Status", enableSorting: true },
+  { id: "lastActive", accessorKey: "lastActive", header: "Last Active", enableSorting: true },
+  { id: "actions", header: "Actions", enableSorting: false, meta: { class: { th: "text-right", td: "text-right" } } }
+];
+---
+
+<CMSDashboardLayout title="CMS Users" description="Manage team permissions, editor roles, and workspace access" activeSection="users">
+  <Fragment slot="toolbar-right">
+    <RLAButton variant="solid" color="success" leadingIcon="i-lucide-user-plus">
+      Invite Member
+    </RLAButton>
+  </Fragment>
+
+  <RLATable
+    columns={columns}
+    data={users}
+    searchable
+    searchPlaceholder="Search users..."
+    class="w-full"
+  >
+    {users.map((user) => (
+      <tr class="hover:bg-muted/20 transition-colors" data-slot="tr" data-row-id={user.id}>
+        <td class="p-3.5 text-sm font-medium text-highlighted flex items-center gap-3" data-col-id="user" data-slot="td">
+          <RLAAvatar name={user.name} size="sm" />
+          <div class="flex flex-col">
+            <span>{user.name}</span>
+            <span class="text-xs text-muted font-normal">{user.email}</span>
+          </div>
+        </td>
+        <td class="p-3.5 text-sm text-toned" data-col-id="role" data-slot="td">
+          <RLABadge variant="soft" color={user.role === "Super Admin" ? "primary" : user.role === "Editor" ? "blue" : "neutral"} size="xs">
+            {user.role}
+          </RLABadge>
+        </td>
+        <td class="p-3.5" data-col-id="status" data-slot="td">
+          {user.status === "active" ? (
+            <RLABadge variant="soft" color="green" size="xs">Active</RLABadge>
+          ) : (
+            <RLABadge variant="soft" color="yellow" size="xs">Invited</RLABadge>
+          )}
+        </td>
+        <td class="p-3.5 text-sm text-muted text-xs" data-col-id="lastActive" data-slot="td">
+          {user.lastActive}
+        </td>
+        <td class="p-3.5 text-right whitespace-nowrap" data-col-id="actions" data-slot="td">
+          <div class="flex items-center justify-end gap-2">
+            <RLAButton variant="ghost" color="neutral" size="xs">Change Role</RLAButton>
+            <RLAButton variant="ghost" color="error" size="xs" leadingIcon="i-lucide-trash-2" aria-label="Remove user" />
+          </div>
+        </td>
+      </tr>
+    ))}
+  </RLATable>
+</CMSDashboardLayout>

package/src/admin/pages/versions.astro

@@ -0,0 +1,74 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pageVersions, pages } from "../../schema";
+import { desc, eq } from "drizzle-orm";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+let versions: any[] = [];
+if (db) {
+  try {
+    const versionsList = await db
+      .select()
+      .from(pageVersions)
+      .orderBy(desc(pageVersions.createdAt))
+      .limit(50);
+
+    versions = await Promise.all(
+      versionsList.map(async (version: any) => {
+        const page = await db.select({ title: pages.title, slug: pages.slug }).from(pages).where(eq(pages.id, version.pageId)).limit(1);
+        return Object.assign({}, version, {
+          pageTitle: typeof page[0]?.title === "object" && page[0]?.title !== null ? (page[0].title as any).en || "" : page[0]?.title || "Unknown Page",
+          slug: page[0]?.slug || ""
+        });
+      })
+    );
+  } catch (err) {
+    console.warn("Failed to fetch versions:", err);
+  }
+}
+---
+
+<CMSDashboardLayout title="Versions" description="Manage CMS page versions" activeSection="versions">
+  <div class="bg-elevated/40 border border-default rounded-xl overflow-hidden">
+    <table class="w-full text-left text-sm">
+      <thead class="bg-elevated/70 border-b border-default text-xs font-semibold text-muted uppercase tracking-wider">
+        <tr>
+          <th class="px-6 py-3">Page</th>
+          <th class="px-6 py-3">Version</th>
+          <th class="px-6 py-3">Status</th>
+          <th class="px-6 py-3">Created</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-default/50">
+        {versions.map((version: any) => (
+          <tr class="hover:bg-elevated/50 transition">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm font-medium text-highlighted">{version.pageTitle}</div>
+              <div class="text-xs font-mono text-muted">{version.slug}</div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono text-muted">
+              v{version.versionNumber}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              {version.status === 'published' ? (
+                <RLABadge variant="soft" color="primary" size="xs">Published</RLABadge>
+              ) : version.status === 'pending' ? (
+                <RLABadge variant="soft" color="warning" size="xs">Pending Review</RLABadge>
+              ) : (
+                <RLABadge variant="soft" color="neutral" size="xs">Draft</RLABadge>
+              )}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-xs text-muted">
+              {new Date(version.createdAt).toLocaleDateString(currentLocale)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</CMSDashboardLayout>

package/src/astro/BlockRenderer.astro

@@ -1,117 +1,59 @@
 ---
-import type { BaseBlock } from "@rimelight/cms"
-import ApiDocumentationBlock from "./blocks/ApiDocumentationBlock.astro"
-import LivePreviewBlock from "./blocks/LivePreviewBlock.astro"
-import ParagraphBlock from "./blocks/ParagraphBlock.astro"
-import CalloutBlock from "./blocks/CalloutBlock.astro"
-import ImageBlock from "./blocks/ImageBlock.astro"
-import CodeBlock from "./blocks/CodeBlock.astro"
-import ScriptBlock from "./blocks/ScriptBlock.astro"
-import SceneBlock from "./blocks/SceneBlock.astro"
-import DialogueBlock from "./blocks/DialogueBlock.astro"
-import SectionBlock from "./blocks/SectionBlock.astro"
-import TableBlock from "./blocks/TableBlock.astro"
-import TabsBlock from "./blocks/TabsBlock.astro"
-import TabItemBlock from "./blocks/TabItemBlock.astro"
-import StepsBlock from "./blocks/StepsBlock.astro"
-import StepItemBlock from "./blocks/StepItemBlock.astro"
-import CardsBlock from "./blocks/CardsBlock.astro"
-import CardBlock from "./blocks/CardBlock.astro"
-import FileTreeBlock from "./blocks/FileTreeBlock.astro"
-import UnorderedListBlock from "./blocks/UnorderedListBlock.astro"
-import OrderedListBlock from "./blocks/OrderedListBlock.astro"
+import type { BaseBlock } from "../core/types/blocks"
+import { defaultBlockComponents } from "./blocks/index.ts"
 
 interface Props {
   block: BaseBlock
   locale?: string
   sectionDepth?: number
   index?: number
+  components?: Record<string, any>
 }
 
-const { block, locale = "en", sectionDepth = 0, index = 0 } = Astro.props
+const {
+  block,
+  locale = "en",
+  sectionDepth = 0,
+  index = 0,
+  components = {}
+} = Astro.props
+
+const Component = components[block.type] ?? defaultBlockComponents[block.type]
+const rawChildren = block.children || block.props?.children || []
+const children = (Array.isArray(rawChildren) ? rawChildren : []) as BaseBlock[]
+const nextDepth = block.type === "SectionBlock" ? Math.min(6, (sectionDepth || 2) + 1) : sectionDepth
 ---
 
 {
-  block.type === "ApiDocumentationBlock" ? (
-    <ApiDocumentationBlock block={block} locale={locale} />
-  ) : block.type === "LivePreviewBlock" ? (
-    <LivePreviewBlock block={block} locale={locale} />
-  ) : block.type === "ParagraphBlock" ? (
-    <ParagraphBlock block={block} locale={locale} />
-  ) : block.type === "CalloutBlock" ? (
-    <CalloutBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </CalloutBlock>
-  ) : block.type === "ImageBlock" ? (
-    <ImageBlock block={block} locale={locale} />
-  ) : block.type === "CodeBlock" ? (
-    <CodeBlock block={block} locale={locale} />
-  ) : block.type === "TableBlock" ? (
-    <TableBlock block={block} locale={locale} />
-  ) : block.type === "TabsBlock" ? (
-    <TabsBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </TabsBlock>
-  ) : block.type === "TabItemBlock" ? (
-    <TabItemBlock block={block} locale={locale} index={index} isFirst={index === 0}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </TabItemBlock>
-  ) : block.type === "StepsBlock" ? (
-    <StepsBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </StepsBlock>
-  ) : block.type === "StepItemBlock" ? (
-    <StepItemBlock block={block} locale={locale} index={index}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+  Component ? (
+    <Component
+      block={block}
+      locale={locale}
+      sectionDepth={sectionDepth}
+      index={index}
+      components={components}
+    >
+      {children.map((child: BaseBlock, idx: number) => (
+        <Astro.self
+          block={child}
+          locale={locale}
+          sectionDepth={nextDepth}
+          index={idx}
+          components={components}
+        />
+      ))}
+    </Component>
+  ) : children.length > 0 ? (
+    <div>
+      {children.map((child: BaseBlock, idx: number) => (
+        <Astro.self
+          block={child}
+          locale={locale}
+          sectionDepth={sectionDepth}
+          index={idx}
+          components={components}
+        />
       ))}
-    </StepItemBlock>
-  ) : block.type === "CardsBlock" ? (
-    <CardsBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </CardsBlock>
-  ) : block.type === "CardBlock" ? (
-    <CardBlock block={block} locale={locale} />
-  ) : block.type === "FileTreeBlock" ? (
-    <FileTreeBlock block={block} locale={locale} />
-  ) : block.type === "UnorderedListBlock" ? (
-    <UnorderedListBlock block={block} locale={locale} />
-  ) : block.type === "OrderedListBlock" ? (
-    <OrderedListBlock block={block} locale={locale} />
-  ) : block.type === "ScriptBlock" ? (
-    <ScriptBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </ScriptBlock>
-  ) : block.type === "SceneBlock" ? (
-    <SceneBlock block={block} locale={locale}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
-      ))}
-    </SceneBlock>
-  ) : block.type === "DialogueBlock" ? (
-    <DialogueBlock block={block} locale={locale} />
-  ) : block.type === "SectionBlock" ? (
-    <SectionBlock block={block} locale={locale} sectionDepth={sectionDepth}>
-      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
-        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth + 1} index={idx} />
-      ))}
-    </SectionBlock>
-  ) : (
-    <div class="cms-block-fallback p-4 border border-dashed border-gray-700 rounded my-2 text-sm text-gray-400">
-      Unknown Block Type: {block.type}
     </div>
-  )
+  ) : null
 }
-

package/src/astro/PageRenderer.astro

@@ -9,15 +9,22 @@ interface Props {
   session?: UserSessionContext
   locale?: string
   class?: string
+  components?: Record<string, any>
 }
 
-const { blocks, session, locale = "en", class: className = "" } = Astro.props
+const {
+  blocks,
+  session,
+  locale = "en",
+  class: className = "",
+  components = {}
+} = Astro.props
 
 const sanitizedBlocks = filterBlocksForReader(blocks, session)
 ---
 
 <article class={`rimelight-cms-page ${className}`}>
   {sanitizedBlocks.map((block) => (
-    <BlockRenderer block={block} locale={locale} />
+    <BlockRenderer block={block} locale={locale} components={components} />
   ))}
 </article>

package/src/astro/blocks/CalloutBlock.astro

@@ -20,43 +20,43 @@ const variantConfigs: Record<
   info: {
     icon: "i-lucide-info",
     classes:
-      "bg-blue-50/50 dark:bg-blue-950/10 border-blue-200 dark:border-blue-900/50 text-blue-800 dark:text-blue-200",
+      "bg-info-50/50 border-info-200 text-info-800",
     label: "Info"
   },
   success: {
     icon: "i-lucide-check-circle",
     classes:
-      "bg-green-50/50 dark:bg-green-950/10 border-green-200 dark:border-green-900/50 text-green-800 dark:text-green-200",
+      "bg-success-50/50 border-success-200 text-success-800",
     label: "Success"
   },
   warning: {
     icon: "i-lucide-alert-triangle",
     classes:
-      "bg-yellow-50/50 dark:bg-yellow-950/10 border-yellow-200 dark:border-yellow-900/50 text-yellow-800 dark:text-yellow-200",
+      "bg-warning-50/50 border-warning-200 text-warning-800",
     label: "Warning"
   },
   error: {
     icon: "i-lucide-alert-octagon",
     classes:
-      "bg-red-50/50 dark:bg-red-950/10 border-red-200 dark:border-red-900/50 text-red-800 dark:text-red-200",
+      "bg-error-50/50 border-error-200 text-error-800",
     label: "Error"
   },
   commentary: {
     icon: "i-lucide-message-square",
     classes:
-      "bg-purple-50/50 dark:bg-purple-950/10 border-purple-200 dark:border-purple-900/50 text-purple-800 dark:text-purple-200",
+      "bg-ideation-50/50 border-ideation-200 text-ideation-800",
     label: "Commentary"
   },
   ideation: {
     icon: "i-lucide-lightbulb",
     classes:
-      "bg-amber-50/50 dark:bg-amber-950/10 border-amber-200 dark:border-amber-900/50 text-amber-800 dark:text-amber-200",
+      "bg-warning-50/50 border-warning-200 text-warning-800",
     label: "Ideation"
   },
   source: {
     icon: "i-lucide-code",
     classes:
-      "bg-indigo-50/50 dark:bg-indigo-950/10 border-indigo-200 dark:border-indigo-900/50 text-indigo-800 dark:text-indigo-200",
+      "bg-info-50/50 border-info-200 text-info-800",
     label: "Source"
   }
 }

package/src/astro/blocks/CardBlock.astro

@@ -13,30 +13,30 @@ const Tag = href ? "a" : "div"
 
 <Tag
   href={href}
-  class="cms-card group relative block p-5 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50 hover:border-primary-500/50 hover:shadow-md transition-all text-decoration-none no-underline"
+  class="cms-card group relative block p-5 rounded-xl border border-neutral-200 bg-elevated hover:border-primary-500/50 hover:shadow-md transition-all text-decoration-none no-underline"
   data-block-id={block.id}
 >
   <div class="flex items-start justify-between gap-2">
     <div class="flex items-center gap-3">
       {icon && (
-        <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+        <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-800 group-hover:bg-primary-50 group-hover:text-primary-600 transition-colors">
           <span class={`${icon} size-5`} aria-hidden="true" />
         </div>
       )}
       {title && (
-        <h4 class="text-base font-semibold text-neutral-900 dark:text-white m-0 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+        <h4 class="text-base font-semibold text-neutral-900 m-0 group-hover:text-primary-600 transition-colors">
           {title}
         </h4>
       )}
     </div>
     {badge && (
-      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300">
+      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral-100 text-neutral-700">
         {badge}
       </span>
     )}
   </div>
   {description && (
-    <p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400 m-0">
+    <p class="mt-3 text-sm text-neutral-600 m-0">
       {description}
     </p>
   )}

package/src/astro/blocks/CodeBlock.astro

@@ -10,7 +10,7 @@ const { block } = Astro.props
 const { code = "", language = "text" } = block.props
 ---
 
-<div class="cms-code my-4 rounded-lg bg-gray-950 p-4 font-mono text-sm border border-gray-800 overflow-x-auto" data-block-id={block.id}>
-  <div class="text-xs text-gray-500 uppercase mb-2 select-none">{language}</div>
+<div class="cms-code my-4 rounded-lg bg-neutral-950 p-4 font-mono text-sm border border-neutral-800 overflow-x-auto" data-block-id={block.id}>
+  <div class="text-xs text-neutral-500 uppercase mb-2 select-none">{language}</div>
   <pre class="m-0"><code>{code}</code></pre>
 </div>