@kyro-cms/admin 0.9.4 → 0.9.6

package/src/components/Sidebar.astro

@@ -92,9 +92,10 @@ function isActive(item: NavItem): boolean {
 ---
 
 <aside
-  class="surface-tile w-[320px] flex flex-col flex-shrink-0 overflow-hidden"
+  id="kyro-sidebar"
+  class="surface-tile w-[280px] md:w-[320px] flex flex-col flex-shrink-0 overflow-hidden fixed md:static inset-y-0 left-0 z-50 md:z-auto transition-transform duration-300 -translate-x-full md:translate-x-0 h-[100dvh] md:h-auto border-r md:border-r-0 border-[var(--kyro-border)] rounded-r-2xl md:rounded-3xl rounded-l-none md:rounded-l-3xl shadow-2xl md:shadow-none"
 >
-  <div class="px-8 py-8 flex items-center gap-3">
+  <div class="px-6 md:px-8 py-6 md:py-8 flex items-center justify-between gap-3">
     {
       siteLogo ? (
         <img
@@ -113,6 +114,9 @@ function isActive(item: NavItem): boolean {
         </span>
       )
     }
+    <button id="mobile-close-btn" class="md:hidden p-2 -mr-2 rounded-lg text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
   </div>
 
   <nav class="flex-1 px-4 overflow-y-auto" id="sidebar-nav">

package/src/components/UserManagement.tsx

@@ -132,7 +132,7 @@ export function UserManagement() {
   );
 
   return (
-    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
+    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-4 md:px-8 pb-12">
       {/* Header */}
       <PageHeader
         title="Identity & Access"
@@ -169,10 +169,10 @@ export function UserManagement() {
       </div>
 
       {/* User Table */}
-      <div className="surface-tile overflow-hidden">
-        <table className="w-full text-left table-fixed">
+      <div className="surface-tile overflow-x-auto">
+        <table className="w-full text-left">
           <thead>
-            <tr className="text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)]">
+            <tr className="text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)] whitespace-nowrap">
               <th className="px-6 py-4 w-64">Member Identity</th>
               <th className="px-6 py-4">Administrative Role</th>
               <th className="px-6 py-4">Security Status</th>

package/src/components/WebhookManager.tsx

@@ -246,14 +246,14 @@ export function WebhookManager() {
                       </div>
                     </div>
 
-                    <div className="grid sm:grid-cols-3 gap-6 pt-2">
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-2">
                       <div className="space-y-1">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Destination</span>
                         <div className="font-mono text-xs opacity-60 truncate max-w-[200px]" title={webhook.url}>
                           {webhook.url}
                         </div>
                       </div>
-                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                      <div className="space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Events</span>
                         <div className="flex flex-wrap gap-1">
                           {webhook.events.slice(0, 2).map((event) => (
@@ -266,7 +266,7 @@ export function WebhookManager() {
                           )}
                         </div>
                       </div>
-                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                      <div className="space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Activity</span>
                         <div className="text-[10px] font-bold opacity-60 flex items-center gap-1.5">
                           <Clock className="w-3 h-3" />
@@ -367,7 +367,7 @@ export function WebhookManager() {
 
               <div className="space-y-4">
                 <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Subscribed Events</label>
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   {eventOptions.map((opt) => (
                     <button
                       type="button"

package/src/components/blocks/AccordionBlock.tsx

@@ -51,7 +51,7 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ArrayBlock.tsx

@@ -47,7 +47,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ChildBlocksTree.tsx

@@ -165,7 +165,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                   handleRemoveChild(child.id);
                   setConfirmDeleteId(null);
                 }}
-                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                className="px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded"
               >
                 Remove
               </button>
@@ -184,9 +184,9 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                 e.stopPropagation();
                 setConfirmDeleteId(child.id);
               }}
-              className="p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-red-50"
+              className="p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]"
             >
-              <X className="w-3.5 h-3.5 text-red-500 invisible group-hover/column:visible" />
+              <X className="w-3.5 h-3.5 text-[var(--kyro-danger)] invisible group-hover/column:visible" />
             </button>
           )}
         </div>
@@ -445,7 +445,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                   handleRemoveChild(child.id);
                   setConfirmDeleteId(null);
                 }}
-                className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                className="px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded"
               >
                 Remove
               </button>
@@ -464,9 +464,9 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                 e.stopPropagation();
                 setConfirmDeleteId(child.id);
               }}
-              className="p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-red-50"
+              className="p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]"
             >
-              <X className="w-3.5 h-3.5 text-red-500" />
+              <X className="w-3.5 h-3.5 text-[var(--kyro-danger)]" />
             </button>
           )}
         </div>

package/src/components/blocks/CodeBlock.tsx

