@kyro-cms/admin 0.3.2 → 0.3.4

package/src/styles/main.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");
 @custom-variant dark (&:where(.dark, .dark *));
 
 @source "../../src/**/*.{astro,html,js,jsx,ts,tsx}";
@@ -151,6 +150,7 @@
     from {
       transform: translateX(100%);
     }
+
     to {
       transform: translateX(0);
     }
@@ -169,6 +169,17 @@
       color 300ms ease;
   }
 
+  /* Hide scrollbars on all elements (scroll still works) */
+  * {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  *::-webkit-scrollbar {
+    display: none;
+  }
+
+
   a,
   button,
   [role="button"],
@@ -177,8 +188,28 @@
   input[type="reset"] {
     cursor: pointer;
   }
+
+  /* Premium Utilities */
+  .kyro-glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .dark .kyro-glass {
+    background: rgba(11, 18, 34, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .font-bold {
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    line-height: 1.1;
+  }
 }
 
+
 @layer components {
   .kyro-admin {
     display: flex;
@@ -227,7 +258,7 @@
     padding: 8px 20px;
     font-size: 11px;
     font-weight: 600;
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.05em;
     color: var(--kyro-gray-500);
   }
@@ -494,7 +525,7 @@
     padding: 12px 16px;
     font-size: 12px;
     font-weight: 600;
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.03em;
     color: var(--kyro-gray-500);
     background: var(--kyro-gray-50);
@@ -650,7 +681,7 @@
   .kyro-meta-label {
     font-size: 11px;
     font-weight: 600;
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.03em;
     color: var(--kyro-gray-500);
   }
@@ -920,7 +951,7 @@
     font-size: 11px;
     font-weight: 600;
     color: var(--kyro-gray-500);
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.03em;
   }
 
@@ -1304,7 +1335,7 @@
     font-size: 11px;
     font-weight: 600;
     border-radius: 4px;
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.02em;
   }
 
@@ -1333,66 +1364,97 @@
     color: var(--kyro-text-secondary);
   }
 
