@rimelight/cms 0.0.9 → 0.0.11

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

@@ -1,11 +1,13 @@
 ---
 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 RLATable from "@rimelight/ui/components/table/RLATable.astro";
+import type { TableColumn, TableRow } from "@rimelight/ui/components/table/table.ts";
 import { db } from "virtual:rimelight-cms/db";
 import { pageTemplates } from "../../schema/page_templates.ts";
 import { desc } from "drizzle-orm";
 import { getRelativeLocaleUrl } from "@rimelight/i18n";
+import { ensureDefaultTemplates } from "../../services/template-seeder.ts";
 
 export const prerender = false;
 
@@ -14,6 +16,9 @@ const currentLocale = Astro.currentLocale ?? "en";
 let templates: any[] = [];
 if (db) {
   try {
+    // Auto-seed default starter templates if table is empty
+    await ensureDefaultTemplates(db, pageTemplates);
+
     templates = await db
       .select()
       .from(pageTemplates)
@@ -22,74 +27,239 @@ if (db) {
     console.warn("Failed to fetch templates:", err);
   }
 }
+
+// Format template rows
+const formattedTemplates = templates.map((tmpl) => {
+  let titleStr = "";
+  if (typeof tmpl.title === "object" && tmpl.title !== null) {
+    const titleObj = tmpl.title as Record<string, string>;
+    titleStr = titleObj[currentLocale] || titleObj["en"] || (Object.values(titleObj)[0] as string | undefined) || "";
+  } else {
+    titleStr = String(tmpl.title || "Untitled Template");
+  }
+
+  let descStr = "";
+  if (typeof tmpl.description === "object" && tmpl.description !== null) {
+    descStr = (tmpl.description as Record<string, string>)[currentLocale] || (tmpl.description as Record<string, string>)["en"] || "";
+  } else if (tmpl.description) {
+    descStr = String(tmpl.description);
+  }
+
+  const pageType = String(tmpl.pageType || "page").toLowerCase();
+  const initialBlocksCount = Array.isArray(tmpl.initialBlocks) ? tmpl.initialBlocks.length : 0;
+  const propertiesCount = tmpl.defaultProperties ? Object.keys(tmpl.defaultProperties).length : 0;
+
+  return {
+    id: tmpl.id,
+    slug: tmpl.slug || "",
+    title: titleStr,
+    description: descStr,
+    pageType,
+    version: tmpl.version || 1,
+    initialBlocksCount,
+    propertiesCount,
+    createdAt: tmpl.createdAt ? new Date(tmpl.createdAt) : new Date(),
+    updatedAt: tmpl.updatedAt ? new Date(tmpl.updatedAt) : new Date()
+  };
+});
+
+const typeCounts: Record<string, number> = {};
+for (const t of formattedTemplates) {
+  typeCounts[t.pageType] = (typeCounts[t.pageType] || 0) + 1;
+}
+
+function getTypeBadgeColor(type: string): "primary" | "secondary" | "success" | "warning" | "error" | "neutral" {
+  switch (type) {
+    case "blog":
+      return "primary";
+    case "doc":
+    case "documentation":
+      return "secondary";
+    case "legal":
+    case "policy":
+      return "warning";
+    case "wiki":
+    case "species":
+      return "success";
+    case "character":
+    case "hero":
+      return "primary";
+    case "series":
+      return "secondary";
+    case "item":
+    case "location":
+      return "warning";
+    case "patchnote":
+    case "announcement":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+
+function getTypeIcon(type: string): string {
+  switch (type) {
+    case "blog":
+      return "i-lucide-newspaper";
+    case "doc":
+    case "documentation":
+      return "i-lucide-book-open";
+    case "character":
+    case "hero":
+      return "i-lucide-user";
+    case "series":
+      return "i-lucide-clapperboard";
+    case "location":
+      return "i-lucide-map-pin";
+    case "item":
+      return "i-lucide-package";
+    case "species":
+      return "i-lucide-dna";
+    case "skill":
+      return "i-lucide-sparkles";
+    case "patchnote":
+      return "i-lucide-file-code";
+    default:
+      return "i-lucide-layout-template";
+  }
+}
+
+const templateColumns: TableColumn<any>[] = [
+  {
+    accessorKey: "title",
+    header: "Template & Slug",
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const tmpl = row.original;
+      return `<div class="flex items-start gap-3 py-1">
+        <div class="mt-0.5 size-8 rounded-lg bg-elevated border border-default text-muted flex items-center justify-center shrink-0">
+          <span class="${getTypeIcon(tmpl.pageType)} size-4"></span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <a href="${getRelativeLocaleUrl(currentLocale, `/cms/templates/${tmpl.id}/edit`)}" class="font-semibold text-highlighted hover:text-primary transition-colors text-sm truncate block" title="${tmpl.title}">
+            ${tmpl.title}
+          </a>
+          <div class="flex items-center gap-2 mt-1">
+            <span class="font-mono text-xs text-muted bg-elevated px-1.5 py-0.5 rounded border border-default/60 truncate max-w-xs">
+              ${tmpl.slug}
+            </span>
+          </div>
+          ${tmpl.description ? `<p class="text-xs text-muted/80 mt-1 line-clamp-1 max-w-md">${tmpl.description}</p>` : ''}
+        </div>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "pageType",
+    header: "Page Type",
+    size: 140,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const tmpl = row.original;
+      const color = getTypeBadgeColor(tmpl.pageType);
+      return `<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wider bg-${color}-500/10 text-${color}-500 border border-${color}-500/20">${tmpl.pageType}</span>`;
+    }
+  },
+  {
+    id: "specs",
+    header: "Schema Specs",
+    size: 160,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const tmpl = row.original;
+      return `<div class="flex items-center gap-2 text-xs text-muted font-mono">
+        <span>${tmpl.initialBlocksCount} ${tmpl.initialBlocksCount === 1 ? "block" : "blocks"}</span>
+        <span class="opacity-40">•</span>
+        <span>${tmpl.propertiesCount} ${tmpl.propertiesCount === 1 ? "prop" : "props"}</span>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "version",
+    header: "Version",
+    size: 100,
+    cell: ({ row }: { row: TableRow<any> }) => `<span class="px-2 py-0.5 rounded bg-elevated border border-default text-highlighted font-semibold text-xs font-mono">v${row.getValue("version")}</span>`
+  },
+  {
+    id: "actions",
+    actions: (row: TableRow<any>) => [
+      {
+        label: "Create Page",
+        icon: "i-lucide-plus",
+        to: getRelativeLocaleUrl(currentLocale, `/cms/pages/new?templateId=${row.original.id}`)
+      },
+      {
+        label: "Edit Template",
+        icon: "i-lucide-pencil",
+        to: getRelativeLocaleUrl(currentLocale, `/cms/templates/${row.original.id}/edit`)
+      },
+      {
+        type: "separator" as const
+      },
+      {
+        label: "Delete Template",
+        icon: "i-lucide-trash-2",
+        color: "error" as const,
+        id: `delete-tmpl-${row.original.id}`
+      }
+    ]
+  }
+];
 ---
 
-<CMSDashboardLayout title="Templates" description="Manage CMS templates" activeSection="templates">
+<CMSDashboardLayout title="Templates" description="Manage page templates, property schemas, and starter blocks" activeSection="templates">
   <Fragment slot="toolbar-right">
-    <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates/new")} variant="solid" color="primary" leadingIcon="i-lucide-plus">
-      Create Template
-    </RLAButton>
+    <div class="flex items-center gap-2">
+      <RLAButton
+        href={getRelativeLocaleUrl(currentLocale, "/cms/pages")}
+        variant="outline"
+        color="neutral"
+        size="sm"
+        leadingIcon="i-lucide-files"
+      >
+        Pages
+      </RLAButton>
+      <RLAButton
+        href={getRelativeLocaleUrl(currentLocale, "/cms/templates/new")}
+        variant="solid"
+        color="primary"
+        size="sm"
+        leadingIcon="i-lucide-plus"
+      >
+        Create Template
+      </RLAButton>
+    </div>
   </Fragment>
 
-  <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">Name</th>
-          <th class="px-6 py-3">Type</th>
-          <th class="px-6 py-3">Version</th>
-          <th class="px-6 py-3 text-right">Actions</th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-default/50">
-        {templates.map((template: any) => (
-          <tr class="hover:bg-elevated/50 transition">
-            <td class="px-6 py-4 whitespace-nowrap">
-              <div class="text-sm font-medium text-highlighted">{template.title}</div>
-              <div class="text-xs font-mono text-muted">{template.slug}</div>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <RLABadge variant="soft" color="primary" size="xs">{template.pageType}</RLABadge>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono text-muted">
-              v{template.version}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-right flex items-center justify-end gap-2">
-              <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/pages/new?templateId=${template.id}`)} variant="ghost" color="primary" size="xs">
-                Create Page
-              </RLAButton>
-              <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/templates/${template.id}/edit`)} variant="ghost" color="neutral" size="xs">
-                Edit
-              </RLAButton>
-              <RLAButton variant="ghost" color="error" size="xs" class="delete-template-btn" data-id={template.id}>
-                Delete
-              </RLAButton>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+  <div class="flex flex-col gap-4">
+    <RLATable
+      data={formattedTemplates}
+      columns={templateColumns}
+      striped
+      hoverable
+      searchable
+      showColumnsToggle
+      exportable
+      exportFilename="rimelight-templates-export"
+    />
   </div>
 
   <script>
-    document.querySelectorAll('.delete-template-btn').forEach((btn) => {
-      btn.addEventListener('click', async () => {
-        const id = (btn as HTMLElement).dataset["id"];
-        if (!id) return;
-
-        if (!confirm('Are you sure you want to delete this template?')) return;
-
+    document.addEventListener("click", async (e) => {
+      const target = e.target as HTMLElement;
+      const deleteItem = target.closest<HTMLElement>("[data-item-id^='delete-tmpl-']");
+      if (deleteItem) {
+        const templateId = deleteItem.getAttribute("data-item-id")?.replace("delete-tmpl-", "") || "";
+        if (!templateId) return;
+        if (!confirm("Are you sure you want to delete this template? This will not delete existing pages created with this template.")) return;
         try {
-          const res = await fetch(`/api/cms/templates/${id}`, { method: 'DELETE' });
+          const res = await fetch(`/api/cms/templates/${templateId}`, { method: "DELETE" });
           if (res.ok) {
             window.location.reload();
           } else {
-            alert('Failed to delete template');
+            alert("Failed to delete template");
           }
         } catch {
-          alert('Network error deleting template');
+          alert("Network error deleting template");
         }
-      });
+      }
     });
   </script>
 </CMSDashboardLayout>

package/src/admin/pages/users.astro

@@ -1,10 +1,8 @@
 ---
 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";
+import type { TableColumn, TableRow } from "@rimelight/ui/components/table/table.ts";
 
 export const prerender = false;
 
@@ -15,60 +13,108 @@ const users = [
   { 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" } } }
+const userColumns: TableColumn<any>[] = [
+  {
+    accessorKey: "name",
+    header: "User",
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const user = row.original;
+      return `<div class="flex items-center gap-3 py-1">
+        <div class="size-8 rounded-full bg-primary/10 text-primary font-bold text-xs flex items-center justify-center border border-primary/20 shrink-0">
+          ${user.name.slice(0, 2).toUpperCase()}
+        </div>
+        <div class="flex flex-col min-w-0">
+          <span class="font-medium text-highlighted text-sm truncate">${user.name}</span>
+          <span class="text-xs text-muted font-normal truncate">${user.email}</span>
+        </div>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "role",
+    header: "Role",
+    size: 150,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const user = row.original;
+      const roleColor = user.role === "Super Admin" ? "primary" : user.role === "Editor" ? "secondary" : "neutral";
+      return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
+        roleColor === 'primary' ? 'bg-primary/10 text-primary border-primary/20' :
+        roleColor === 'secondary' ? 'bg-secondary/10 text-secondary border-secondary/20' :
+        'bg-muted/10 text-muted border-default'
+      }">${user.role}</span>`;
+    }
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    size: 130,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const user = row.original;
+      if (user.status === "active") {
+        return `<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500 border border-emerald-500/20">
+          <span class="size-1.5 rounded-full bg-emerald-500"></span>
+          <span>Active</span>
+        </div>`;
+      }
+      return `<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-500 border border-amber-500/20">
+        <span class="size-1.5 rounded-full bg-amber-500"></span>
+        <span>Invited</span>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "lastActive",
+    header: "Last Active",
+    size: 140,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const user = row.original;
+      return `<span class="text-xs text-muted">${user.lastActive}</span>`;
+    }
+  },
+  {
+    id: "actions",
+    actions: (row: TableRow<any>) => [
+      {
+        label: "Edit Role & Permissions",
+        icon: "i-lucide-shield-check",
+        id: `edit-role-${row.original.id}`
+      },
+      {
+        label: "View Activity Log",
+        icon: "i-lucide-activity",
+        id: `activity-${row.original.id}`
+      },
+      {
+        type: "separator" as const
+      },
+      {
+        label: "Remove Member",
+        icon: "i-lucide-trash-2",
+        color: "error" as const,
+        id: `remove-${row.original.id}`
+      }
+    ]
+  }
 ];
 ---
 
 <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">
+    <RLAButton variant="solid" color="primary" size="sm" 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>
+  <div class="flex flex-col gap-4">
+    <RLATable
+      data={users}
+      columns={userColumns}
+      striped
+      hoverable
+      searchable
+      showColumnsToggle
+      exportable
+      exportFilename="rimelight-users-export"
+    />
+  </div>
 </CMSDashboardLayout>

package/src/admin/pages/versions.astro

@@ -1,6 +1,7 @@
 ---
 import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
-import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import RLATable from "@rimelight/ui/components/table/RLATable.astro";
+import type { TableColumn, TableRow } from "@rimelight/ui/components/table/table.ts";
 import { db } from "virtual:rimelight-cms/db";
 import { pageVersions, pages } from "../../schema";
 import { desc, eq } from "drizzle-orm";
@@ -31,44 +32,55 @@ if (db) {
     console.warn("Failed to fetch versions:", err);
   }
 }
+
+const columns: TableColumn<any>[] = [
+  {
+    accessorKey: "pageTitle",
+    header: "Page",
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const v = row.original;
+      return `<div>
+        <div class="text-sm font-semibold text-highlighted">${v.pageTitle}</div>
+        <div class="text-xs font-mono text-muted">/${v.slug}</div>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "versionNumber",
+    header: "Version",
+    size: 110,
+    cell: ({ row }: { row: TableRow<any> }) => `<span class="font-mono text-xs text-muted font-bold">v${row.getValue("versionNumber")}</span>`
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    size: 140,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const st = row.getValue("status");
+      const color = st === "published" ? "success" : st === "pending" ? "warning" : "neutral";
+      return `<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold capitalize bg-${color}-500/10 text-${color}-500 border border-${color}-500/20">${st}</span>`;
+    }
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Created",
+    size: 150,
+    cell: ({ row }: { row: TableRow<any> }) => `<span class="text-xs text-muted font-mono">${new Date(row.getValue("createdAt")).toLocaleDateString(currentLocale)}</span>`
+  }
+];
 ---
 
 <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 class="flex flex-col gap-4">
