@kyro-cms/admin 0.9.8 → 0.9.9

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, lazy, useState, useContext, useRef, useEffect, useCallback, useMemo, Suspense } from 'react';
+import React, { createContext, lazy, useState, useRef, useEffect, useCallback, useContext, useMemo, Suspense } from 'react';
 import { create, useStore } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { GripVertical, Copy, X, Video, Mail, Clock, Database, Users, Tag, Image, Activity, CircleHelp, Sparkles, Blocks, Columns3, Link2, ListOrdered, Box, Heading1, Star, AlignLeft, ChevronDown, File, Code, List, Plus, ChevronRight, ChevronUp, Search, LoaderCircle, Check, RefreshCw, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, Filter, FolderPlus, FolderInput, Folder, Trash2, Film, Music, FileText, Archive, Download, Crop, Server, CodeXml, Pencil, Eye, EllipsisVertical, Send, Info, TriangleAlert, ShieldAlert, CircleCheck, History, CheckCircle2, User, GitCompare, Undo2, ExternalLink, Settings, Shield, Hexagon, Network, Sun, Moon, LogOut, ArrowRight, LayoutDashboard, ArrowUpRight, Webhook, Zap, Pause, Play, Key, Lock, EyeOff, CirclePlay, RefreshCcw, Save, UserPlus, LockOpen } from 'lucide-react';
@@ -5867,6 +5867,7 @@ function createNewBlock(type) {
   return {
     id: Math.random().toString(36).substr(2, 9),
     type,
+    name: "",
     data,
     options,
     children,
@@ -7504,6 +7505,18 @@ var BlockEditModal = ({
       accentClass: theme.border,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1 block", children: "Block Name" }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "pt-4 border-t border-[var(--kyro-border)]", children: [
             /* @__PURE__ */ jsxs("label", { className: "text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block", children: [
@@ -7615,7 +7628,7 @@ var ChildBlocksTree = ({
             blockIcons[child.type] && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ 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)}` : ""
               ] }),
@@ -7836,7 +7849,7 @@ var NestedChildBlocks = ({
             blockIcons[child.type] && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ 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)}` : ""
               ] }),
@@ -8550,7 +8563,7 @@ var blockIcons = {
 function getBlockComponent(type) {
   return BLOCK_COMPONENTS[type] || null;
 }
-function getBlockLabel(type) {
+function getBlockLabel2(type) {
   const labelMap = {
     // Primitives
     paragraph: "Paragraph",
@@ -8593,6 +8606,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) {
@@ -8621,16 +8639,32 @@ var SortableBlockComponent = ({
     transition,
     isDragging
   } = useSortable({ id: block3.id });
-  const { removeBlock } = useBlockActions();
+  const { removeBlock, updateBlock } = useBlockActions();
   const isEditing = editingBlockId === block3.id;
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [editingName, setEditingName] = useState(false);
+  const [nameDraft, setNameDraft] = useState(block3.name || "");
+  const nameInputRef = useRef(null);
+  useEffect(() => {
+    if (editingName && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
+    }
+  }, [editingName]);
+  const commitName = 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: 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) {
@@ -8652,7 +8686,36 @@ var SortableBlockComponent = ({
               }
             ),
             blockIcons[block3.type] && /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-text-secondary)] flex-shrink-0", children: blockIcons[block3.type] }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px]", children: itemLabel }),
+            editingName ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [
               /* @__PURE__ */ jsx(
                 "button",
@@ -8734,13 +8797,43 @@ var SortableBlockComponent = ({
         children: [
           blockIcons[block3.type] && /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-text-secondary)]", children: blockIcons[block3.type] }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-xs font-semibold text-[var(--kyro-text-secondary)] truncate", children: [
-              itemLabel,
-              previewSnippet && typeof previewSnippet === "string" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-text-muted)] font-normal ml-1.5", children: [
-                "- ",
-                previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet
-              ] })
-            ] }),
+            editingName ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { className: "text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium", children: [