-  /* Toast — Monochrome */
-  .kyro-toast {
+  /* Toast — Glassmorphic Monochrome */
+  .kyro-toasts-container {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 24px;
+    right: 24px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 12px;
-    padding: 14px 18px;
-    background: var(--kyro-black);
-    color: var(--kyro-sidebar-text-active);
-    border-radius: 8px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    animation: toast-in 0.2s ease;
     z-index: 9999;
-    pointer-events: auto;
+    pointer-events: none;
   }
 
-  @keyframes toast-in {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
+  .kyro-toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 320px;
+    max-width: 420px;
+    padding: 12px;
+    background: rgba(11, 18, 34, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    color: white;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 20px 25px -5px rgba(0, 0, 0, 0.2);
+    pointer-events: auto;
+    overflow: hidden;
+    position: relative;
+  }
 
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  .dark .kyro-toast {
+    background: rgba(5, 9, 18, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.05);
   }
 
-  .kyro-toast-success {
-    border-left: 4px solid var(--kyro-success);
+  .kyro-toast-accent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--kyro-primary);
   }
 
-  .kyro-toast-error {
-    border-left: 4px solid #ef4444;
+  .kyro-toast-success .kyro-toast-accent { background: #10b981; }
+  .kyro-toast-error .kyro-toast-accent { background: #ef4444; }
+  .kyro-toast-warning .kyro-toast-accent { background: #f59e0b; }
+  .kyro-toast-info .kyro-toast-accent { background: #3b82f6; }
+
+  .kyro-toast-icon-container {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.9);
   }
 
-  .kyro-toast-warning {
-    border-left: 4px solid var(--kyro-gray-400);
+  .kyro-toast-success .kyro-toast-icon-container { color: #10b981; background: rgba(16, 185, 129, 0.1); }
+  .kyro-toast-error .kyro-toast-icon-container { color: #f87171; background: rgba(239, 68, 68, 0.1); }
+  .kyro-toast-warning .kyro-toast-icon-container { color: #fbbf24; background: rgba(245, 158, 11, 0.1); }
+  .kyro-toast-info .kyro-toast-icon-container { color: #60a5fa; background: rgba(59, 130, 246, 0.1); }
+
+  .kyro-toast-content {
+    flex: 1;
+    min-width: 0;
   }
 
-  .kyro-toast-info {
-    border-left: 4px solid var(--kyro-gray-500);
+  .kyro-toast-message {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.4;
   }
 
   .kyro-toast-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border: none;
-    background: transparent;
-    color: var(--kyro-text-muted);
-    cursor: pointer;
-    margin-left: 8px;
+    padding: 6px;
+    border-radius: 8px;
+    color: rgba(255, 255, 255, 0.4);
+    transition: all 0.2s ease;
   }
 
   .kyro-toast-close:hover {
+    background: rgba(255, 255, 255, 0.1);
     color: white;
   }
 
@@ -1762,7 +1824,7 @@
   .kyro-sidebar-user-role {
     font-size: 10px;
     font-weight: 600;
-    text-transform: uppercase;
+    text-transform: none;
     letter-spacing: 0.05em;
     color: var(--kyro-gray-500);
     margin-bottom: 4px;
@@ -1789,7 +1851,7 @@
   outline: none;
 }
 
-.tiptap-editor-wrapper .ProseMirror > * + * {
+.tiptap-editor-wrapper .ProseMirror>*+* {
   margin-top: 0.75em;
 }
 
@@ -1836,7 +1898,7 @@
   font-size: 0;
 }
 
-.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] > * {
+.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content]>* {
   font-size: 0.875rem;
   min-width: 0;
 }
@@ -1879,15 +1941,11 @@
   min-height: 84px;
 }
 
-.tiptap-editor-wrapper
-  .tiptap-column-content[data-node-view-content]
-  > *:first-child {
+.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content]>*:first-child {
   margin-top: 0;
 }
 
-.tiptap-editor-wrapper
-  .tiptap-column-content[data-node-view-content]
-  > *:last-child {
+.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content]>*:last-child {
   margin-bottom: 0;
 }
 
@@ -1902,10 +1960,7 @@
   flex-basis: 100%;
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--1
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-columns-grid[data-node-view-content]>* {
   width: 100%;
   flex: 0 0 100%;
 }
@@ -1915,10 +1970,7 @@
   flex-basis: calc(50% - 0.375rem);
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--2
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-columns-grid[data-node-view-content]>* {
   width: calc(50% - 0.375rem);
   flex: 0 0 calc(50% - 0.375rem);
 }
@@ -1928,10 +1980,7 @@
   flex-basis: calc(33.333% - 0.5rem);
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--3
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-columns-grid[data-node-view-content]>* {
   width: calc(33.333% - 0.5rem);
   flex: 0 0 calc(33.333% - 0.5rem);
 }
@@ -1941,10 +1990,7 @@
   flex-basis: calc(25% - 0.5625rem);
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--4
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-columns-grid[data-node-view-content]>* {
   width: calc(25% - 0.5625rem);
   flex: 0 0 calc(25% - 0.5625rem);
 }
@@ -1954,10 +2000,7 @@
   flex-basis: calc(20% - 0.6rem);
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--5
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-columns-grid[data-node-view-content]>* {
   width: calc(20% - 0.6rem);
   flex: 0 0 calc(20% - 0.6rem);
 }
@@ -1967,10 +2010,7 @@
   flex-basis: calc(16.666% - 0.625rem);
 }
 
-.tiptap-editor-wrapper
-  .tiptap-columns-block--6
-  .tiptap-columns-grid[data-node-view-content]
-  > * {
+.tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-columns-grid[data-node-view-content]>* {
   width: calc(16.666% - 0.625rem);
   flex: 0 0 calc(16.666% - 0.625rem);
 }
@@ -1990,4 +2030,4 @@
 /* Ensure NodeViews render correctly within ProseMirror */
 .tiptap-editor-wrapper .ProseMirror .node--component {
   display: block;
-}
+}

package/src/theme/tokens.ts

@@ -1,6 +1,7 @@
 export interface ThemeColors {
   primary?: string;
   secondary?: string;
+  accent?: string;
   background?: string;
   surface?: string;
   text?: string;

package/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "graphiql/graphiql.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "react-image-crop/dist/ReactCrop.css" {
+  const content: string;
+  export default content;
+}

package/src/collections/auth/index.ts

@@ -1,155 +0,0 @@
-import type { CollectionConfig } from "@kyro-cms/core";
-
-export const usersCollection: CollectionConfig = {
-  slug: "users",
-  label: "Users",
-  singular: "User",
-  type: "singleton",
-  fields: [
-    { name: "id", type: "text", required: true, readonly: true },
-    { name: "email", type: "email", required: true },
-    {
-      name: "role",
-      type: "select",
-      options: [
-        "super_admin",
-        "admin",
-        "editor",
-        "author",
-        "customer",
-        "guest",
-      ],
-      required: true,
-    },
-    { name: "tenantId", type: "text", label: "Tenant" },
-    { name: "emailVerified", type: "boolean", label: "Email Verified" },
-    { name: "locked", type: "boolean" },
-    {
-      name: "lastLogin",
-      type: "datetime",
-      label: "Last Login",
-      readonly: true,
-    },
-    {
-      name: "failedLoginAttempts",
-      type: "number",
-      label: "Failed Login Attempts",
-      readonly: true,
-    },
-    { name: "createdAt", type: "datetime", readonly: true },
-    { name: "updatedAt", type: "datetime", readonly: true },
-  ],
-  access: {
-    create: () => true,
-    read: () => true,
-    update: () => true,
-    delete: () => true,
-  },
-  list: {
-    columns: [
-      "email",
-      "role",
-      "tenantId",
-      "emailVerified",
-      "locked",
-      "lastLogin",
-    ],
-    defaultSort: "createdAt",
-    defaultOrder: "desc",
-  },
-};
-
-export const rolesCollection: CollectionConfig = {
-  slug: "roles",
-  label: "Roles",
-  singular: "Role",
-  type: "collection",
-  fields: [
-    { name: "name", type: "text", required: true },
-    { name: "level", type: "number", required: true },
-    {
-      name: "inherits",
-      type: "array",
-      items: { type: "text" },
-      label: "Inherits From",
-    },
-    { name: "description", type: "richtext" },
-    {
-      name: "permissions",
-      type: "array",
-      items: { type: "text" },
-      label: "Permissions",
-    },
-  ],
-  access: {
-    create: () => true,
-    read: () => true,
-    update: () => true,
-    delete: () => true,
-  },
-  list: {
-    columns: ["name", "level", "inherits", "description"],
-    defaultSort: "level",
-    defaultOrder: "desc",
-  },
-};
-
-export interface AuditLogEntry {
-  id: string;
-  action: string;
-  userId?: string;
-  userEmail?: string;
-  role?: string;
-  resource: string;
-  ipAddress?: string;
-  userAgent?: string;
-  success: boolean;
-  error?: string;
-  metadata?: Record<string, unknown>;
-  timestamp: string;
-}
-
-export const auditLogsCollection: CollectionConfig = {
-  slug: "audit_logs",
-  label: "Audit Logs",
-  singular: "Audit Log",
-  type: "collection",
-  fields: [
-    { name: "id", type: "text", required: true, readonly: true },
-    { name: "action", type: "text", required: true },
-    { name: "userId", type: "text", label: "User ID" },
-    { name: "userEmail", type: "email", label: "User Email" },
-    { name: "role", type: "text" },
-    { name: "resource", type: "text", label: "Resource" },
-    { name: "ipAddress", type: "text", label: "IP Address" },
-    { name: "userAgent", type: "text", label: "User Agent" },
-    { name: "success", type: "boolean" },
-    { name: "error", type: "richtext" },
-    { name: "metadata", type: "json", label: "Metadata" },
-    { name: "timestamp", type: "datetime", required: true, readonly: true },
-  ],
-  access: {
-    create: () => false,
-    read: () => true,
-    update: () => false,
-    delete: () => false,
-  },
-  list: {
-    columns: [
-      "action",
-      "userEmail",
-      "role",
-      "resource",
-      "success",
-      "timestamp",
-    ],
-    defaultSort: "timestamp",
-    defaultOrder: "desc",
-  },
-};
-
-export const authCollections = {
-  users: usersCollection,
-  roles: rolesCollection,
-  audit_logs: auditLogsCollection,
-};