@kyro-cms/admin 0.9.5 → 0.9.6

package/src/components/blocks/AccordionBlock.tsx

@@ -51,7 +51,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ArrayBlock.tsx

@@ -47,7 +47,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ChildBlocksTree.tsx

@@ -165,7 +165,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                   handleRemoveChild(child.id);
                   setConfirmDeleteId(null);
                 }}
-                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                className="px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded"
               >
                 Remove
               </button>
@@ -184,9 +184,9 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                 e.stopPropagation();
                 setConfirmDeleteId(child.id);
               }}
-              className="p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-red-50"
+              className="p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]"
             >
-              <X className="w-3.5 h-3.5 text-red-500 invisible group-hover/column:visible" />
+              <X className="w-3.5 h-3.5 text-[var(--kyro-danger)] invisible group-hover/column:visible" />
             </button>
           )}
         </div>
@@ -445,7 +445,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                   handleRemoveChild(child.id);
                   setConfirmDeleteId(null);
                 }}
-                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                className="px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded"
               >
                 Remove
               </button>
@@ -464,9 +464,9 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                 e.stopPropagation();
                 setConfirmDeleteId(child.id);
               }}
-              className="p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-red-50"
+              className="p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]"
             >
-              <X className="w-3.5 h-3.5 text-red-500" />
+              <X className="w-3.5 h-3.5 text-[var(--kyro-danger)]" />
             </button>
           )}
         </div>

package/src/components/blocks/CodeBlock.tsx

@@ -47,7 +47,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
             <button
               type="button"
               onClick={() => removeBlock(block.id)}
-              className="p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500"
+              className="p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]"
               title="Remove"
             >
               <X className="w-4 h-4" />

package/src/components/blocks/FileBlock.tsx

@@ -45,7 +45,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/HeroBlock.tsx

@@ -50,7 +50,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ListBlock.tsx

@@ -46,7 +46,7 @@ export const ListBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/RelationshipBlock.tsx

@@ -50,7 +50,7 @@ export const RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/RichTextBlock.tsx

@@ -48,7 +48,7 @@ export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/VideoBlock.tsx

