@kyro-cms/admin 0.9.8 → 0.10.0

package/dist/index.js

@@ -1,7 +1,7 @@
-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';
+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, CodeXml, FileText, Music, Film, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, Filter, FolderPlus, FolderInput, Folder, Trash2, Archive, Download, Crop, Server, 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';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useEditor, EditorContent } from '@tiptap/react';
@@ -3840,33 +3840,63 @@ function RichTextField({
   error,
   disabled
 }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [panelWidth, setPanelWidth] = useState(0);
-  const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
   useEffect(() => {
     setIsMounted(true);
   }, []);
+  if (!isMounted) {
+    return /* @__PURE__ */ jsx(FieldLayout, { field: field3, error, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
+          ${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
+          ${disabled ? "opacity-60 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]" }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-y-auto min-h-[160px] max-h-[400px] p-4" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    RichTextEditor,
+    {
+      field: field3,
+      value,
+      onChange,
+      error,
+      disabled
+    }
+  );
+}
+function RichTextEditor({
+  field: field3,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [panelWidth, setPanelWidth] = useState(0);
+  const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
   useEffect(() => {
     if (!isExpanded) {
       setPanelWidth(0);
       return;
     }
+    const panel = document.querySelector('[data-kyro-slide-panel="true"]');
     const updateWidth = () => {
-      const panel2 = document.querySelector('[data-kyro-slide-panel="true"]');
-      if (panel2) {
-        setPanelWidth(panel2.getBoundingClientRect().width);
+      if (panel) {
+        setPanelWidth(panel.getBoundingClientRect().width);
       } else {
         setPanelWidth(0);
       }
     };
     updateWidth();
-    let observer = null;
-    const panel = document.querySelector('[data-kyro-slide-panel="true"]');
-    if (panel && typeof ResizeObserver !== "undefined") {
-      observer = new ResizeObserver(() => {
-        updateWidth();
-      });
+    const observer = new MutationObserver(() => {
+      updateWidth();
+    });
+    if (panel) {
       observer.observe(panel);
     }
     window.addEventListener("resize", updateWidth);
@@ -3904,7 +3934,7 @@ function RichTextField({
       TextStyle,
       Color
     ],
-    content: value || { type: "doc", content: [] },
+    content: Array.isArray(value) ? { type: "doc", content: value } : value || { type: "doc", content: [] },
     editable: !disabled,
     onUpdate: ({ editor: editor2 }) => {
       onChange(editor2.getJSON());
@@ -3917,23 +3947,9 @@ function RichTextField({
   });
   useEffect(() => {
     if (editor && value && JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
-      editor.commands.setContent(value);
+      editor.commands.setContent(Array.isArray(value) ? { type: "doc", content: value } : value);
     }
   }, [value, editor]);
-  if (!isMounted) {
-    return /* @__PURE__ */ jsx(FieldLayout, { field: field3, error, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `border rounded-lg bg-[var(--kyro-bg)] overflow-hidden border-[var(--kyro-border)] flex flex-col shadow-sm transition-all duration-200
-          ${error ? "border-[var(--kyro-error)] shadow-[0_0_0_1px_var(--kyro-error)]" : "border-[var(--kyro-border)]"}
-          ${disabled ? "opacity-60 cursor-not-allowed" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 p-1.5 border-b border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] rounded-t-lg h-[40px]" }),
-          /* @__PURE__ */ jsx("div", { className: "overflow-y-auto min-h-[160px] max-h-[400px] p-4" })
-        ]
-      }
-    ) });
-  }
   return /* @__PURE__ */ jsxs(FieldLayout, { field: field3, error, children: [
     isExpanded ? (
       // Maximize mode placeholder inside form
@@ -5867,6 +5883,7 @@ function createNewBlock(type) {
   return {
     id: Math.random().toString(36).substr(2, 9),
     type,
+    name: "",
     data,
     options,
     children,
@@ -7504,6 +7521,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 +7644,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 +7865,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 +8579,7 @@ var blockIcons = {
 function getBlockComponent(type) {
   return BLOCK_COMPONENTS[type] || null;
 }
-function getBlockLabel(type) {
+function getBlockLabel2(type) {
   const labelMap = {
     // Primitives
     paragraph: "Paragraph",
@@ -8593,6 +8622,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 +8655,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 +8702,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 +8813,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: [
@@ -14589,7 +14698,6 @@ var samplePlugin = {
   description: "A tiny sample plugin to demonstrate the extensibility surface",
   hooks: {
     onAdminReady: () => {
-      console.log("[ Kyro Admin ] sample-plugin: onAdminReady executed");
       return;
     }
   }
@@ -14603,7 +14711,6 @@ var samplePlugin2 = {
   description: "Second MVP plugin demonstrating beforeDeploy hook",
   hooks: {
     beforeDeploy: (ctx) => {
-      console.log("[Kyro Admin] sample-plugin-2 beforeDeploy");
       return { success: true };
     }
   }
@@ -14894,7 +15001,6 @@ export function c(size) {
 function debug(namespace) {
   function d(...args) {
     if (typeof localStorage !== "undefined" && localStorage.getItem("DEBUG")) {
-      console.log(namespace, ...args);
     }
   }
   d.enabled = false;
@@ -14914,9 +15020,33 @@ export default debug;
                 "kyro:config": resolvedConfig
               }
             },
+            build: {
+              rollupOptions: {
+                output: {
+                  manualChunks(id) {
+                    if (id.includes("@tiptap") || id.includes("prosemirror")) {
+                      return "vendor-tiptap";
+                    }
+                  }
+                }
+              }
+            },
             optimizeDeps: {
               include: [
-                "use-sync-external-store"
+                "use-sync-external-store",
+                "@tiptap/core",
+                "@tiptap/react",
+                "@tiptap/pm",
+                "@tiptap/starter-kit",
+                "@tiptap/extension-link",
+                "@tiptap/extension-image",
+                "@tiptap/extension-text-align",
+                "@tiptap/extension-underline",
+                "@tiptap/extension-highlight",
+                "@tiptap/extension-task-list",
+                "@tiptap/extension-task-item",
+                "@tiptap/extension-text-style",
+                "@tiptap/extension-color"
               ],
               exclude: ["debug", "react/compiler-runtime"]
             },
@@ -14926,7 +15056,31 @@ export default debug;
               __KYRO_ADMIN_CONFIG_FILE__: JSON.stringify(configFile)
             },
             ssr: {
-              noExternal: ["@kyro-cms/admin", "@kyro-cms/core"]
+              noExternal: [
+                "@kyro-cms/admin",
+                "@kyro-cms/core",
+                "@tiptap/core",
+                "@tiptap/react",
+                "@tiptap/pm",
+                "@tiptap/starter-kit",
+                "@tiptap/extension-link",
+                "@tiptap/extension-image",
+                "@tiptap/extension-text-align",
+                "@tiptap/extension-underline",
+                "@tiptap/extension-highlight",
+                "@tiptap/extension-task-list",
+                "@tiptap/extension-task-item",
+                "@tiptap/extension-text-style",
+                "@tiptap/extension-color",
+                "prosemirror-model",
+                "prosemirror-state",
+                "prosemirror-view",
+                "prosemirror-schema-list",
+                "prosemirror-commands",
+                "prosemirror-keymap",
+                "prosemirror-transform",
+                "prosemirror-inputrules"
+              ]
             }
           }
         });