@kyro-cms/admin 0.3.1 → 0.3.4

package/src/pages/preview/[collection]/[id].astro

@@ -1,15 +1,14 @@
 ---
-import AdminLayout from '../../../layouts/AdminLayout.astro';
-import {
-  renderRichText,
-  richTextStyles,
-} from "../../../../../src/fields/richtext.js";
-import { collections } from '@/lib/config';
+import AdminLayout from "../../../layouts/AdminLayout.astro";
+import { renderRichText, richTextStyles } from "@kyro-cms/core/client";
+import { collections } from "../../../lib/config";
+
+import { adminPath, apiPath } from "../../../lib/paths";
 
 const { collection, id } = Astro.params;
 
 if (!collection || !collections[collection]) {
-  return Astro.redirect('/');
+  return Astro.redirect(adminPath);
 }
 
 const config = collections[collection];
@@ -19,10 +18,13 @@ let error = null;
 
 if (id) {
   try {
-    const response = await fetch(`${Astro.url.origin}/api/${collection}/${id}`, {
-      headers: Astro.request.headers,
-      credentials: 'include'
-    });
+    const response = await fetch(
+      `${Astro.url.origin}${apiPath}/${collection}/${id}`,
+      {
+        headers: Astro.request.headers,
+        credentials: "include",
+      },
+    );
     if (response.ok) {
       const result = await response.json();
       doc = result.data || null;
@@ -30,34 +32,53 @@ if (id) {
       error = `Failed to load document: ${response.status}`;
     }
   } catch (e) {
-    error = 'Failed to fetch document';
+    error = "Failed to fetch document";
   }
 }
 
-const title = doc ? `Preview: ${doc.title || doc.name || doc.slug || id}` : 'Preview';
+const title = doc
+  ? `Preview: ${doc.title || doc.name || doc.slug || id}`
+  : "Preview";
 ---
 
 <AdminLayout title={title}>
   <Fragment set:html={`<style>${richTextStyles}</style>`} />
-  <div class="flex-1 overflow-y-auto p-8 space-y-6">
+  <div class="flex-1 overflow-y-auto space-y-6">
     <div class="surface-tile p-6 flex items-center justify-between">
       <div class="flex items-center gap-4">
         <a
-          href={`/${collection}/${id}`}
+          href={`${adminPath}/${collection}/${id}`}
           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
         >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d="M15 19l-7-7 7-7"></path>
           </svg>
         </a>
         <div>
-          <h1 class="text-xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Preview Mode</h1>
-          <p class="text-sm text-[var(--kyro-text-secondary)] mt-0.5">Showing draft content</p>
+          <h1
+            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+          >
+            Preview Mode
+          </h1>
+          <p class="text-sm text-[var(--kyro-text-secondary)] mt-0.5">
+            Showing draft content
+          </p>
         </div>
       </div>
       <div class="flex items-center gap-3">
-        <span class="px-3 py-1.5 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] text-xs font-bold rounded-lg border border-[var(--kyro-border)]">
-          {doc?.status || 'draft'}
+        <span
+          class="px-3 py-1.5 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] text-xs font-bold rounded-lg border border-[var(--kyro-border)]"
+        >
+          {doc?.status || "draft"}
         </span>
         <a
           href={`/${collection}/${id}`}
@@ -68,111 +89,155 @@ const title = doc ? `Preview: ${doc.title || doc.name || doc.slug || id}` : 'Pre
       </div>
     </div>
 
-    {error && (
-      <div class="surface-tile p-6 border border-red-500/30 bg-red-500/10">
-        <p class="text-red-400">{error}</p>
-      </div>
-    )}
+    {
+      error && (
+        <div class="surface-tile p-6 border border-red-500/30 bg-red-500/10">
+          <p class="text-red-400">{error}</p>
+        </div>
+      )
+    }
 
-    {doc && (
-      <div class="space-y-6">
-        {config.fields.map((field: any) => {
-          const value = doc[field.name];
-          if (value === undefined || value === null) return null;
+    {
+      doc && (
+        <div class="space-y-6">
+          {config.fields.map((field: any) => {
+            const value = doc[field.name];
+            if (value === undefined || value === null) return null;
 
-          return (
-            <div class="surface-tile p-6">
-              <h3 class="text-xs font-bold text-[var(--kyro-text-muted)] uppercase tracking-[0.15em] mb-3">
-                {field.label || field.name}
-              </h3>
-              <div class="text-sm text-[var(--kyro-text-primary)]">
-                {field.type === 'text' && (
-                  <p class="whitespace-pre-wrap">{value}</p>
-                )}
-                {field.type === 'textarea' && (
-                  <p class="whitespace-pre-wrap">{value}</p>
-                )}
-                {field.type === 'richtext' && (
-                  <div set:html={renderRichText(value)} />
-                )}
-                {field.type === 'markdown' && (
-                  <div class="prose prose-sm max-w-none">
-                    <pre class="whitespace-pre-wrap bg-transparent p-0">{value}</pre>
-                  </div>
-                )}
-                {field.type === 'number' && (
-                  <p>{value}</p>
-                )}
-                {field.type === 'boolean' && (
-                  <span class={value ? 'text-green-400' : 'text-red-400'}>{value ? 'Yes' : 'No'}</span>
-                )}
-                {field.type === 'select' && (
-                  <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs">{value}</span>
-                )}
-                {field.type === 'date' && (
-                  <p>{new Date(value).toLocaleString()}</p>
-                )}
-                {field.type === 'upload' && value.url && (
-                  <div>
-                    {value.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
-                      <img src={value.url} alt={value.filename || 'Image'} class="max-w-md rounded-lg border border-[var(--kyro-border)]" />
-                    ) : (
-                      <a href={value.url} class="text-blue-400 hover:underline">{value.filename || 'Download'}</a>
-                    )}
-                  </div>
-                )}
-                {field.type === 'gallery' && Array.isArray(value) && (
-                  <div class="grid grid-cols-4 gap-3">
-                    {value.map((item: any, idx: number) => (
-                      item?.url ? (
-                        item.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
-                          <img key={idx} src={item.url} alt={item.filename || `Image ${idx + 1}`} class="w-full h-24 object-cover rounded-lg border border-[var(--kyro-border)]" />
-                        ) : (
-                          <div key={idx} class="h-24 flex items-center justify-center bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] text-xs">
-                            {item.filename || 'File'}
-                          </div>
-                        )
-                      ) : null
-                    ))}
-                  </div>
-                )}
-                {field.type === 'array' && Array.isArray(value) && (
-                  <div class="space-y-2">
-                    {value.map((item: any, idx: number) => (
-                      <div key={idx} class="p-3 bg-[var(--kyro-surface-accent)] rounded border border-[var(--kyro-border)] text-xs">
-                        {Object.entries(item).filter(([k, v]) => v !== undefined).map(([k, v]) => (
-                          <div key={k} class="flex gap-2">
-                            <span class="text-[var(--kyro-text-muted)]">{k}:</span>
-                            <span>{typeof v === 'object' ? JSON.stringify(v) : String(v)}</span>
-                          </div>
-                        ))}
-                      </div>
-                    ))}
-                  </div>
-                )}
-                {field.type === 'relationship' && (
-                  <p class="text-[var(--kyro-text-secondary)]">{value.title || value.name || value.slug || JSON.stringify(value)}</p>
-                )}
-                {field.type === 'json' && (
-                  <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">{JSON.stringify(value, null, 2)}</pre>
-                )}
-                {field.type === 'code' && (
-                  <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">{value}</pre>
-                )}
-                {(!field.type || ['text', 'string'].includes(field.type)) && (
-                  <p>{value}</p>
-                )}
+            return (
+              <div class="surface-tile p-6">
+                <h3 class="text-xs font-bold text-[var(--kyro-text-muted)]  tracking-[0.15em] mb-3">
+                  {field.label || field.name}
+                </h3>
+                <div class="text-sm text-[var(--kyro-text-primary)]">
+                  {field.type === "text" && (
+                    <p class="whitespace-pre-wrap">{value}</p>
+                  )}
+                  {field.type === "textarea" && (
+                    <p class="whitespace-pre-wrap">{value}</p>
+                  )}
+                  {field.type === "richtext" && (
+                    <div set:html={renderRichText(value)} />
+                  )}
+                  {field.type === "markdown" && (
+                    <div class="prose prose-sm max-w-none">
+                      <pre class="whitespace-pre-wrap bg-transparent p-0">
+                        {value}
+                      </pre>
+                    </div>
+                  )}
+                  {field.type === "number" && <p>{value}</p>}
+                  {field.type === "boolean" && (
+                    <span class={value ? "text-green-400" : "text-red-400"}>
+                      {value ? "Yes" : "No"}
+                    </span>
+                  )}
+                  {field.type === "select" && (
+                    <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs">
+                      {value}
+                    </span>
+                  )}
+                  {field.type === "date" && (
+                    <p>{new Date(value).toLocaleString()}</p>
+                  )}
+                  {field.type === "upload" && value.url && (
+                    <div>
+                      {value.url.match(
+                        /\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i,
+                      ) ? (
+                        <img
+                          src={value.url}
+                          alt={value.filename || "Image"}
+                          class="max-w-md rounded-lg border border-[var(--kyro-border)]"
+                        />
+                      ) : (
+                        <a
+                          href={value.url}
+                          class="text-blue-400 hover:underline"
+                        >
+                          {value.filename || "Download"}
+                        </a>
+                      )}
+                    </div>
+                  )}
+                  {field.type === "gallery" && Array.isArray(value) && (
+                    <div class="grid grid-cols-4 gap-3">
+                      {value.map((item: any, idx: number) =>
+                        item?.url ? (
+                          item.url.match(
+                            /\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i,
+                          ) ? (
+                            <img
+                              src={item.url}
+                              alt={item.filename || `Image ${idx + 1}`}
+                              class="w-full h-24 object-cover rounded-lg border border-[var(--kyro-border)]"
+                            />
+                          ) : (
+                            <div class="h-24 flex items-center justify-center bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] text-xs">
+                              {item.filename || "File"}
+                            </div>
+                          )
+                        ) : null,
+                      )}
+                    </div>
+                  )}
+                  {field.type === "array" && Array.isArray(value) && (
+                    <div class="space-y-2">
+                      {value.map((item: any) => (
+                        <div class="p-3 bg-[var(--kyro-surface-accent)] rounded border border-[var(--kyro-border)] text-xs">
+                          {Object.entries(item)
+                            .filter(([, v]) => v !== undefined)
+                            .map(([k, v]) => (
+                              <div class="flex gap-2">
+                                <span class="text-[var(--kyro-text-muted)]">
+                                  {k}:
+                                </span>
+                                <span>
+                                  {typeof v === "object"
+                                    ? JSON.stringify(v)
+                                    : String(v)}
+                                </span>
+                              </div>
+                            ))}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {field.type === "relationship" && (
+                    <p class="text-[var(--kyro-text-secondary)]">
+                      {value.title ||
+                        value.name ||
+                        value.slug ||
+                        JSON.stringify(value)}
+                    </p>
+                  )}
+                  {field.type === "json" && (
+                    <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">
+                      {JSON.stringify(value, null, 2)}
+                    </pre>
+                  )}
+                  {field.type === "code" && (
+                    <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">
+                      {value}
+                    </pre>
+                  )}
+                  {(!field.type || ["text", "string"].includes(field.type)) && (
+                    <p>{value}</p>
+                  )}
+                </div>
               </div>
-            </div>
-          );
-        })}
-      </div>
-    )}
+            );
+          })}
+        </div>
+      )
+    }
 
-    {!doc && !error && (
-      <div class="surface-tile p-6">
-        <p class="text-[var(--kyro-text-muted)]">Document not found</p>
-      </div>
-    )}
+    {
+      !doc && !error && (
+        <div class="surface-tile p-6">
+          <p class="text-[var(--kyro-text-muted)]">Document not found</p>
+        </div>
+      )
+    }
   </div>
 </AdminLayout>

package/src/pages/rest-playground.astro

@@ -0,0 +1,62 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { RestPlayground } from "../components/RestPlayground";
+
+import { adminPath, apiPath } from "../lib/paths";
+
+const collectionsResponse = await fetch(
+  `${Astro.url.origin}${apiPath}/collections`,
+);
+const collectionsData = await collectionsResponse.json();
+const collections = collectionsData.collections || [];
+---
+
+<AdminLayout title="REST Playground">
+  <div class="flex-1 overflow-hidden">
+    <!-- Header -->
+    <div class="mb-6 surface-tile">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1
+            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+          >
+            REST Playground
+          </h1>
+          <p
+            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
+          >
+            Saved collections, history, and environment variables
+          </p>
+        </div>
+        <div class="flex items-center gap-4">
+          <a
+            href={`${adminPath}/api-explorer`}
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              ></path>
+            </svg>
+            Explorer
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Playground Container -->
+    <div class="h-[calc(100vh-200px)] surface-tile overflow-hidden">
+      <div class="surface-tile h-full overflow-hidden">
+        <RestPlayground client:load collections={collections} />
+      </div>
+    </div>
+  </div>
+</AdminLayout>