@kyro-cms/admin 0.9.8 → 0.9.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "engines": {
     "node": ">=22"
   },

package/src/components/GraphQLPlayground.tsx

@@ -25,6 +25,146 @@ import {
   Terminal,
 } from "./ui/icons";
 
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+function JsonNode({ value, depth = 0 }: { value: any; depth?: number }) {
+  const [collapsed, setCollapsed] = React.useState(depth > 2);
+  const toggle = () => setCollapsed(!collapsed);
+
+  if (value === null || value === undefined) {
+    return <span className="text-[#888] font-medium">null</span>;
+  }
+
+  if (typeof value === "boolean") {
+    return <span className="text-[#e67e22] font-medium">{String(value)}</span>;
+  }
+
+  if (typeof value === "number") {
+    return <span className="text-[#3498db] font-medium">{value}</span>;
+  }
+
+  if (typeof value === "string") {
+    const max = 120;
+    const display = value.length > max ? value.slice(0, max) + "…" : value;
+    return <span className="text-[#27ae60]">"{display}"</span>;
+  }
+
+  if (Array.isArray(value)) {
+    const count = value.length;
+    const isEmpty = count === 0;
+
+    return (
+      <div>
+        <button onClick={toggle} className="inline-flex items-baseline gap-0.5 text-[11px] font-mono text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] transition-colors cursor-pointer !bg-transparent !border-none !p-0 !m-0">
+          {isEmpty ? (
+            <span className="text-[var(--kyro-text-muted)]">[]</span>
+          ) : (
+            <>
+              {collapsed ? <ChevronRight className="w-2.5 h-2.5 self-center" /> : <ChevronDown className="w-2.5 h-2.5 self-center" />}
+              <span className="text-[#2980b9]">[</span>
+              {collapsed && (
+                <span className="text-[var(--kyro-text-muted)] truncate max-w-[200px] inline-block">
+                  {count <= 2
+                    ? value.map((v: any, i: number) => (
+                        <span key={i}>
+                          {i > 0 && <span className="text-[var(--kyro-text-muted)]">, </span>}
+                          <JsonNode value={v} depth={depth + 1} />
+                        </span>
+                      ))
+                    : `${count} items`
+                  }
+                </span>
+              )}
+              <span className="text-[#2980b9]">]</span>
+              {collapsed && <span className="text-[10px] ml-1 text-[#2980b9]">{count}</span>}
+            </>
+          )}
+        </button>
+        {!isEmpty && !collapsed && (
+          <div className="border-l border-[#2980b9]/20 ml-[6px] pl-3">
+            {value.map((item, i) => (
+              <div key={i} className="text-[11px] font-mono leading-relaxed">
+                <span className="text-[#2980b9] select-none">{i}: </span>
+                <JsonNode value={item} depth={depth + 1} />
+                {i < count - 1 && <span className="text-[var(--kyro-text-muted)]">,</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    const isEmpty = keys.length === 0;
+
+    return (
+      <div>
+        <button onClick={toggle} className="inline-flex items-baseline gap-0.5 text-[11px] font-mono text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] transition-colors cursor-pointer !bg-transparent !border-none !p-0 !m-0">
+          {isEmpty ? (
+            <span className="text-[var(--kyro-text-muted)]">{'{}'}</span>
+          ) : (
+            <>
+              {collapsed ? <ChevronRight className="w-2.5 h-2.5 self-center" /> : <ChevronDown className="w-2.5 h-2.5 self-center" />}
+              <span className="text-[#d4a03c]">{'{'}</span>
+              {collapsed && (
+                <span className="text-[var(--kyro-text-muted)] truncate max-w-[200px] inline-block">
+                  {keys.length <= 2
+                    ? keys.map((k, i) => (
+                        <span key={k}>
+                          <span className="text-[#8e44ad]">"{k}"</span>
+                          <span className="text-[var(--kyro-text-muted)]">: </span>
+                          <JsonNode value={value[k]} depth={depth + 1} />
+                          {i < keys.length - 1 && <span className="text-[var(--kyro-text-muted)]">, </span>}
+                        </span>
+                      ))
+                    : `${keys.length} keys`
+                  }
+                </span>
+              )}
+              <span className="text-[#d4a03c]">{'}'}</span>
+              {collapsed && <span className="text-[10px] ml-1 text-[#d4a03c]">{keys.length}</span>}
+            </>
+          )}
+        </button>
+        {!isEmpty && !collapsed && (
+          <div className="border-l border-[#d4a03c]/20 ml-[6px] pl-3">
+            {keys.map((key, i) => (
+              <div key={key} className="text-[11px] font-mono leading-relaxed">
+                <span className="text-[#8e44ad]">"{key}"</span>
+                <span className="text-[var(--kyro-text-muted)]">: </span>
+                <JsonNode value={value[key]} depth={depth + 1} />
+                {i < keys.length - 1 && <span className="text-[var(--kyro-text-muted)]">,</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return <span className="text-[var(--kyro-text-muted)]">{String(value)}</span>;
+}
+
+function JsonViewer({ json }: { json: string }) {
+  const parsed = React.useMemo(() => {
+    try { return JSON.parse(json); } catch { return json; }
+  }, [json]);
+
+  if (typeof parsed === "string") {
+    return <pre className="text-[11px] font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap selection:bg-[var(--kyro-primary)]/20">{json}</pre>;
+  }
+
+  return <JsonNode value={parsed} />;
+}
+
 interface GraphQLPlaygroundProps {
   endpoint?: string;
   initialQuery?: string;
@@ -85,16 +225,42 @@ function isScalarType(typeName: string): boolean {
   return ["String", "Int", "Float", "Boolean", "ID"].includes(typeName);
 }
 
+function renderType(type: Record<string, unknown>): string {
+  if (!type) return "Unknown";
+  if (type.name) return type.name as string;
+  if (type.ofType) {
+    if (type.kind === "NON_NULL") return `${renderType(type.ofType as Record<string, unknown>)}!`;
+    if (type.kind === "LIST") return `[${renderType(type.ofType as Record<string, unknown>)}]`;
+    return renderType(type.ofType as Record<string, unknown>);
+  }
+  return "Unknown";
+}
+
+function resolveInnermostKind(type: Record<string, unknown>): string {
+  let current: Record<string, unknown> | undefined = type;
+  while (current && current.ofType) current = current.ofType as Record<string, unknown>;
+  return (current?.kind as string) || "Unknown";
+}
+
 function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation: boolean): string {
   const returnTypeName = resolveTypeName(field.type);
   const returnType = schema.types.find((t) => t.name === returnTypeName);
 
-  const scalarFields = returnType?.fields
-    ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
-    .map((f) => `    ${f.name}`) || [];
-  const listFields = returnType?.fields
-    ?.filter((f) => resolveTypeName(f.type).startsWith("["))
-    .map((f) => `    ${f.name} { id }`) || [];
+  function collectFields(fields: FieldInfo[], indent: number): string[] {
+    const lines: string[] = [];
+    for (const f of fields) {
+      if (f.isDeprecated) continue;
+      const typeName = resolveTypeName(f.type);
+      const pad = "  ".repeat(indent);
+      if (isScalarType(typeName) || typeName === "JSON") {
+        lines.push(`${pad}${f.name}`);
+      } else {
+        lines.push(`${pad}${f.name} { id }`);
+      }
+    }
+    return lines;
+  }
+
   const docField = returnType?.fields?.find((f) => f.name === "doc");
   const messageField = returnType?.fields?.find((f) => f.name === "message");
 
@@ -103,14 +269,12 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   if (docField && isMutation) {
     const docTypeName = resolveTypeName(docField.type);
     const docType = schema.types.find((t) => t.name === docTypeName);
-    const docScalars = docType?.fields
-      ?.filter((f) => !f.isDeprecated && isScalarType(resolveTypeName(f.type)))
-      .map((f) => `    ${f.name}`) || ["    id"];
-    selection = ["  doc {", ...docScalars, "  }"]
+    const docLines = collectFields(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1);
+    selection = ["  doc {", ...docLines, "  }"]
       .concat(messageField ? ["  message"] : [])
       .join("\n");
   } else {
-    selection = [...scalarFields, ...listFields].join("\n");
+    selection = collectFields(returnType?.fields || [], 1).join("\n");
   }
 
   const args = field.args
@@ -130,7 +294,7 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   if (isMutation) {
     return `mutation {\n  ${fieldCall} {\n${selection}\n  }\n}`;
   }
-  return `${fieldCall} {\n${selection}\n}`;
+  return `query {\n  ${fieldCall} {\n${selection}\n  }\n}`;
 }
 
 function buildSchemaCompletionOverride(schema: SchemaInfo) {
@@ -340,7 +504,7 @@ export function GraphQLPlayground({
       const headers: Record<string, string> = {
         "Content-Type": "application/json",
       };
-      if (token) headers["Authorization"] = `Bearer ${token}`;
+      if (token) headers["Authorization"] = `ApiKey ${token}`;
       if (tab.headers) {
         try {
           const customHeaders = JSON.parse(tab.headers);
@@ -455,17 +619,6 @@ export function GraphQLPlayground({
   const extensions = activeEditorTab === "query" ? queryExt : jsonExt;
   const theme = aura;
 
-  const renderType = (type: Record<string, unknown>): string => {
-    if (!type) return "Unknown";
-    if (type.name) return type.name as string;
-    if (type.ofType) {
-      if (type.kind === "NON_NULL") return `${renderType(type.ofType as Record<string, unknown>)}!`;
-      if (type.kind === "LIST") return `[${renderType(type.ofType as Record<string, unknown>)}]`;
-      return renderType(type.ofType as Record<string, unknown>);
-    }
-    return "Unknown";
-  };
-
   const startDrag = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
@@ -525,7 +678,7 @@ export function GraphQLPlayground({
         {token ? (
           <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[10px] font-mono text-[var(--kyro-text-muted)]">
             <span className="w-2 h-2 rounded-full bg-[var(--kyro-success)]" />
-            Bearer ••••{token.slice(-4)}
+            API Key ••••{token.slice(-4)}
             <button onClick={() => { setToken(""); setShowToken(false); }} className="ml-1 hover:text-[var(--kyro-danger)]">
               <X className="w-3 h-3" />
             </button>
@@ -536,7 +689,7 @@ export function GraphQLPlayground({
               type={showToken ? "text" : "password"}
               value={token}
               onChange={(e) => setToken(e.target.value)}
-              placeholder="Bearer token"
+              placeholder="API key"
               className="w-24 px-2 py-1 text-[10px] font-mono 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)]"
             />
             <button onClick={() => setShowToken(!showToken)} className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
@@ -836,14 +989,14 @@ export function GraphQLPlayground({
                       <span className="text-[10px] font-semibold text-[var(--kyro-text-muted)]">Running Query...</span>
                     </div>
                   ) : response ? (
-                    <pre className="text-[11px] font-mono text-[var(--kyro-text-primary)] whitespace-pre-wrap p-3 selection:bg-[var(--kyro-primary)]/20">
+                    <div className="h-full overflow-auto p-3">
                       {error && (
                         <div className="mb-2 p-2 rounded bg-[var(--kyro-danger-bg)] border border-[var(--kyro-danger)]/20 text-[10px] text-[var(--kyro-danger)] font-medium">
                           ⚠ {error}
                         </div>
                       )}
-                      {response}
-                    </pre>
+                      <JsonViewer json={response} />
+                    </div>
                   ) : (
                     <div className="flex flex-col items-center justify-center h-full opacity-30">
                       <Activity className="w-12 h-12 mb-3" />

package/src/components/blocks/BlockEditModal.tsx

@@ -107,6 +107,18 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
       accentClass={theme.border}
     >
       <div className="space-y-4">
+        <div>
+          <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1 block">
+            Block Name
+          </label>
+          <input
+            value={(blockData?.name as string) || ""}
+            onChange={(e) => updateBlock(block.id, { name: e.target.value })}
+            placeholder={blockSchema?.label || (block.type as string)}
+            className="w-full bg-[var(--kyro-bg-primary)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] outline-none focus:border-[var(--kyro-primary)] transition-colors"
+          />
+        </div>
+
         {renderFields()}
 
         {children.length > 0 && (

package/src/components/blocks/ChildBlocksTree.tsx

@@ -4,6 +4,7 @@ import {
   blockIcons,
   getBlockComponent,
   getBlockLabel,
+  getBlockDisplayLabel,
 } from "../fields/extensions/blockComponents";
 import { createNewBlock } from "../fields/extensions/blocksStore";
 import { BlockDrawer } from "../ui/BlockDrawer";
@@ -137,7 +138,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
 
           <div className="flex-1 min-w-0">
             <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
-              {getBlockLabel(child.type)}
+              {getBlockDisplayLabel(child)}
               {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
               {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
             </div>
@@ -417,7 +418,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
 
           <div className="flex-1 min-w-0">
             <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
-              {getBlockLabel(child.type)}
+              {getBlockDisplayLabel(child)}
               {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
               {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
             </div>

package/src/components/fields/BlocksField.tsx

@@ -7,6 +7,7 @@ import {
   BLOCK_COMPONENTS,
   getBlockComponent,
   blockIcons,
+  getBlockDisplayLabel,
   getBlockLabel,
   blockTheme,
 } from "./extensions/blockComponents";
@@ -86,9 +87,27 @@ const SortableBlockComponent = ({
     isDragging,
   } = useSortable({ id: block.id });
 
-  const { removeBlock } = useBlockActions();
+  const { removeBlock, updateBlock } = useBlockActions();
   const isEditing = editingBlockId === block.id;
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editingName, setEditingName] = useState(false);
+  const [nameDraft, setNameDraft] = useState((block.name as string) || "");
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingName && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
+    }
+  }, [editingName]);
+
+  const commitName = useCallback(() => {
+    setEditingName(false);
+    const trimmed = nameDraft.trim();
+    if (trimmed !== ((block.name as string) || "").trim()) {
+      updateBlock(block.id as string, { name: trimmed || "" });
+    }
+  }, [nameDraft, block.name, block.id, updateBlock]);
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -97,7 +116,7 @@ const SortableBlockComponent = ({
     opacity: isDragging ? 0.8 : 1,
   };
 
-  const itemLabel = getBlockLabel(block.type as string);
+  const itemLabel = getBlockDisplayLabel(block);
   const data = (block.data || {}) as Record<string, any>;
   const previewSnippet = getBlockPreviewSnippet(data, blockSchema);
 
@@ -126,9 +145,25 @@ const SortableBlockComponent = ({
             </span>
           )}
 
-          <span className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px]">
-            {itemLabel}
-          </span>
+          {editingName ? (
+            <input
+              ref={nameInputRef}
+              value={nameDraft}
+              onChange={(e) => setNameDraft(e.target.value)}
+              onBlur={commitName}
+              onKeyDown={(e) => { if (e.key === "Enter") commitName(); if (e.key === "Escape") { setNameDraft((block.name as string) || ""); setEditingName(false); } }}
+              onClick={(e) => e.stopPropagation()}
+              className="flex-1 min-w-0 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-primary)] rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--kyro-text-primary)] outline-none"
+            />
+          ) : (
+            <span
+              onClick={(e) => { e.stopPropagation(); setNameDraft((block.name as string) || ""); setEditingName(true); }}
+              className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px] cursor-text hover:text-[var(--kyro-text-primary)] transition-colors"
+              title="Click to rename"
+            >
+              {itemLabel}
+            </span>
+          )}
 
           {showDeleteConfirm ? (
             <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
@@ -213,14 +248,31 @@ const SortableBlockComponent = ({
         )}
 
         <div className="flex-1 min-w-0">
-          <div className="text-xs font-semibold text-[var(--kyro-text-secondary)] truncate">
-            {itemLabel}
-            {previewSnippet && typeof previewSnippet === "string" && (
-              <span className="text-[var(--kyro-text-muted)] font-normal ml-1.5">
-                - {previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet}
-              </span>
-            )}
-          </div>
+          {editingName ? (
+            <input
+              ref={nameInputRef}
+              value={nameDraft}
+              onChange={(e) => setNameDraft(e.target.value)}
+              onBlur={commitName}
+              onKeyDown={(e) => { if (e.key === "Enter") commitName(); if (e.key === "Escape") { setNameDraft((block.name as string) || ""); setEditingName(false); } }}
+              onClick={(e) => e.stopPropagation()}
+              placeholder={getBlockLabel(block.type as string)}
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-primary)] rounded px-2 py-0.5 text-xs font-semibold text-[var(--kyro-text-primary)] outline-none"
+            />
+          ) : (
+            <div
+              onClick={(e) => { e.stopPropagation(); setNameDraft((block.name as string) || ""); setEditingName(true); }}
+              className="text-xs font-semibold text-[var(--kyro-text-secondary)] truncate cursor-text hover:text-[var(--kyro-text-primary)] transition-colors"
+              title="Click to rename"
+            >
+              {itemLabel}
+              {previewSnippet && typeof previewSnippet === "string" && (
+                <span className="text-[var(--kyro-text-muted)] font-normal ml-1.5">
+                  - {previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet}
+                </span>
+              )}
+            </div>
+          )}
           {blockSchema?.admin?.description && (
             <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
               {blockSchema.admin.description}

package/src/components/fields/extensions/blockComponents.tsx

@@ -174,3 +174,9 @@ export function getBlockLabel(type: string): string {
   };
   return labelMap[type] || type;
 }
+
+export function getBlockDisplayLabel(block: Record<string, unknown>): string {
+  const name = block.name as string | undefined;
+  if (name && name.trim()) return name.trim();
+  return getBlockLabel(block.type as string);
+}

package/src/components/fields/extensions/blocksStore.ts

@@ -146,6 +146,7 @@ export function createNewBlock(type: string): BlockData {
   return {
     id: Math.random().toString(36).substr(2, 9),
     type,
+    name: "",
     data,
     options,
     children,

package/src/kyro-cms.d.ts

@@ -143,6 +143,7 @@ admin?: {
   export interface BlockData {
     id: string;
     type: string;
+    name?: string;
     data?: Record<string, unknown>;
     children?: BlockData[];
     order?: number;