@kyro-cms/admin 0.9.6 → 0.9.7

package/src/components/DetailView.tsx

@@ -292,57 +292,32 @@ export function DetailView({
         ]}
       />
 
-      {isSingleLayout ? (
-        <div className="md:hidden">
-          <ActionBar
-            status={status}
-            saveStatus={saveStatus}
-            hasChanges={hasChanges}
-            onSave={() => handleSave(false)}
-            onPublish={handlePublish}
-            onUnpublish={status === "published" ? handleUnpublish : undefined}
-            onDuplicate={handleDuplicate}
-            onViewHistory={() => {
-              window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
-            }}
-            onPreview={() =>
-              window.open(`/preview/${slug}/${documentId}`, "_blank")
-            }
-            onDelete={handleDeleteTrigger}
-            onBack={onBack}
-            onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
-            publishedAt={publishedAt}
-            updatedAt={updatedAt}
-          />
-        </div>
-      ) : (
-        <ActionBar
-          status={status}
-          saveStatus={saveStatus}
-          hasChanges={hasChanges}
-          onSave={() => handleSave(false)}
-          onPublish={handlePublish}
-          onUnpublish={status === "published" ? handleUnpublish : undefined}
-          onDuplicate={handleDuplicate}
-          onViewHistory={() => {
-            window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
-          }}
-          onPreview={() =>
-            window.open(`/preview/${slug}/${documentId}`, "_blank")
-          }
-          onDelete={handleDeleteTrigger}
-          onBack={onBack}
-          onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
-          publishedAt={publishedAt}
-          updatedAt={updatedAt}
-        />
-      )}
+      <ActionBar
+        status={status}
+        saveStatus={saveStatus}
+        hasChanges={hasChanges}
+        onSave={() => handleSave(false)}
+        onPublish={handlePublish}
+        onUnpublish={status === "published" ? handleUnpublish : undefined}
+        onDuplicate={handleDuplicate}
+        onViewHistory={() => {
+          window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
+        }}
+        onPreview={() =>
+          window.open(`/preview/${slug}/${documentId}`, "_blank")
+        }
+        onDelete={handleDeleteTrigger}
+        onBack={onBack}
+        onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
+        publishedAt={publishedAt}
+        updatedAt={updatedAt}
+      />
 
       <div
         className={
           isSingleLayout
-            ? "w-full pb-32 pt-4 md:pt-8"
-            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0 pb-32"
+            ? "w-full pt-4 md:pt-8"
+            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0"
         }
       >
         <div className="space-y-4 md:space-y-8 min-w-0">

package/src/components/GraphQLPlayground.tsx

