@kyro-cms/admin 0.9.7 → 0.9.9

package/dist/index.cjs

@@ -5888,6 +5888,7 @@ function createNewBlock(type) {
   return {
     id: Math.random().toString(36).substr(2, 9),
     type,
+    name: "",
     data,
     options,
     children,
@@ -7525,6 +7526,18 @@ var BlockEditModal = ({
       accentClass: theme.border,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1 block", children: "Block Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                value: blockData?.name || "",
+                onChange: (e) => updateBlock(block3.id, { name: e.target.value }),
+                placeholder: blockSchema?.label || block3.type,
+                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"
+              }
+            )
+          ] }),
           renderFields(),
           children.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4 border-t border-[var(--kyro-border)]", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block", children: [
@@ -7636,7 +7649,7 @@ var ChildBlocksTree = ({
             blockIcons[child.type] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded bg-[var(--kyro-surface-accent)] flex items-center justify-center text-[var(--kyro-text-secondary)]", children: blockIcons[child.type] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium text-[var(--kyro-text-secondary)] truncate", children: [
-                getBlockLabel(child.type),
+                getBlockDisplayLabel(child),
                 child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : "",
                 child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""
               ] }),
@@ -7857,7 +7870,7 @@ var NestedChildBlocks = ({
             blockIcons[child.type] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded bg-[var(--kyro-surface-accent)] flex items-center justify-center text-[var(--kyro-text-secondary)]", children: blockIcons[child.type] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium text-[var(--kyro-text-secondary)] truncate", children: [
-                getBlockLabel(child.type),
+                getBlockDisplayLabel(child),
                 child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : "",
                 child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""
               ] }),
@@ -8571,7 +8584,7 @@ var blockIcons = {
 function getBlockComponent(type) {
   return BLOCK_COMPONENTS[type] || null;
 }
-function getBlockLabel(type) {
+function getBlockLabel2(type) {
   const labelMap = {
     // Primitives
     paragraph: "Paragraph",
@@ -8614,6 +8627,11 @@ function getBlockLabel(type) {
   };
   return labelMap[type] || type;
 }
+function getBlockDisplayLabel(block3) {
+  const name = block3.name;
+  if (name && name.trim()) return name.trim();
+  return getBlockLabel2(block3.type);
+}
 function getBlockPreviewSnippet(data, blockSchema) {
   if (blockSchema?.fields) {
     for (const field3 of blockSchema.fields) {
@@ -8642,16 +8660,32 @@ var SortableBlockComponent = ({
     transition,
     isDragging
   } = sortable.useSortable({ id: block3.id });
-  const { removeBlock } = useBlockActions();
+  const { removeBlock, updateBlock } = useBlockActions();
   const isEditing = editingBlockId === block3.id;
   const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+  const [editingName, setEditingName] = React.useState(false);
+  const [nameDraft, setNameDraft] = React.useState(block3.name || "");
+  const nameInputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (editingName && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
+    }
+  }, [editingName]);
+  const commitName = React.useCallback(() => {
+    setEditingName(false);
+    const trimmed = nameDraft.trim();
+    if (trimmed !== (block3.name || "").trim()) {
+      updateBlock(block3.id, { name: trimmed || "" });
+    }
+  }, [nameDraft, block3.name, block3.id, updateBlock]);
   const style = {
     transform: utilities.CSS.Transform.toString(transform),
     transition,
     zIndex: isDragging ? 10 : 1,
     opacity: isDragging ? 0.8 : 1
   };
-  const itemLabel = getBlockLabel(block3.type);
+  const itemLabel = getBlockDisplayLabel(block3);
   const data = block3.data || {};
   const previewSnippet = getBlockPreviewSnippet(data, blockSchema);
   if (compact) {
@@ -8673,7 +8707,36 @@ var SortableBlockComponent = ({
               }
             ),
             blockIcons[block3.type] && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--kyro-text-secondary)] flex-shrink-0", children: blockIcons[block3.type] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px]", children: itemLabel }),
+            editingName ? /* @__PURE__ */ jsxRuntime.jsx(
+              "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(block3.name || "");
+                    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"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setNameDraft(block3.name || "");
+                  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",
+                children: itemLabel
+              }
+            ),
             showDeleteConfirm ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -8755,13 +8818,43 @@ var SortableBlockComponent = ({
         children: [
           blockIcons[block3.type] && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--kyro-text-secondary)]", children: blockIcons[block3.type] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-semibold text-[var(--kyro-text-secondary)] truncate", children: [
-              itemLabel,
-              previewSnippet && typeof previewSnippet === "string" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-text-muted)] font-normal ml-1.5", children: [
-                "- ",
-                previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet
-              ] })
-            ] }),
+            editingName ? /* @__PURE__ */ jsxRuntime.jsx(
+              "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(block3.name || "");
+                    setEditingName(false);
+                  }
+                },
+                onClick: (e) => e.stopPropagation(),
+                placeholder: getBlockLabel2(block3.type),
+                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"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setNameDraft(block3.name || "");
+                  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",
+                children: [
+                  itemLabel,
+                  previewSnippet && typeof previewSnippet === "string" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-text-muted)] font-normal ml-1.5", children: [
+                    "- ",
+                    previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet
+                  ] })
+                ]
+              }
+            ),
             blockSchema?.admin?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80", children: blockSchema.admin.description })
           ] }),
           block3.children && Array.isArray(block3.children) && block3.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium", children: [