@kyro-cms/admin 0.9.7 → 0.9.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "engines": {
     "node": ">=22"
   },
@@ -120,7 +120,7 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.9.2",
+    "@kyro-cms/core": "^0.9.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/components/GraphQLPlayground.tsx

@@ -2,6 +2,7 @@ import React, {
   useState,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   Suspense,
   lazy,
@@ -24,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;
@@ -52,6 +193,8 @@ const CodeMirrorEditor = lazy(() =>
   import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
 );
 import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { CompletionContext, autocompletion } from "@codemirror/autocomplete";
 import { aura } from "@uiw/codemirror-theme-aura";
 
 function prettifyQuery(query: string): string {
@@ -71,6 +214,118 @@ function prettifyQuery(query: string): string {
   return result.trim();
 }
 
+function resolveTypeName(type: Record<string, unknown>): string {
+  if (!type) return "Unknown";
+  if (type.name) return type.name as string;
+  if (type.ofType) return resolveTypeName(type.ofType as Record<string, unknown>);
+  return "Unknown";
+}
+
+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);
+
+  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");
+
+  let selection = "";
+
+  if (docField && isMutation) {
+    const docTypeName = resolveTypeName(docField.type);
+    const docType = schema.types.find((t) => t.name === docTypeName);
+    const docLines = collectFields(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1);
+    selection = ["  doc {", ...docLines, "  }"]
+      .concat(messageField ? ["  message"] : [])
+      .join("\n");
+  } else {
+    selection = collectFields(returnType?.fields || [], 1).join("\n");
+  }
+
+  const args = field.args
+    ?.filter((a) => {
+      const t = renderType(a.type);
+      return t.endsWith("!");
+    })
+    .map((a) => {
+      const t = renderType(a.type).replace("!", "");
+      const val = t === "String" ? '""' : t === "Int" ? "0" : t === "Float" ? "0" : t === "Boolean" ? "false" : '""';
+      return `${a.name}: ${val}`;
+    })
+    .join(", ");
+
+  const fieldCall = `${field.name}${args ? `(${args})` : ""}`;
+
+  if (isMutation) {
+    return `mutation {\n  ${fieldCall} {\n${selection}\n  }\n}`;
+  }
+  return `query {\n  ${fieldCall} {\n${selection}\n  }\n}`;
+}
+
+function buildSchemaCompletionOverride(schema: SchemaInfo) {
+  const queryType = schema.types.find((t) => t.name === schema.queryType.name);
+  const mutationType = schema.mutationType
+    ? schema.types.find((t) => t.name === schema.mutationType!.name)
+    : null;
+
+  const queryFields = queryType?.fields || [];
+  const mutationFields = mutationType?.fields || [];
+
+  const operationNames = [...queryFields.map((f) => f.name), ...mutationFields.map((f) => f.name)];
+
+  return (context: CompletionContext) => {
+    const word = context.matchBefore(/\w*/);
+    if (!word || (word.from === word.to && !context.explicit)) return null;
+    return {
+      from: word.from,
+      options: [
+        ...operationNames.map((n) => ({
+          label: n,
+          type: "function" as const,
+          detail: "operation",
+        })),
+        { label: "query", type: "keyword" as const, detail: "operation type" },
+        { label: "mutation", type: "keyword" as const, detail: "operation type" },
+      ],
+    };
+  };
+}
+
 const DEFAULT_QUERY = `# Welcome to Kyro CMS GraphQL Playground
 # Cmd+Enter to run, Cmd+Shift+P to prettify
 
@@ -163,6 +418,7 @@ export function GraphQLPlayground({
   const [splitPos, setSplitPos] = useState(50);
   const [mobilePanel, setMobilePanel] = useState<"editor" | "response">("editor");
   const [isDragging, setIsDragging] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const cursorPos = useRef({ line: 1, col: 1 });
 
@@ -170,6 +426,13 @@ export function GraphQLPlayground({
     setIsMounted(true);
   }, []);
 
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= 768);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
   const fetchSchema = useCallback(async () => {
     setLoadingSchema(true);
     try {
@@ -241,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);
@@ -336,19 +599,25 @@ export function GraphQLPlayground({
     setTab((prev) => ({ ...prev, query: "" }));
   };
 
-  const extensions = [javascript()];
-  const theme = aura;
+  const handleInsertQuery = useCallback(
+    (field: FieldInfo) => {
+      const isMutation = schema?.mutationType?.name
+        ? schema.types
+            .find((t) => t.name === schema.mutationType!.name)
+            ?.fields?.some((f) => f.name === field.name)
+        : false;
+      if (!schema) return;
+      const q = generateSkeletonQuery(field, schema, !!isMutation);
+      setTab((prev) => ({ ...prev, query: q }));
+      setRightTab("response");
+    },
+    [schema],
+  );
 
-  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 queryExt = useMemo(() => [javascript(), schema ? autocompletion({ override: [buildSchemaCompletionOverride(schema)] }) : []].flat(), [schema]);
+  const jsonExt = useMemo(() => [json()], []);
+  const extensions = activeEditorTab === "query" ? queryExt : jsonExt;
+  const theme = aura;
 
   const startDrag = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
@@ -409,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>
@@ -420,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)]">
@@ -478,7 +747,7 @@ export function GraphQLPlayground({
         </div>
 
         {/* Left: editor */}
-        <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%" }}>
+        <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: isDesktop ? `${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) => (
@@ -533,7 +802,7 @@ export function GraphQLPlayground({
         </div>
 
         {/* Right panel */}
-        <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%" }}>
+        <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: isDesktop ? `${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) => (
@@ -584,25 +853,33 @@ export function GraphQLPlayground({
                           {selectedType.fields && (
                             <div className="space-y-2">
                               <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
-                              {selectedType.fields.map(f => (
-                                <div key={f.name} className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
-                                  <div className="flex items-center justify-between gap-2">
-                                    <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
-                                    <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
-                                  </div>
-                                  {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
-                                  {f.args && f.args.length > 0 && (
-                                    <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
-                                      {f.args.map(a => (
-                                        <div key={a.name} className="text-[9px]">
-                                          <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
-                                          <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
-                                        </div>
-                                      ))}
+                              {selectedType.fields.map(f => {
+                                const isRootOp = (selectedType.name === "Query" || selectedType.name === "Mutation") && !!schema;
+                                return (
+                                  <button
+                                    key={f.name}
+                                    type="button"
+                                    onClick={isRootOp ? () => handleInsertQuery(f) : undefined}
+                                    className={`w-full text-left p-2.5 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)] transition-all ${isRootOp ? "hover:border-[var(--kyro-primary)] hover:shadow-sm cursor-pointer" : ""}`}
+                                  >
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
+                                      <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
                                     </div>
-                                  )}
-                                </div>
-                              ))}
+                                    {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                    {f.args && f.args.length > 0 && (
+                                      <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
+                                        {f.args.map(a => (
+                                          <div key={a.name} className="text-[9px]">
+                                            <span className="text-[var(--kyro-text-muted)]">{a.name}:</span>{" "}
+                                            <span className="text-[var(--kyro-primary)]">{renderType(a.type)}</span>
+                                          </div>
+                                        ))}
+                                      </div>
+                                    )}
+                                  </button>
+                                );
+                              })}
                             </div>
                           )}
                         </div>
@@ -712,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;