@@ -47,7 +47,7 @@ export const CodeBlock: React.FC<{ block: Record<string, unknown>; index: number
             <button
               type="button"
               onClick={() => removeBlock(block.id)}
-              className="p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500"
+              className="p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]"
               title="Remove"
             >
               <X className="w-4 h-4" />

package/src/components/blocks/FileBlock.tsx

@@ -45,7 +45,7 @@ export const FileBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/HeroBlock.tsx

@@ -50,7 +50,7 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/ListBlock.tsx

@@ -46,7 +46,7 @@ export const ListBlock: React.FC<{ block: Record<string, unknown>; index: number
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/RelationshipBlock.tsx

@@ -50,7 +50,7 @@ export const RelationshipBlock: React.FC<{ block: Record<string, unknown>; index
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/RichTextBlock.tsx

@@ -48,7 +48,7 @@ export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/blocks/VideoBlock.tsx

@@ -45,7 +45,7 @@ export const VideoBlock: React.FC<{ block: Record<string, unknown>; index: numbe
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1 hover:bg-red-50 rounded text-red-500"
+            className="p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]"
             title="Remove"
           >
             <X className="w-3 h-3" />

package/src/components/fields/BlocksField.tsx

@@ -106,11 +106,10 @@ const SortableBlockComponent = ({
       <div ref={setNodeRef} style={style} className="relative group">
         <div
           onClick={() => setEditingBlockId(block.id as string)}
-          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${
-            isEditing
+          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${isEditing
               ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
               : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-          }`}
+            }`}
         >
           <div
             className="absolute left-0.5 top-1/2 -translate-y-1/2 p-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
@@ -139,7 +138,7 @@ const SortableBlockComponent = ({
                   removeBlock(block.id as string);
                   setShowDeleteConfirm(false);
                 }}
-                className="px-1.5 py-0.5 text-[9px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+                className="px-1.5 py-0.5 text-[9px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90"
               >
                 Remove
               </button>
@@ -170,7 +169,7 @@ const SortableBlockComponent = ({
                   e.stopPropagation();
                   setShowDeleteConfirm(true);
                 }}
-                className="p-0.5 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+                className="p-0.5 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
                 title="Remove"
               >
                 <X className="w-3 h-3" />
@@ -191,9 +190,9 @@ const SortableBlockComponent = ({
   }
 
   return (
-    <div ref={setNodeRef} style={style} className="relative group pl-8 mb-2">
+    <div ref={setNodeRef} style={style} className="relative group md:pl-8 mb-2">
       <div
-        className="absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
+        className="hidden md:absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
         {...attributes}
         {...listeners}
       >
@@ -202,11 +201,10 @@ const SortableBlockComponent = ({
 
       <div
         onClick={() => setEditingBlockId(block.id as string)}
-        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${
-          isEditing
+        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${isEditing
             ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
             : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-        }`}
+          }`}
       >
         {blockIcons[block.type as string] && (
           <span className="text-[var(--kyro-text-secondary)]">
@@ -247,7 +245,7 @@ const SortableBlockComponent = ({
                 removeBlock(block.id as string);
                 setShowDeleteConfirm(false);
               }}
-              className="px-2.5 py-1 text-[10px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+              className="px-2.5 py-1 text-[10px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90"
             >
               Remove
             </button>
@@ -278,7 +276,7 @@ const SortableBlockComponent = ({
                 e.stopPropagation();
                 setShowDeleteConfirm(true);
               }}
-              className="p-1 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+              className="p-1 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors"
               title="Remove Block"
             >
               <X className="w-3.5 h-3.5" />
@@ -394,7 +392,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   useEffect(() => {
     const valueArray = Array.isArray(value) ? value : [];
     const lastValueArray = lastValueRef.current || [];
-    
+
     // Deep compare to catch external data changes (e.g. discard draft / auto-save restore)
     if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
       const valueArrayCopy = [...valueArray];
@@ -528,17 +526,17 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
   // Render active drag overlay
   const activeBlock = activeDrag
-    ? blockCategories
+    ? dynamicCategories
       .flatMap((cat) => cat.blocks)
       .find((b) => `drawer-${b.type}` === activeDrag.id) ||
     blocks.find((b) => b.id === activeDrag.id)
     : null;
 
-const activeBlockLabel = activeBlock
-     ? "label" in activeBlock
-       ? (activeBlock as Record<string, unknown>).label
-       : activeBlock.type
-     : "Block";
+  const activeBlockLabel = activeBlock
+    ? "label" in activeBlock
+      ? (activeBlock as Record<string, unknown>).label
+      : activeBlock.type
+    : "Block";
 
   const borderClass = getBorderClass();