+    <RLATable
+      data={versions}
+      columns={columns}
+      striped
+      hoverable
+      searchable
+      showColumnsToggle
+      exportable
+      exportFilename="rimelight-versions-export"
+    />
   </div>
 </CMSDashboardLayout>

package/src/astro/blocks/DialogueBlock.astro

@@ -0,0 +1,25 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { character = "CHARACTER", parenthetical, line = "" } = block.props || {}
+---
+
+<div class="cms-dialogue-block max-w-xl mx-auto my-3 font-mono text-sm text-center" data-block-id={block.id}>
+  <div class="font-bold tracking-wider uppercase text-neutral-900 dark:text-neutral-100">
+    {character}
+  </div>
+  {parenthetical && (
+    <div class="text-xs italic text-neutral-500 dark:text-neutral-400">
+      ({parenthetical})
+    </div>
+  )}
+  <div class="text-left text-neutral-800 dark:text-neutral-200 mt-1 max-w-md mx-auto leading-relaxed">
+    {line}
+  </div>
+</div>

package/src/astro/blocks/LivePreviewBlock.astro

@@ -0,0 +1,33 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { componentCode = "", framework = "astro", height = "300px", width = "100%", editable = false } = block.props || {}
+---
+
+<div
+  class="cms-live-preview-block my-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-900 overflow-hidden shadow-sm"
+  data-block-id={block.id}
+>
+  <div class="flex items-center justify-between px-4 py-2 bg-neutral-950/80 border-b border-neutral-800 text-xs text-neutral-400">
+    <div class="flex items-center gap-2">
+      <span class="size-2 rounded-full bg-emerald-500 animate-pulse"></span>
+      <span class="font-mono uppercase font-semibold text-neutral-300">Preview ({framework})</span>
+    </div>
+    {editable && <span class="text-xs text-neutral-500">Interactive</span>}
+  </div>
+
+  <div
+    class="p-6 bg-neutral-900 flex items-center justify-center min-h-[160px] overflow-auto"
+    style={{ height, width }}
+  >
+    <div class="text-xs text-neutral-400 font-mono bg-neutral-950/60 p-4 rounded-xl border border-neutral-800 max-w-full overflow-auto">
+      <pre><code>{componentCode}</code></pre>
+    </div>
+  </div>
+</div>