@kyro-cms/admin 0.9.1 → 0.9.2

package/src/components/replace_svgs.cjs

@@ -0,0 +1,63 @@
+const fs = require('fs');
+const path = require('path');
+
+const dir = '/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components';
+const getFiles = (dir) => {
+  const dirents = fs.readdirSync(dir, { withFileTypes: true });
+  const files = dirents.map((dirent) => {
+    const res = path.resolve(dir, dirent.name);
+    return dirent.isDirectory() ? getFiles(res) : res;
+  });
+  return Array.prototype.concat(...files).filter(f => f.endsWith('.tsx'));
+};
+
+const files = getFiles(dir);
+
+const replacements = [
+  { match: /<svg[^>]*>\s*<path[^>]*d="M12 4v16m8-8H4"[^>]*\/>\s*<\/svg>/g, replace: '<Plus className="w-4 h-4" />', icon: 'Plus' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"[^>]*\/>\s*<\/svg>/g, replace: '<Upload className="w-4 h-4" />', icon: 'Upload' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"[^>]*\/>\s*<\/svg>/g, replace: '<Copy className="w-4 h-4" />', icon: 'Copy' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 7l-\.867 12\.142A2 2 0 0116\.138 21H7\.862a2 2 0 01-1\.995-1\.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"[^>]*\/>\s*<\/svg>/g, replace: '<Trash2 className="w-4 h-4" />', icon: 'Trash2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"[^>]*\/>\s*<\/svg>/g, replace: '<Lock className="w-4 h-4" />', icon: 'Lock' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M10 18a8 8 0 100-16 8 8 0 000 16zm3\.707-9\.293a1 1 0 00-1\.414-1\.414L9 10\.586 7\.707 9\.293a1 1 0 00-1\.414 1\.414l2 2a1 1 0 001\.414 0l4-4z"[^>]*\/>\s*<\/svg>/g, replace: '<CheckCircle2 className="w-4 h-4" />', icon: 'CheckCircle2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1\.414-9\.414a2 2 0 112\.828 2\.828L11\.828 15H9v-2\.828l8\.586-8\.586z"[^>]*\/>\s*<\/svg>/g, replace: '<Edit2 className="w-4 h-4" />', icon: 'Edit2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M10 18a8 8 0 100-16 8 8 0 000 16zM8\.707 7\.293a1 1 0 00-1\.414 1\.414L8\.586 10l-1\.293 1\.293a1 1 0 101\.414 1\.414L10 11\.414l1\.293 1\.293a1 1 0 001\.414-1\.414L11\.414 10l1\.293-1\.293a1 1 0 00-1\.414-1\.414L10 8\.586 8\.707 7\.293z"[^>]*\/>\s*<\/svg>/g, replace: '<XCircle className="w-4 h-4" />', icon: 'XCircle' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M6 18L18 6M6 6l12 12"[^>]*\/>\s*<\/svg>/g, replace: '<X className="w-4 h-4" />', icon: 'X' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"[^>]*\/>\s*<\/svg>/g, replace: '<Search className="w-4 h-4" />', icon: 'Search' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 13l4 4L19 7"[^>]*\/>\s*<\/svg>/g, replace: '<Check className="w-4 h-4" />', icon: 'Check' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2\.586a1 1 0 01-\.293\.707l-6\.414 6\.414a1 1 0 00-\.293\.707V17l-4 4v-6\.586a1 1 0 00-\.293-\.707L3\.293 7\.293A1 1 0 013 6\.586V4z"[^>]*\/>\s*<\/svg>/g, replace: '<Filter className="w-4 h-4" />', icon: 'Filter' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"[^>]*\/>\s*<\/svg>/g, replace: '<Columns3 className="w-4 h-4" />', icon: 'Columns3' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M12 5v14M5 12h14"[^>]*\/>\s*<\/svg>/g, replace: '<Plus className="w-4 h-4" />', icon: 'Plus' },
+  { match: /<svg[^>]*>\s*<path[^>]*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-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"[^>]*\/>\s*<\/svg>/g, replace: '<Archive className="w-4 h-4" />', icon: 'Archive' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 15l7-7 7 7"[^>]*\/>\s*<\/svg>/g, replace: '<ChevronUp className="w-4 h-4" />', icon: 'ChevronUp' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M15 19l-7-7 7-7"[^>]*\/>\s*<\/svg>/g, replace: '<ChevronRight className="w-4 h-4" />', icon: 'ChevronRight' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M20 6L9 17l-5-5"[^>]*\/>\s*<\/svg>/g, replace: '<Check className="w-4 h-4" />', icon: 'Check' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"[^>]*\/>\s*<\/svg>/g, replace: '<ExternalLink className="w-4 h-4" />', icon: 'ExternalLink' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"[^>]*\/>\s*<\/svg>/g, replace: '<File className="w-4 h-4" />', icon: 'File' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"[^>]*\/>\s*<\/svg>/g, replace: '<Clipboard className="w-4 h-4" />', icon: 'Clipboard' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M18 6L6 18M6 6l12 12"[^>]*\/>\s*<\/svg>/g, replace: '<X className="w-4 h-4" />', icon: 'X' },
+  { match: /<svg[^>]*>\s*<path[^>]*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"[^>]*\/>\s*<\/svg>/g, replace: '<Server className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]" />', icon: 'Server' }
+];
+
+const results = {};
+
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  let changed = false;
+  let addedIcons = new Set();
+  
+  for (const r of replacements) {
+    if (content.match(r.match)) {
+      content = content.replace(r.match, r.replace);
+      addedIcons.add(r.icon);
+      changed = true;
+    }
+  }
+  
+  if (changed) {
+    results[file] = Array.from(addedIcons);
+    fs.writeFileSync(file, content);
+  }
+}
+
+console.log(JSON.stringify(results, null, 2));

package/src/components/ui/Dropdown.tsx

@@ -4,12 +4,14 @@ interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
   align?: "left" | "right";
+  direction?: "up" | "down";
 }
 
 export function Dropdown({
   trigger,
   children,
   align = "right",
+  direction = "up",
 }: DropdownProps) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -34,8 +36,11 @@ export function Dropdown({
       </div>
       {open && (
         <div
-          className={`absolute z-[100] mt-2 min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${align === "right" ? "right-0 bottom-full mb-2" : "left-0 bottom-full mb-2"
-            }`}
+          className={`absolute z-[100] min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${
+            align === "right" ? "right-0" : "left-0"
+          } ${
+            direction === "down" ? "top-full mt-2" : "bottom-full mb-2"
+          }`}
           onClick={() => setOpen(false)}
         >
           {children}

package/src/components/ui/Modal.tsx

@@ -1,3 +1,4 @@
+import { X } from "./icons";
 import React, { useEffect, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 
@@ -17,8 +18,8 @@ interface ModalProps {
   title: string;
   children: ReactNode;
   footer?: ReactNode;
-  size?: "sm" | "md" | "lg";
-  variant?: "default" | "danger";
+  size?: "sm" | "md" | "lg" | "full";
+  variant?: "default" | "danger" | "lightbox";
 }
 
 export function Modal({
@@ -52,43 +53,39 @@ export function Modal({
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
+    full: "w-full h-full max-w-none rounded-none border-0",
   };
 
+  const isLightbox = variant === "lightbox";
+
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
       <div
-        className="absolute inset-0 bg-[var(--kyro-black)]/40 backdrop-blur-md transition-all duration-500"
+        className={`absolute inset-0 transition-all duration-500 ${isLightbox ? "bg-black/95 backdrop-blur-none" : "bg-[var(--kyro-black)]/40 backdrop-blur-md"}`}
         onClick={onClose}
       />
       <div
-        className={`relative w-full ${sizeClasses[size]} bg-[var(--kyro-surface)] rounded-[var(--kyro-radius-lg)] shadow-2xl animate-in fade-in zoom-in-95 duration-300 border ${variant === "danger"
+        className={`relative ${sizeClasses[size]} ${isLightbox ? "bg-transparent text-white" : "bg-[var(--kyro-surface)]"} ${!isLightbox && size !== "full" ? "rounded-[var(--kyro-radius-lg)]" : ""} shadow-2xl animate-in fade-in zoom-in-95 duration-300 ${!isLightbox ? "border" : ""} ${variant === "danger"
           ? "border-red-500/30"
           : "border-[var(--kyro-border)]"
-          } overflow-hidden`}
+          } flex flex-col overflow-hidden`}
       >
-        <div className="flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md">
-          <h2 className="text-xl font-bold text-[var(--kyro-text-primary)]">
-            {title}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200"
-          >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
+        {!isLightbox && (
+          <div className="flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md">
+            <h2 className="text-xl font-bold text-[var(--kyro-text-primary)]">
+              {title}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200"
             >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        <div className="px-8 py-8">{children}</div>
-        {footer && (
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+        <div className={`flex-1 overflow-auto ${isLightbox ? "" : "px-8 py-8"}`}>{children}</div>
+        {footer && !isLightbox && (
           <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50">
             {footer}
           </div>

package/src/components/ui/PromptModal.tsx

@@ -1,3 +1,4 @@
+import { X } from "./icons";
 import React, { useState } from "react";
 import { createPortal } from "react-dom";
 
@@ -47,16 +48,7 @@ export function PromptModal({
             onClick={onClose}
             className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="w-4 h-4" />
           </button>
         </div>
         <form onSubmit={handleSubmit}>

package/src/components/ui/SlidePanel.tsx

@@ -1,3 +1,4 @@
+import { X } from "./icons";
 import React, { useEffect, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 
@@ -78,16 +79,7 @@ export function SlidePanel({
             onClick={onClose}
             className="p-1.5 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors"
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="w-4 h-4" />
           </button>
         </div>
         <div className="flex-1 overflow-y-auto p-4">{children}</div>

package/src/components/ui/SplitButton.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import type { ReactNode } from "react";
+import { Dropdown } from "./Dropdown";
+import { Spinner } from "./Spinner";
+
+export type SplitButtonStatus = "draft" | "published" | "scheduled" | "archived";
+export type SplitButtonSaveStatus = "idle" | "saving" | "saved" | "error";
+
+export interface SplitButtonProps {
+  /** Current publish status of the document */
+  status: SplitButtonStatus;
+  /** Live save operation status driven by the parent */
+  saveStatus: SplitButtonSaveStatus;
+  /** True when the form has unsaved changes vs last persisted version */
+  hasChanges: boolean;
+  /** Called when the main publish button is clicked */
+  onPublish: () => void;
+  /** Publish-variant items for the chevron dropdown (Save as Draft, Schedule) */
+  children?: ReactNode;
+  disabled?: boolean;
+  direction?: "up" | "down";
+}
+
+export function SplitButton({
+  status,
+  saveStatus,
+  hasChanges,
+  onPublish,
+  children,
+  disabled,
+  direction = "down",
+}: SplitButtonProps) {
+  const isPublishedIdle =
+    status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error";
+
+  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle;
+
+  // ── button colour ──────────────────────────────────────────────────────────
+  const btnBase =
+    "kyro-btn kyro-btn-sm text-[11px] font-regular tracking-widest transition-all duration-300 rounded-lg";
+
+  const getBtnClass = () => {
+    if (saveStatus === "saving") return `${btnBase} bg-[var(--kyro-primary)]/70 border-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] cursor-wait`;
+    if (saveStatus === "saved")  return `${btnBase} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)]`;
+    if (saveStatus === "error")  return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
+    if (isPublishedIdle)         return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
+    // has changes → accent
+    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+  };
+
+  const chevronBase =
+    "kyro-btn kyro-btn-md px-2 rounded-l-none border-l-[1px] border-white/20 transition-all duration-300";
+
+  const getChevronClass = () => {
+    if (saveStatus === "saving") return `${chevronBase} bg-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)]/70`;
+    if (saveStatus === "saved")  return `${chevronBase} bg-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-success)]`;
+    if (saveStatus === "error")  return `${chevronBase} bg-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-error)]`;
+    if (isPublishedIdle)         return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
+    return `${chevronBase} bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+  };
+
+  // ── label ──────────────────────────────────────────────────────────────────
+  const getLabel = () => {
+    if (saveStatus === "saving") return "Publishing...";
+    if (saveStatus === "saved")  return "Published ✓";
+    if (saveStatus === "error")  return "Retry";
+    if (isPublishedIdle)         return "Published";
+    return "Publish Changes";
+  };
+
+  return (
+    <div className="inline-flex items-center">
+      {/* Main publish button */}
+      <button
+        type="button"
+        onClick={onPublish}
+        disabled={isDisabled}
+        className={`${getBtnClass()} ${!children ? "rounded-r-lg border-r border-[var(--kyro-border)]" : ""}`}
+      >
+        {saveStatus === "saving" && <Spinner size="sm" className="inline mr-1.5" />}
+        {isPublishedIdle && (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="inline mr-1">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        )}
+        {getLabel()}
+      </button>
+
+      {/* Chevron → publish-variant actions only */}
+      {children && (
+        <Dropdown
+          trigger={
+            <button type="button" className={getChevronClass()} disabled={saveStatus === "saving"}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+          }
+          direction={direction}
+        >
+          {children}
+        </Dropdown>
+      )}
+    </div>
+  );
+}
+

package/src/components/ui/Toaster.tsx

@@ -2,7 +2,6 @@ import { useToastStore } from "../../lib/stores";
 import { Toast } from "./Toast";
 
 export function Toaster() {
-  console.log('Toaster mounted');
   const toasts = useToastStore((state) => state.toasts);
   const removeToast = useToastStore((state) => state.removeToast);
 

package/src/components/ui/icons.tsx

@@ -110,3 +110,4 @@ export { Grid3X3 as IconGrid3X3 } from "lucide-react";
 // Direct re-exports for files that still use original lucide-react names
 export { Activity as Activity, AlignLeft as AlignLeft, Archive as Archive, ArrowDown as ArrowDown, ArrowRight as ArrowRight, ArrowUpRight as ArrowUpRight, Blocks as Blocks, Box as Box, Calendar as Calendar, Check as Check, ChevronDown as ChevronDown, ChevronLeft as ChevronLeft, ChevronRight as ChevronRight, ChevronUp as ChevronUp, Clock as Clock, Code as Code, Columns3 as Columns3, Copy as Copy, Crop as Crop, Download as Download, ExternalLink as ExternalLink, Eye as Eye, EyeOff as EyeOff, File as File, File as FileIcon, FileText as FileText, Globe as Globe, Film as Film, Filter as Filter, Folder as Folder, FolderInput as FolderInput, FolderPlus as FolderPlus, GripVertical as GripVertical, Heading1 as Heading1, Image as Image, Info as Info, Key as Key, LayoutDashboard as LayoutDashboard, Link as Link, Link2 as Link2, List as List, ListOrdered as ListOrdered, Lock as Lock, Mail as Mail, Maximize2 as Maximize2, Menu as Menu, Minus as Minus, Monitor as Monitor, MousePointerClick as MousePointerClick, Music as Music, Palette as Palette, Pause as Pause, Play as Play, Plus as Plus, RefreshCcw as RefreshCcw, RefreshCw as RefreshCw, Save as Save, Search as Search, Send as Send, Settings as Settings, Shield as Shield, Sparkles as Sparkles, Star as Star, Tag as Tag, Terminal as Terminal, ToggleLeft as ToggleLeft, ToggleRight as ToggleRight, Trash2 as Trash2, TrendingUp as TrendingUp, Type as Type, User as User, UserPlus as UserPlus, Users as Users, Video as Video, Webhook as Webhook, X as X, Zap as Zap, CircleHelp as HelpCircle } from "lucide-react";
 export { CircleCheck as CheckCircle2, Grid3X3 as Grid, House as Home, LayoutPanelTop as Layout, LoaderCircle as Loader2, LockOpen as Unlock, CirclePlay as PlayCircle, TriangleAlert as AlertTriangle, CodeXml as Code2, CloudDownload as DownloadCloud, EllipsisVertical as MoreVertical, ShieldCheck as ShieldCheck, ShieldAlert as ShieldAlert, Pencil as Edit2, Moon as Moon, Sun as Sun, LogOut as LogOut, Database as Database, Hexagon as Hexagon, Network as Network, Book as Book, Bold as Bold, Italic as Italic, Underline as Underline, Strikethrough as Strikethrough, Undo as Undo, Redo as Redo, Dot as Dot, Grid3X3, Laptop as Laptop, Smartphone as Smartphone } from "lucide-react";
+export { Server as Server, XCircle as XCircle, Clipboard as Clipboard, Upload as Upload } from "lucide-react";

package/src/components/users/UsersList.tsx

@@ -1,3 +1,4 @@
+import { Plus, Lock, CheckCircle2, Edit2, Trash2, XCircle, X } from "../ui/icons";
 import React, { useState } from "react";
 import { useUIStore } from "../../lib/stores";
 
@@ -144,19 +145,7 @@ export function UsersList({
                 href={`${adminPath}/users/new`}
                 className="mt-2 inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm shadow-md"
               >
-                <svg
-                  className="w-3.5 h-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2.5"
-                    d="M12 5v14M5 12h14"
-                  />
-                </svg>
+                <Plus className="w-4 h-4" />
                 Add User
               </a>
             </div>
@@ -214,32 +203,12 @@ export function UsersList({
                   <td className="px-6 py-5">
                     {user.locked ? (
                       <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-red-50 text-red-600">
-                        <svg
-                          className="w-3 h-3"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
+                        <Lock className="w-4 h-4" />
                         Locked
                       </span>
                     ) : (
                       <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-green-50 text-green-600">
-                        <svg
-                          className="w-3 h-3"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
+                        <CheckCircle2 className="w-4 h-4" />
                         Active
                       </span>
                     )}
@@ -254,19 +223,7 @@ export function UsersList({
                         className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-100 hover:text-[#0b1222] transition-colors"
                         onClick={(e) => e.stopPropagation()}
                       >
-                        <svg
-                          className="w-4 h-4"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                          />
-                        </svg>
+                        <Edit2 className="w-4 h-4" />
                       </a>
                       <button
                         onClick={(e) => {
@@ -275,19 +232,7 @@ export function UsersList({
                         }}
                         className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-red-50 hover:text-red-600 transition-colors"
                       >
-                        <svg
-                          className="w-4 h-4"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                          />
-                        </svg>
+                        <Trash2 className="w-4 h-4" />
                       </button>
                     </div>
                   </td>
@@ -300,35 +245,13 @@ export function UsersList({
 
       {errorMsg && (
         <div className="surface-tile p-4 flex items-center gap-3 border border-red-200">
-          <svg
-            className="w-5 h-5 text-red-500 flex-shrink-0"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              fillRule="evenodd"
-              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-              clipRule="evenodd"
-            />
-          </svg>
+          <XCircle className="w-4 h-4" />
           <p className="text-sm font-medium text-red-500">{errorMsg}</p>
           <button
             onClick={() => setErrorMsg(null)}
             className="ml-auto text-red-400 hover:text-red-600"
           >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
+            <X className="w-4 h-4" />
           </button>
         </div>
       )}