@kyro-cms/admin 0.10.5 → 0.10.7

package/src/components/PluginsManager.tsx

@@ -33,14 +33,8 @@ interface ToggleError {
 export function PluginsManager() {
   const [plugins, setPlugins] = useState<Plugin[]>([]);
   const [loading, setLoading] = useState(true);
-  const [toggleLoading, setToggleLoading] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [showConfigModal, setShowConfigModal] = useState<string | null>(null);
-  const [confirmDisable, setConfirmDisable] = useState<{
-    id: string;
-    name: string;
-    activeProvider: string;
-  } | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const fetchPlugins = async () => {
@@ -62,79 +56,6 @@ export function PluginsManager() {
     fetchPlugins();
   }, []);
 
-  const togglePlugin = async (id: string) => {
-    setError(null);
-    setToggleLoading(id);
-
-    try {
-      const res = await fetch(`/api/plugins/${encodeURIComponent(id)}/toggle`, {
-        method: "PUT",
-      });
-
-      if (res.status === 409) {
-        const errData: ToggleError = await res.json();
-        const plugin = plugins.find((p) => p.id === id);
-        if (errData.requiresAction && plugin) {
-          setConfirmDisable({
-            id,
-            name: plugin.name,
-            activeProvider: errData.activeProvider || "unknown",
-          });
-        } else {
-          setError(errData.error);
-        }
-        return;
-      }
-
-      if (!res.ok) {
-        const errData = await res.json().catch(() => ({ error: "Toggle failed" }));
-        setError(errData.error);
-        return;
-      }
-
-      const result = await res.json();
-      setPlugins((prev) =>
-        prev.map((p) =>
-          p.id === id ? { ...p, enabled: result.enabled } : p,
-        ),
-      );
-    } catch (e: any) {
-      setError(e.message || "Network error");
-    } finally {
-      setToggleLoading(null);
-    }
-  };
-
-  const handleForceDisable = async () => {
-    if (!confirmDisable) return;
-    setError(null);
-
-    try {
-      const res = await fetch(
-        `/api/plugins/${encodeURIComponent(confirmDisable.id)}/toggle?force=1`,
-        { method: "PUT" },
-      );
-
-      if (res.ok) {
-        const result = await res.json();
-        setPlugins((prev) =>
-          prev.map((p) =>
-            p.id === confirmDisable.id
-              ? { ...p, enabled: result.enabled }
-              : p,
-          ),
-        );
-      } else {
-        const errData = await res.json().catch(() => ({ error: "Toggle failed" }));
-        setError(errData.error);
-      }
-    } catch (e: any) {
-      setError(e.message || "Network error");
-    } finally {
-      setConfirmDisable(null);
-    }
-  };
-
   const filteredPlugins = plugins.filter(
     (p) =>
       p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -191,6 +112,19 @@ export function PluginsManager() {
       )}
 
       <div className="flex flex-col gap-8 surface-tile p-8">
+        {/* Info Banner */}
+        <div className="p-4 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-start gap-3">
+          <ShieldCheck className="w-4 h-4 text-blue-500 shrink-0 mt-0.5" />
+          <div>
+            <h4 className="text-sm font-bold text-blue-500 mb-1">Developer-First Approach</h4>
+            <p className="text-xs text-blue-500/80 leading-relaxed">
+              Plugins inject core structural components like schemas, collections, and APIs. 
+              To ensure version-controlled integrity, plugins are entirely managed via code in your <code className="bg-blue-500/20 px-1.5 py-0.5 rounded-md text-[10px] font-mono">kyro.config.ts</code> file. 
+              This page serves as a read-only directory of the currently installed ecosystem.
+            </p>
+          </div>
+        </div>
+
         {/* Stats Summary */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="p-4 rounded-2xl bg-[var(--kyro-bg-secondary)]/50 border border-[var(--kyro-border)] flex items-center gap-3 group hover:border-[var(--kyro-primary)]/30 transition-all">
@@ -294,23 +228,6 @@ export function PluginsManager() {
                       >
                         <Settings className="w-3.5 h-3.5" />
                       </button>
-                      <button
-                        type="button"
-                        onClick={() => togglePlugin(plugin.id)}
-                        disabled={toggleLoading === plugin.id}
-                        className={`p-2 border rounded-lg transition-all shadow-sm ${plugin.enabled
-                          ? "bg-red-500/5 border-red-500/10 text-red-500/40 hover:text-red-500 hover:border-red-500/30"
-                          : "bg-green-500/5 border-green-500/10 text-green-500/40 hover:text-green-500 hover:border-green-500/30"
-                          } disabled:opacity-30 disabled:cursor-not-allowed`}
-                      >
-                        {toggleLoading === plugin.id ? (
-                          <RefreshCw className="w-3.5 h-3.5 animate-spin" />
-                        ) : plugin.enabled ? (
-                          <X className="w-3.5 h-3.5" />
-                        ) : (
-                          <Plus className="w-3.5 h-3.5" />
-                        )}
-                      </button>
                     </div>
                   </div>
                 </div>
@@ -326,51 +243,6 @@ export function PluginsManager() {
         </div>
       </div>
 
-      {/* Confirmation Modal for Disabling Active Storage Plugin */}
-      <Modal
-        open={!!confirmDisable}
-        onClose={() => setConfirmDisable(null)}
-        title="Disable Storage Plugin?"
-        size="md"
-      >
-        <ModalContent>
-          <div className="p-6 text-center space-y-4">
-            <div className="w-16 h-16 mx-auto bg-amber-500/10 rounded-2xl flex items-center justify-center border border-amber-500/20">
-              <AlertTriangle className="w-8 h-8 text-amber-500" />
-            </div>
-            <div>
-              <h4 className="text-lg font-bold mb-2">Storage Plugin In Use</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 leading-relaxed">
-                "{confirmDisable?.name}" is currently the active storage provider.
-                Disabling it will switch storage to <strong>Local</strong>.
-              </p>
-              <p className="text-xs text-[var(--kyro-text-secondary)] opacity-50 mt-2">
-                Existing media URLs will remain accessible, but new uploads will
-                use Local storage. You can re-enable the plugin at any time.
-              </p>
-            </div>
-          </div>
-        </ModalContent>
-        <ModalActions>
-          <div className="flex gap-3 w-full">
-            <button
-              type="button"
-              onClick={() => setConfirmDisable(null)}
-              className="kyro-btn kyro-btn-primary flex-1 py-3 rounded-xl font-bold text-sm"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              onClick={handleForceDisable}
-              className="kyro-btn flex-1 py-3 rounded-xl font-bold text-sm bg-amber-500 hover:bg-amber-600 text-white transition-all"
-            >
-              Switch to Local & Disable
-            </button>
-          </div>
-        </ModalActions>
-      </Modal>
-
       {/* Config Modal */}
       <Modal
         open={!!showConfigModal}

package/src/components/SettingsPage.tsx

@@ -14,7 +14,6 @@ export function SettingsPage(props: SettingsPageProps) {
       {...props}
       onActionSuccess={(msg: string) => {
         toast.success(msg);
-        setTimeout(() => window.location.reload(), 800);
       }}
       onActionError={(msg: string) => toast.error(msg)}
     />

package/src/components/UserMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
-import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut } from "./ui/icons";
+import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut, Terminal, Zap } from "./ui/icons";
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
 
@@ -18,6 +18,8 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       apiGet<any>(`/api/media/${avatar}`)
         .then((media) => setAvatarUrl(media?.thumbnailUrl || media?.url || null))
         .catch(() => setAvatarUrl(null));
+    } else if (typeof avatar === "string") {
+      setAvatarUrl(avatar);
     } else {
       setAvatarUrl(null);
     }
@@ -100,6 +102,20 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         Audit Logs
       </DropdownItem>
 
+      <DropdownItem
+        icon={<Terminal className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/rest-playground`)}
+      >
+        API Explorer
+      </DropdownItem>
+
+      <DropdownItem
+        icon={<Zap className="w-4 h-4" />}
+        onClick={() => (window.location.href = `${adminPath}/graphql`)}
+      >
+        GraphQL Playground
+      </DropdownItem>
+
       <DropdownSeparator />
 
       <div className="px-4 py-2 mb-1">

package/src/components/autoform/AutoFormApiView.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { useAutoFormStore } from "../../lib/autoform-store";
+
+interface AutoFormApiViewProps {
+  collectionSlug?: string;
+  globalSlug?: string;
+}
+
+export function AutoFormApiView({
+  collectionSlug,
+  globalSlug,
+}: AutoFormApiViewProps) {
+  const { formData } = useAutoFormStore();
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
+        <div className="surface-tile p-8 min-w-0">
+          <h2 className="text-xl font-bold mb-6">Response Payload</h2>
+          <div className="bg-[#0f172a] p-6 rounded-2xl border border-white/5 overflow-x-auto max-h-[800px]">
+            <pre className="text-blue-300 text-xs font-mono whitespace-pre-wrap break-all">
+              {JSON.stringify(formData, null, 2)}
+            </pre>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="surface-tile p-8 space-y-6">
+            <h2 className="text-xl font-bold mb-6">API Info</h2>
+
+            <div className="space-y-6">
+              <div>
+                <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                  Reference Path
+                </label>
+                <div className="bg-[var(--kyro-bg-secondary)] px-4 py-3 rounded-xl border border-[var(--kyro-border)] text-[11px] font-mono break-all selection:bg-[var(--kyro-primary)]/20 text-[var(--kyro-text-primary)]">
+                  {globalSlug
+                    ? `kyro.globals('${globalSlug}').get()`
+                    : formData.id
+                      ? `kyro.collection('${collectionSlug}').get('${formData.id}')`
+                      : "Not saved yet"}
+                </div>
+              </div>
+
+              {formData.id && (
+                <div>
+                  <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                    Document ID
+                  </label>
+                  <div className="flex items-center gap-2">
+                    <code className="text-xs font-mono bg-[var(--kyro-bg-secondary)] px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]">
+                      {String(formData.id)}
+                    </code>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        navigator.clipboard.writeText(String(formData.id));
+                      }}
+                      className="p-1.5 hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-colors text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                      title="Copy ID"
+                    >
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {globalSlug && (
+                <div>
+                  <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                    Global Slug
+                  </label>
+                  <code className="text-xs font-mono bg-[var(--kyro-bg-secondary)] px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]">
+                    {globalSlug}
+                  </code>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/autoform/AutoFormEditView.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import type { CollectionConfig, GlobalConfig, Field } from "@kyro-cms/core/client";
+import { useAutoFormStore } from "../../lib/autoform-store";
+
+interface AutoFormEditViewProps {
+  config: CollectionConfig | GlobalConfig;
+  layout: "split" | "single";
+  collectionSlug?: string;
+  renderField: (field: Field) => React.ReactNode;
+}
+
+export function AutoFormEditView({
+  config,
+  layout,
+  collectionSlug,
+  renderField,
+}: AutoFormEditViewProps) {
+  const { showPreview, sidebarCollapsed, formData } = useAutoFormStore();
+
+  if (layout === "single") {
+    return (
+      <div className="w-full space-y-6 md:space-y-8">
+        <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
+          {config.fields.map((f: Field) => renderField(f))}
+        </div>
+      </div>
+    );
+  }
+
+  const showRightColumn = !sidebarCollapsed && !showPreview;
+  const hasSidebarFields =
+    config.fields.some((f: Field) => f.admin?.position === "sidebar") &&
+    !showPreview;
+
+  return (
+    <div
+      className={`w-full mx-auto grid gap-4 md:gap-8 pb-32 transition-all duration-700 ${showPreview
+        ? "grid-cols-1 lg:grid-cols-2"
+        : sidebarCollapsed || !hasSidebarFields
+          ? "grid-cols-1"
+          : "grid-cols-1 lg:grid-cols-[1fr_380px]"
+        }`}
+    >
+      <div className="space-y-6 md:space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
+        {config.tabs ? (
+          renderField({ type: "tabs", tabs: config.tabs } as Field)
+        ) : (
+          <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
+            {config.fields
+              .filter(
+                (f: Field) => !f.admin?.position || f.admin.position === "main",
+              )
+              .map((f: Field) => renderField(f))}
+          </div>
+        )}
+      </div>
+
+      {showPreview ? (
+        <div className="sticky top-36 h-[calc(100vh-280px)] animate-in fade-in slide-in-from-right-10 duration-700">
+          <div className="w-full h-full rounded-3xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] shadow-2xl overflow-hidden relative group">
+            <div className="absolute top-4 left-4 z-10 flex items-center gap-2">
+              <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+              <span className="text-[10px] font-bold tracking-widest text-white/60">
+                Live Preview Mode
+              </span>
+            </div>
+            <iframe
+              src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+              className="w-full h-full border-none"
+              title="Live Preview"
+            />
+            <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
+          </div>
+        </div>
+      ) : sidebarCollapsed ? null : (
+        <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
+          {config.fields.some((f: Field) => f.admin?.position === "sidebar") && (
+            <div className="surface-tile p-4 md:p-6 space-y-4 md:space-y-6">
+              <h3 className="text-[10px] font-bold tracking-[0.2em] opacity-40">
+                Settings
+              </h3>
+              {config.fields
+                .filter((f: Field) => f.admin?.position === "sidebar")
+                .map((f: Field) => renderField(f))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}