@kyro-cms/admin 0.9.1 → 0.9.3

package/src/components/MediaGallery.tsx

@@ -1,8 +1,11 @@
+import { Search, Check, Server } from "./ui/icons";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { SlidePanel } from "./ui/SlidePanel";
+import { Modal } from "./ui/Modal";
+import { Pagination } from "./ui/Pagination";
 import { Badge } from "./ui/Badge";
 import { Folder } from "./ui/icons";
 
@@ -455,19 +458,7 @@ export function MediaGallery({
 
         <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
           <div className="relative group flex-1 min-w-[200px]">
-            <svg
-              className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.5"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
+            <Search className="w-4 h-4" />
             <input
               type="text"
               placeholder="Search assets..."
@@ -669,19 +660,7 @@ export function MediaGallery({
                             onClick={(e) => handleSelectOne(item.id, e)}
                             className={`kyro-btn-primary p-1.5 rounded-lg transition-all ${selectedIds.has(item.id) ? "" : "bg-white/10 text-white hover:bg-white/20"}`}
                           >
-                            <svg
-                              className="w-3 h-3"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="3"
-                                d="M5 13l4 4L19 7"
-                              />
-                            </svg>
+                            <Check className="w-4 h-4" />
                           </button>
                         </div>
                       </div>
@@ -689,19 +668,7 @@ export function MediaGallery({
 
                     {selectedIds.has(item.id) && (
                       <div className="absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-white flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300">
-                        <svg
-                          className="w-3 h-3"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="3"
-                            d="M5 13l4 4L19 7"
-                          />
-                        </svg>
+                        <Check className="w-4 h-4" />
                       </div>
                     )}
                   </div>
@@ -802,30 +769,11 @@ export function MediaGallery({
             )}
           </div>
 
-          {/* Pagination */}
-          {totalPages > 1 && (
-            <div className="p-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface)]/50 backdrop-blur-md flex items-center justify-between">
-              <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50">
-                Page {page} of {totalPages}
-              </span>
-              <div className="flex gap-2">
-                <button
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                  className="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30 transition-all"
-                >
-                  Previous
-                </button>
-                <button
-                  disabled={page === totalPages}
-                  onClick={() => setPage(page + 1)}
-                  className="px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-xs font-bold shadow-lg hover:opacity-90 disabled:opacity-30 transition-all"
-                >
-                  Next
-                </button>
-              </div>
-            </div>
-          )}
+          <Pagination
+            page={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+          />
         </div>
       </div>
 
@@ -1088,58 +1036,66 @@ export function MediaGallery({
       </SlidePanel>
 
       {/* Preview Modal */}
-      {showPreview &&
-        panelItem &&
-        createPortal(
-          <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col animate-in fade-in duration-500">
-            <div className="flex items-center justify-between p-6">
-              <div className="flex flex-col">
-                <span className="text-white font-bold text-lg tracking-tight">
-                  {panelItem.filename}
-                </span>
-                <span className="text-white/40 text-[10px] font-bold  tracking-widest mt-1">
-                  {formatFileSize(panelItem.fileSize)} · {panelItem.mimeType}
-                </span>
-              </div>
-              <button
-                onClick={() => setShowPreview(false)}
-                className="p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90"
-              >
-                <X className="w-6 h-6" />
-              </button>
-            </div>
-            <div className="flex-1 w-full flex items-center justify-center p-12">
-              {panelItem.type === "image" ? (
-                <img
-                  src={getAbsoluteUrl(panelItem.url)}
-                  alt=""
-                  className="max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
-                />
-              ) : panelItem.type === "video" ? (
-                <video
-                  src={getAbsoluteUrl(panelItem.url)}
-                  controls
-                  autoPlay
-                  className="max-h-full max-w-full rounded-lg shadow-2xl"
-                />
-              ) : (
-                <div className="text-white text-center">
-                  <FileIcon className="w-24 h-24 mx-auto mb-6 opacity-20" />
-                  <p className="text-xl font-bold opacity-50">
-                    Preview not available for this file type
-                  </p>
-                </div>
-              )}
+      {showPreview && panelItem && (
+        <Modal
+          open={showPreview}
+          onClose={() => setShowPreview(false)}
+          title=""
+          size="full"
+          variant="lightbox"
+        >
+          <div className="flex items-center justify-between p-6">
+            <div className="flex flex-col">
+              <span className="text-white font-bold text-lg tracking-tight">
+                {panelItem.filename}
+              </span>
+              <span className="text-white/40 text-[10px] font-bold  tracking-widest mt-1">
+                {formatFileSize(panelItem.fileSize)} · {panelItem.mimeType}
+              </span>
             </div>
-          </div>,
-          document.body,
-        )}
+            <button
+              onClick={() => setShowPreview(false)}
+              className="p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+          <div className="flex-1 w-full flex items-center justify-center p-12">
+            {panelItem.type === "image" ? (
+              <img
+                src={getAbsoluteUrl(panelItem.url)}
+                alt=""
+                className="max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
+              />
+            ) : panelItem.type === "video" ? (
+              <video
+                src={getAbsoluteUrl(panelItem.url)}
+                controls
+                autoPlay
+                className="max-h-full max-w-full rounded-lg shadow-2xl"
+              />
+            ) : (
+              <div className="text-white text-center">
+                <FileIcon className="w-24 h-24 mx-auto mb-6 opacity-20" />
+                <p className="text-xl font-bold opacity-50">
+                  Preview not available for this file type
+                </p>
+              </div>
+            )}
+          </div>
+        </Modal>
+      )}
 
       {/* Crop Modal */}
-      {!pickerMode && showCrop &&
-        panelItem &&
-        createPortal(
-          <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col p-8">
+      {!pickerMode && showCrop && panelItem && (
+        <Modal
+          open={showCrop}
+          onClose={() => setShowCrop(false)}
+          title=""
+          size="full"
+          variant="lightbox"
+        >
+          <div className="flex flex-col h-full p-8">
             <div className="flex items-center justify-between mb-8">
               <h3 className="text-white font-bold text-2xl tracking-tighter">
                 Crop Image
@@ -1173,9 +1129,9 @@ export function MediaGallery({
                 />
               </ReactCrop>
             </div>
-          </div>,
-          document.body,
-        )}
+          </div>
+        </Modal>
+      )}
       {!pickerMode && (
         <PromptModal
           open={showNewFolderModal}
@@ -1185,67 +1141,53 @@ export function MediaGallery({
           placeholder="Folder name"
         />
       )}
-      {!pickerMode && showStorageConfigModal &&
-        createPortal(
-          <div className="fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center p-4">
-            <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl">
-              <div className="text-center">
-                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--kyro-sidebar-active)] flex items-center justify-center">
-                  <svg
-                    className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v1m2 2a2 2 0 11-4 0 2 2 0 014 0zm2 2h.008v.008H5v-.008z"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-xl font-bold text-[var(--kyro-text-primary)] mb-2">
-                  Storage Not Configured
-                </h3>
-                <p className="text-[var(--kyro-text-secondary)] mb-6 text-sm">
-                  Before uploading media, you need to configure your storage
-                  settings. Choose where files should be stored and how URLs are
-                  generated.
-                </p>
-                <div className="flex gap-3">
-                  <a
-                    href="/settings/storage-settings"
-                    className="flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors"
-                  >
-                    Configure Storage
-                  </a>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      // Set default storage config programmatically
-                      apiPost("/api/globals/storage-settings", {
-                        provider: "local",
-                        local: {
-                          uploadDir: "./public/uploads",
-                          baseUrl: "/uploads",
-                        },
-                      }).then(() => {
-                        setShowStorageConfigModal(false);
-                        setStorageConfigured(true);
-                        window.location.reload();
-                      });
-                    }}
-                    className="flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors"
-                  >
-                    Use Defaults
-                  </button>
-                </div>
-              </div>
+      {!pickerMode && (
+        <Modal
+          open={showStorageConfigModal}
+          onClose={() => setShowStorageConfigModal(false)}
+          title="Storage Not Configured"
+          size="md"
+        >
+          <div className="text-center">
+            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--kyro-sidebar-active)] flex items-center justify-center">
+              <Server className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]" />
             </div>
-          </div>,
-          document.body,
-        )}
+            <p className="text-[var(--kyro-text-secondary)] mb-6 text-sm">
+              Before uploading media, you need to configure your storage
+              settings. Choose where files should be stored and how URLs are
+              generated.
+            </p>
+            <div className="flex gap-3">
+              <a
+                href="/settings/storage-settings"
+                className="flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors"
+              >
+                Configure Storage
+              </a>
+              <button
+                type="button"
+                onClick={() => {
+                  // Set default storage config programmatically
+                  apiPost("/api/globals/storage-settings", {
+                    provider: "local",
+                    local: {
+                      uploadDir: "./public/uploads",
+                      baseUrl: "/uploads",
+                    },
+                  }).then(() => {
+                    setShowStorageConfigModal(false);
+                    setStorageConfigured(true);
+                    window.location.reload();
+                  });
+                }}
+                className="flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors"
+              >
+                Use Defaults
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
       {!pickerMode && (
         <input
           type="file"

package/src/components/RestPlayground.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { useUIStore, toast } from "../lib/stores";
 import { apiPath } from "../lib/paths";
+import { Modal } from "./ui/Modal";
 
 interface EnvVariable {
   key: string;
@@ -731,59 +732,65 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       </div>
 
       {/* Modals */}
-      {showFolderModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
-          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
-            <h2 className="text-xl font-bold mb-4">Create Folder</h2>
+      <Modal
+        open={showFolderModal}
+        onClose={() => setShowFolderModal(false)}
+        title="Create Folder"
+        size="md"
+        footer={
+          <>
+            <button type="button" onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button type="button" onClick={createFolder} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
+          </>
+        }
+      >
+        <div className="py-2">
+          <input
+            type="text"
+            value={newFolderName}
+            onChange={(e) => setNewFolderName(e.target.value)}
+            placeholder="Folder name..."
+            className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+          />
+        </div>
+      </Modal>
+
+      <Modal
+        open={showSaveModal}
+        onClose={() => setShowSaveModal(false)}
+        title="Save Request"
+        size="md"
+        footer={
+          <>
+            <button type="button" onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button type="button" onClick={saveRequest} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!saveRequestName || !saveToFolderId}>Save</button>
+          </>
+        }
+      >
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
             <input
               type="text"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              placeholder="Folder name..."
-              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2 mb-6"
+              value={saveRequestName}
+              onChange={(e) => setSaveRequestName(e.target.value)}
+              placeholder="e.g. List Posts..."
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
             />
-            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
-              <button type="button" onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-              <button type="button" onClick={createFolder} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
-            </div>
           </div>
-        </div>
-      )}
-
-      {showSaveModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
-          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
-            <h2 className="text-xl font-bold mb-4">Save Request</h2>
-            <div className="space-y-4">
-              <div>
-                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
-                <input
-                  type="text"
-                  value={saveRequestName}
-                  onChange={(e) => setSaveRequestName(e.target.value)}
-                  placeholder="e.g. List Posts..."
-                  className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
-                />
-              </div>
-              <div>
-                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
-                <select
-                  value={saveToFolderId}
-                  onChange={(e) => setSaveToFolderId(e.target.value)}
-                  className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
-                >
-                  <option value="">Select Folder...</option>
-                  {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
-                </select>
-              </div>
-            </div>
-            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
-              <button type="button" onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-              <button type="button" onClick={saveRequest} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!saveRequestName || !saveToFolderId}>Save</button>
-            </div>
+          <div>
+            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
+            <select
+              value={saveToFolderId}
+              onChange={(e) => setSaveToFolderId(e.target.value)}
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+            >
+              <option value="">Select Folder...</option>
+              {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
+            </select>
           </div>
         </div>
-      )}
+      </Modal>
     </div>
   );
 }

package/src/components/fields/BlocksField.tsx

@@ -394,11 +394,9 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   useEffect(() => {
     const valueArray = Array.isArray(value) ? value : [];
     const lastValueArray = lastValueRef.current || [];
-    const valueIds = valueArray.map((b: Record<string, unknown>) => b.id).join(",");
-    const lastValueIds = lastValueArray.map((b: Record<string, unknown>) => b.id).join(",");
-
-    if (valueIds !== lastValueIds) {
-      console.log("BlocksField sync: value=", value, "valueIds=", valueIds, "lastValueIds=", lastValueIds);
+    
+    // Deep compare to catch external data changes (e.g. discard draft / auto-save restore)
+    if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
       const valueArrayCopy = [...valueArray];
       prevBlocksLengthRef.current = valueArrayCopy.length;
       prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: Record<string, unknown>) => b.id));
@@ -407,6 +405,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
       isInitializedRef.current = true;
     } else if (valueArray.length === 0 && !isInitializedRef.current) {
       isInitializedRef.current = true;
+      lastValueRef.current = []; // Fix for new pages starting with empty arrays
     }
   }, [value, field.name, store]);
 
@@ -416,12 +415,11 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   useEffect(() => {
     if (!onChangeRef.current) return;
     const lastValue = lastValueRef.current;
-    if (!lastValue) return;
-
-    const currentIds = blocks.map((b: Record<string, unknown>) => b.id).join(",");
-    const lastIds = lastValue.map((b: Record<string, unknown>) => b.id).join(",");
+    if (!lastValue) return; // Wait until initialized
 
-    if (currentIds !== lastIds) {
+    // Deep compare blocks vs lastValue to detect content edits, not just ID changes
+    if (JSON.stringify(blocks) !== JSON.stringify(lastValue)) {
+      lastValueRef.current = [...blocks]; // Update ref BEFORE firing onChange to prevent loops
       onChangeRef.current(blocks);
     }
   }, [blocks]);

package/src/components/fields/RelationshipBlockField.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Search, Loader2, X } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
+import { EmptyState } from "../ui/EmptyState";
 
 interface RelationshipBlockFieldProps {
   relationTo?: string;
@@ -171,9 +172,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
                 Loading...
               </div>
             ) : options.length === 0 ? (
-              <div className="p-3 text-center text-sm text-[var(--kyro-text-muted)]">
-                No results found
-              </div>
+              <EmptyState title="No results found" />
             ) : (
               <div className="py-1">
                 {options.map((opt) => (

package/src/components/fields/RelationshipField.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import { Search, X, ChevronDown, Loader2 } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
+import { EmptyState } from "../ui/EmptyState";
 
 interface RelationshipFieldProps {
   field: {
@@ -314,9 +315,7 @@ export function RelationshipField({
                 Loading...
               </div>
             ) : options.length === 0 ? (
-              <div className="p-4 text-center text-sm text-[var(--kyro-text-muted)]">
-                No results found
-              </div>
+              <EmptyState title="No results found" />
             ) : (
               <div className="py-1">
                 {options.map((opt) => (

package/src/components/fix_imports.cjs

@@ -0,0 +1,23 @@
+const fs = require('fs');
+
+const addImport = (file, icons, relativePath) => {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('from "' + relativePath + '"')) {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  } else {
+    // If it exists, we might need to append to the existing import. 
+    // To be safe and simple, let's just add a new line. TS merges imports.
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  }
+}
+
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/MediaGallery.tsx', ['Search', 'Check', 'Server'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/Modal.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/PromptModal.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/SlidePanel.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/users/UsersList.tsx', ['Plus', 'Lock', 'CheckCircle2', 'Edit2', 'Trash2', 'XCircle', 'X'], '../ui/icons');
+

package/src/components/fix_imports2.cjs

@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+const addImport = (file, icons, relativePath) => {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('from "' + relativePath + '"')) {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  } else {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  }
+}
+
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/AuditLogsPage.tsx', ['Search'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/AutoForm.tsx', ['ChevronRight', 'Check', 'ExternalLink', 'X'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ListView.tsx', ['Search', 'Filter', 'Columns3', 'X', 'Trash2', 'Archive', 'ChevronUp', 'Edit2'], './ui/icons');
+