@@ -45,7 +45,7 @@ export const VideoBlock: React.FC<{ block: Record<string, unknown>; index: numbe
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/fields/BlocksField.tsx

@@ -138,7 +138,7 @@ const SortableBlockComponent = ({
                   removeBlock(block.id as string);
                   setShowDeleteConfirm(false);
                 }}
-                className="px-1.5 py-0.5 text-[9px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+                className="px-1.5 py-0.5 text-[9px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90"
               >
                 Remove
               </button>
@@ -169,7 +169,7 @@ const SortableBlockComponent = ({
                   e.stopPropagation();
                   setShowDeleteConfirm(true);
                 }}
-                className="p-0.5 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+                className="p-0.5 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
                 title="Remove"
               >
                 <X className="w-3 h-3" />
@@ -245,7 +245,7 @@ const SortableBlockComponent = ({
                 removeBlock(block.id as string);
                 setShowDeleteConfirm(false);
               }}
-              className="px-2.5 py-1 text-[10px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+              className="px-2.5 py-1 text-[10px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90"
             >
               Remove
             </button>
@@ -276,7 +276,7 @@ const SortableBlockComponent = ({
                 e.stopPropagation();
                 setShowDeleteConfirm(true);
               }}
-              className="p-1 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+              className="p-1 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
               title="Remove Block"
             >
               <X className="w-3.5 h-3.5" />
@@ -526,7 +526,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
   // Render active drag overlay
   const activeBlock = activeDrag
-    ? blockCategories
+    ? dynamicCategories
       .flatMap((cat) => cat.blocks)
       .find((b) => `drawer-${b.type}` === activeDrag.id) ||
     blocks.find((b) => b.id === activeDrag.id)

package/src/components/ui/Toast.tsx

@@ -52,6 +52,7 @@ export function Toast({ type, message, onClose }: ToastProps) {
       onMouseEnter={() => setIsPaused(true)}
       onMouseLeave={() => setIsPaused(false)}
     >
+      <div className="kyro-toast-accent" />
       <div className="kyro-toast-icon-container">
         <Icon className="w-4 h-4" />
       </div>
@@ -60,7 +61,7 @@ export function Toast({ type, message, onClose }: ToastProps) {
       </div>
       <button 
         type="button" 
-        className="kyro-toast-close" 
+        className="kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity" 
         onClick={onClose}
       >
         <X className="w-3.5 h-3.5" />

package/src/layouts/AdminLayout.astro

@@ -214,17 +214,19 @@ if (includeSiteName) {
       const toggleSidebar = () => {
         if (!sidebar) return;
         const isOpen = sidebar.classList.contains("translate-x-0");
+        const fab = document.getElementById("kyro-fab");
         if (isOpen) {
           sidebar.classList.remove("translate-x-0");
           sidebar.classList.add("-translate-x-full");
           backdrop?.classList.remove("opacity-100");
           setTimeout(() => backdrop?.classList.add("hidden"), 300);
+          fab?.classList.remove("fab-hidden");
         } else {
           sidebar.classList.remove("-translate-x-full");
           sidebar.classList.add("translate-x-0");
           backdrop?.classList.remove("hidden");
-          // small delay to allow display:block to apply before opacity transition
           setTimeout(() => backdrop?.classList.add("opacity-100"), 10);
+          fab?.classList.add("fab-hidden");
         }
       };
 
@@ -291,6 +293,19 @@ if (includeSiteName) {
     <!-- Toast Notifications (React) -->
     <Toaster client:only="react" />
 
+    <!-- Floating Command Palette Trigger -->
+    <button
+      id="kyro-fab"
+      type="button"
+      onclick="window.openCommandPalette?.()"
+      class="fixed bottom-6 right-6 z-50 w-12 h-12 flex md:hidden items-center justify-center rounded-2xl bg-[var(--kyro-primary)] text-white shadow-lg shadow-[var(--kyro-primary)]/30 hover:shadow-xl hover:shadow-[var(--kyro-primary)]/40 hover:scale-110 active:scale-95 transition-all duration-200"
+      title="Open command palette (Cmd+K)"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+      </svg>
+    </button>
+
     <!-- Theme UI Logic -->
     <script is:inline define:vars={{ adminPath, apiPath }}>
       const lightBtn = document.getElementById("theme-light-btn");

package/src/pages/graphql-explorer.astro

@@ -1,59 +1,15 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 ---
 
 <AdminLayout title="GraphQL Explorer">
-  <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)]"
-          >
-            GraphQL Explorer
-          </h1>
-          <p
-            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
-          >
-            Schema documentation and type explorer
-          </p>
-        </div>
-        <div class="flex items-center gap-4">
-          <a
-            href={`${adminPath}/graphql`}
-            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="M13 10V3L4 14h7v7l9-11h-7z"></path>
-            </svg>
-            Playground
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- Explorer Container -->
-    <div class="h-[calc(100vh-200px)] surface-tile overflow-hidden">
-      <div class="surface-tile h-full overflow-hidden">
-        <GraphQLPlayground
-          client:load
-          endpoint={`${apiPath}/graphql`}
-          initialShowDocs={true}
-        />
-      </div>
-    </div>
+  <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <GraphQLPlayground
+      client:load
+      endpoint={`${apiPath}/graphql`}
+      initialShowDocs={true}
+    />
   </div>
 </AdminLayout>

package/src/pages/graphql.astro

@@ -1,8 +1,7 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 
 const url = Astro.request.url;
 const params = new URL(url).searchParams;
@@ -10,122 +9,11 @@ const initialQuery = params.get("query") || "";
 ---
 
 <AdminLayout title="GraphQL 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)]"
-          >
-            GraphQL Playground
-          </h1>
-          <p
-            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
-          >
-            Interactive GraphQL query editor and explorer
-          </p>
-        </div>
-        <div class="flex items-center gap-4">
-          <a
-            href={`${adminPath}/graphql-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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-              ></path>
-            </svg>
-            Explorer
-          </a>
-          <div
-            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]"
-          >
-            <div class="w-2 h-2 rounded-full bg-green-500"></div>
-            <span class="text-sm font-medium text-[var(--kyro-text-primary)]"
-              >API Active</span
-            >
-          </div>
-          <a
-            href={`${apiPath}/graphql`}
-            target="_blank"
-            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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              ></path>
-            </svg>
-            Open Endpoint
-          </a>
-        </div>
-      </div>
-
-      <!-- Quick Examples -->
-      <div class="flex flex-wrap gap-2">
-        <button
-          onclick="copyToClipboard('{ __schema { types { name } } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Introspection
-        </button>
-        <button
-          onclick="copyToClipboard('{ collections { slug name } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Collections
-        </button>
-        <button
-          onclick="copyToClipboard('{ ping }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Ping
-        </button>
-        <button
-          onclick="copyToClipboard('{ posts(page: 1, limit: 10) { docs { id title slug } totalDocs } }')"
-          class="px-3 py-1.5 text-xs font-bold text-[var(--kyro-text-secondary)] bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
-        >
-          Posts Query
-        </button>
-      </div>
-    </div>
-
-    <!-- GraphQL Playground Container -->
-    <div class="h-[calc(100vh-280px)] overflow-hidden surface-tile">
-      <GraphQLPlayground
-        client:load
-        endpoint={`${apiPath}/graphql`}
-        initialQuery={initialQuery}
-      />
-    </div>
+  <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <GraphQLPlayground
+      client:load
+      endpoint={`${apiPath}/graphql`}
+      initialQuery={initialQuery}
+    />
   </div>
-
-  <script is:inline>
-    function copyToClipboard(text) {
-      navigator.clipboard.writeText(text);
-    }
-  </script>
-
-  <style is:global>
-    /* Ensure proper styling for textarea editors */
-    .graphiql-container textarea {
-      font-family: var(--font-mono) !important;
-    }
-  </style>
 </AdminLayout>

package/src/pages/index.astro

@@ -13,7 +13,7 @@ const authItems = authCollections.map((slug) => ({
 ---
 
 <AdminLayout title="Dashboard">
-  <div class="flex-1 overflow-y-auto  space-y-8">
+  <div class="flex-1 overflow-y-auto space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6 flex items-center justify-between gap-8">
       <div class="relative flex-1 max-w-2xl">
@@ -281,36 +281,7 @@ const authItems = authCollections.map((slug) => ({
               </p>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <a
-              href={`${adminPath}/api-explorer`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-green-500/10 flex items-center justify-center text-green-500 group-hover:scale-110 transition-transform"
-                >
-                  <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                  </svg>
-                </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Explorer
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Test endpoints interactively
-              </p>
-            </a>
+          <div class="grid grid-cols-1 gap-4">
             <a
               href={`${adminPath}/rest-playground`}
               class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
@@ -394,7 +365,7 @@ const authItems = authCollections.map((slug) => ({
               </p>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 gap-4">
             <a
               href={`${adminPath}/graphql`}
               class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
@@ -422,42 +393,12 @@ const authItems = authCollections.map((slug) => ({
                       d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                   </svg>
                 </div>
-                <h4 class="font-medium text-[var(--kyro-text-primary)]">
-                  Playground
-                </h4>
-              </div>
-              <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Write & test queries
-              </p>
-            </a>
-            <a
-              href={`${adminPath}/graphql-explorer`}
-              class="group p-4 bg-[var(--kyro-surface)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]"
-            >
-              <div class="flex items-center gap-3 mb-2">
-                <div
-                  class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 group-hover:scale-110 transition-transform"
-                >
-                  <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                    ></path>
-                  </svg>
-                </div>
                 <h4 class="font-medium text-[var(--kyro-text-primary)]">
                   Explorer
                 </h4>
               </div>
               <p class="text-xs text-[var(--kyro-text-secondary)]">
-                Schema documentation
+                Write & test queries
               </p>
             </a>
           </div>

package/src/pages/rest-playground.astro

@@ -1,8 +1,7 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { RestPlayground } from "../components/RestPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 
 const collectionsResponse = await fetch(
   `${Astro.url.origin}${apiPath}/collections`,
@@ -12,32 +11,7 @@ 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">
-        </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 class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <RestPlayground client:load collections={collections} />
   </div>
 </AdminLayout>