@@ -161,6 +161,7 @@ export function GraphQLPlayground({
   const [lastStatus, setLastStatus] = useState<number>(0);
   const [copied, setCopied] = useState(false);
   const [splitPos, setSplitPos] = useState(50);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const cursorPos = useRef({ line: 1, col: 1 });
@@ -393,7 +394,7 @@ export function GraphQLPlayground({
   return (
     <div ref={containerRef} className="h-full flex flex-col bg-[var(--kyro-bg)] overflow-hidden rounded-lg border border-[var(--kyro-border)]">
       {/* Compact top bar */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
         <div className="flex items-center gap-1.5 min-w-0">
           <div className="w-7 h-7 rounded-lg bg-[var(--kyro-primary)]/10 flex items-center justify-center text-[var(--kyro-primary)] shrink-0">
             <Zap className="w-3.5 h-3.5" />
@@ -427,7 +428,7 @@ export function GraphQLPlayground({
             </button>
           </div>
         )}
-        <div className="ml-auto flex items-center gap-1">
+        <div className="ml-auto flex items-center gap-1 flex-wrap justify-end">
           <button onClick={() => { setShowDocs(!showDocs); setRightTab("docs"); }} className={`p-1.5 rounded-lg transition-all ${rightTab === "docs" && showDocs ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`} title="Schema docs">
             <Book className="w-3.5 h-3.5" />
           </button>
@@ -459,20 +460,35 @@ export function GraphQLPlayground({
       </div>
 
       {/* Main split area */}
-      <div className="flex-1 flex overflow-hidden relative">
+      <div className="flex-1 flex flex-col md:flex-row overflow-hidden relative">
+        {/* Mobile panel switcher */}
+        <div className="flex md:hidden gap-1 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
+          <button
+            onClick={() => setMobilePanel("editor")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "editor" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Editor
+          </button>
+          <button
+            onClick={() => setMobilePanel("response")}
+            className={`flex-1 px-3 py-1.5 text-[10px] font-semibold rounded-md transition-all ${mobilePanel === "response" ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+          >
+            Output
+          </button>
+        </div>
+
         {/* Left: editor */}
-        <div className="flex flex-col overflow-hidden border-r border-[var(--kyro-border)]" style={{ width: `${splitPos}%` }}>
+        <div className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`} style={{ flex: 'none', width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : "100%" }}>
           {/* Editor pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {editorPills.map((p) => (
               <button
                 key={p.key}
                 onClick={() => setActiveEditorTab(p.key)}
-                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${
-                  activeEditorTab === p.key
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${activeEditorTab === p.key
                     ? "bg-[var(--kyro-primary)] text-white"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
-                }`}
+                  }`}
               >
                 {p.label}
               </button>
@@ -509,7 +525,7 @@ export function GraphQLPlayground({
 
         {/* Drag handle */}
         <div
-          className="absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
+          className="hidden md:block absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
           style={{ left: `calc(${splitPos}% - 3px)` }}
           onMouseDown={startDrag}
         >
@@ -517,18 +533,17 @@ export function GraphQLPlayground({
         </div>
 
         {/* Right panel */}
-        <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ width: `${100 - splitPos}%` }}>
+        <div className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`} style={{ flex: undefined, width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${100 - splitPos}%` : "100%" }}>
           {/* Right pills */}
           <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             {rightPills.map((p) => (
               <button
                 key={p.key}
                 onClick={() => { setRightTab(p.key); if (p.key === "docs") setShowDocs(true); }}
-                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${
-                  rightTab === p.key
+                className={`px-2.5 py-1 text-[10px] font-semibold rounded-md transition-all ${rightTab === p.key
                     ? "bg-[var(--kyro-primary)] text-white"
                     : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
-                }`}
+                  }`}
               >
                 {p.label}
               </button>
@@ -601,7 +616,7 @@ export function GraphQLPlayground({
                                 <button
                                   key={t}
                                   onClick={() => setSelectedType(found)}
-                                  className="flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] rounded-xl border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all text-left group"
+                                  className="flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all text-left group"
                                 >
                                   <div>
                                     <span className="text-[10px] font-semibold text-[var(--kyro-text-muted)] block">{t}</span>
@@ -684,9 +699,8 @@ export function GraphQLPlayground({
                     </span>
                   )}
                   {lastStatus > 0 && (
-                    <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${
-                      lastStatus < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
-                    }`}>
+                    <span className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${lastStatus < 400 ? "bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]" : "bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)]"
+                      }`}>
                       {lastStatus}
                     </span>
                   )}

package/src/components/RestPlayground.tsx

@@ -91,7 +91,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     headers: {},
     body: "",
   });
-  const [response, setResponse] = useState<Record<string, unknown> | null>(null);
+  const [response, setResponse] = useState<{ status: number; duration: number; size: number; data: any } | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [activeEditorTab, setActiveEditorTab] = useState<"params" | "headers" | "body">("params");
@@ -102,6 +102,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
   const [saveRequestName, setSaveRequestName] = useState("");
   const [copied, setCopied] = useState(false);
   const [showSidebar, setShowSidebar] = useState(true);
+  const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [splitPos, setSplitPos] = useState(50);
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -343,7 +344,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0">
         <button
           onClick={() => setShowSidebar(!showSidebar)}
-          className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] md:hidden"
+          className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
           title="Toggle sidebar"
         >
           <ChevronRight className={`w-4 h-4 transition-transform ${showSidebar ? "rotate-180" : ""}`} />
@@ -365,7 +366,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           value={currentRequest.url}
           onChange={(e) => setCurrentRequest({ ...currentRequest, url: e.target.value })}
           placeholder="https://api.example.com/endpoint"
-          className="flex-1 px-3 py-1.5 text-xs bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)] font-mono"
+          className="flex-1 min-w-0 px-3 py-1.5 text-xs bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)] font-mono"
         />
         <div className="flex items-center gap-1">
           <button
@@ -385,10 +386,18 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         </div>
       </div>
 
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden relative">
+        {/* Mobile sidebar backdrop */}
+        {showSidebar && (
+          <div
+            className="fixed inset-0 bg-black/40 z-10 md:hidden"
+            onClick={() => setShowSidebar(false)}
+          />
+        )}
+
         {/* Left sidebar */}
         {showSidebar && (
-          <div className="w-60 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+          <div className="absolute md:relative z-20 h-full w-60 flex-shrink-0 flex flex-col border-r border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
             <div className="flex border-b border-[var(--kyro-border)]">
               {sidebarPills.map((p) => (
                 <button
@@ -557,9 +566,36 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         )}
 
         {/* Main split area */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          {/* Mobile panel switcher */}
+          <div className="flex md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] px-3 py-1.5 gap-1">
+            <button
+              onClick={() => setMobilePanel("editor")}
+              className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
+                mobilePanel === "editor"
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Request
+            </button>
+            <button
+              onClick={() => setMobilePanel("response")}
+              className={`flex-1 px-3 py-1 text-[10px] font-semibold rounded-md transition-all ${
+                mobilePanel === "response"
+                  ? "bg-[var(--kyro-primary)] text-white"
+                  : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+              }`}
+            >
+              Response
+            </button>
+          </div>
+
           {/* Left: Editor */}
-          <div className="flex flex-col overflow-hidden border-r border-[var(--kyro-border)]" style={{ width: showSidebar ? `${splitPos}%` : "100%" }}>
+          <div
+            className={`${mobilePanel === "editor" ? "flex" : "hidden"} md:flex flex-col overflow-hidden border-r border-[var(--kyro-border)] w-full md:w-auto`}
+            style={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? `${splitPos}%` : undefined }}
+          >
             {/* Editor pills */}
             <div className="flex gap-0.5 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
               {editorPills.map((p) => (
@@ -614,10 +650,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
             </div>
           </div>
 
-          {/* Drag handle */}
+          {/* Drag handle - hidden on mobile */}
           {showSidebar && (
             <div
-              className="absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
+              className="hidden md:block absolute top-0 bottom-0 z-10 w-1.5 cursor-col-resize group"
               style={{ left: `calc(${splitPos}% - 3px)` }}
               onMouseDown={startDrag}
             >
@@ -626,7 +662,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           )}
 
           {/* Right: Response */}
-          <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ width: showSidebar ? `${100 - splitPos}%` : "50%" }}>
+          <div
+            className={`${mobilePanel === "response" ? "flex" : "hidden"} md:flex flex-1 flex-col overflow-hidden min-w-0 w-full md:w-auto`}
+            style={{ width: typeof window !== "undefined" && window.innerWidth >= 768 ? (showSidebar ? `${100 - splitPos}%` : "50%") : undefined }}
+          >
             <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
               <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Response</span>
               {response && (

package/src/components/fields/RichTextField.tsx

@@ -572,6 +572,8 @@ export default function RichTextField({
     extensions: [
       StarterKit.configure({
         codeBlock: true,
+        link: false,
+        underline: false,
       }),
       Link.configure({
         openOnClick: false,
@@ -591,7 +593,7 @@ export default function RichTextField({
       TextStyle,
       Color,
     ],
-    content: value || {},
+    content: value || { type: "doc", content: [] },
     editable: !disabled,
     onUpdate: ({ editor }: { editor: any }) => {
       onChange(editor.getJSON());

package/src/components/ui/SplitButton.tsx

@@ -45,7 +45,7 @@ export function SplitButton({
     if (saveStatus === "error")  return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
     if (isPublishedIdle)         return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     // has changes → accent
-    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:bg-[var(--kyro-primary-hover)]`;
   };
 
   const chevronBase =

package/src/styles/main.css

@@ -94,6 +94,8 @@
   --kyro-input-border: #1e293b;
 
   --kyro-black: #ffffff;
+  --kyro-black-light: #f3f4f6;
+  --kyro-black-hover: #e5e7eb;
   --kyro-gray-50: #1a2332;
   --kyro-gray-100: #1e293b;
   --kyro-gray-200: #334155;