@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/CreateView.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { KyroConfig, CollectionConfig } from "@kyro-cms/core";
+import type { KyroConfig, CollectionConfig } from "@kyro-cms/core/client";
 import { AutoForm } from "./AutoForm";
 import { Spinner } from "./ui/Spinner";
 

package/src/components/DetailView.tsx

@@ -3,7 +3,7 @@ import type {
   KyroConfig,
   CollectionConfig,
   GlobalConfig,
-} from "@kyro-cms/core";
+} from "@kyro-cms/core/client";
 import { AutoForm } from "./AutoForm";
 import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { ConfirmModal } from "./ui/Modal";

package/src/components/EnhancedListView.tsx

@@ -8,6 +8,8 @@ export interface FieldConfig {
   label?: string;
   required?: boolean;
   options?: { value: string; label: string }[];
+  fields?: FieldConfig[];
+  tabs?: Array<{ label?: string; name?: string; fields?: FieldConfig[] }>;
   admin?: {
     hidden?: boolean;
     readonly?: boolean;
@@ -23,20 +25,21 @@ export interface CollectionConfig {
   admin?: {
     description?: string;
     defaultColumns?: string[];
+    useAsTitle?: string;
   };
 }
 
 interface FilterConfig {
   field: string;
   operator:
-  | "equals"
-  | "contains"
-  | "gt"
-  | "lt"
-  | "gte"
-  | "lte"
-  | "between"
-  | "in";
+    | "equals"
+    | "contains"
+    | "gt"
+    | "lt"
+    | "gte"
+    | "lte"
+    | "between"
+    | "in";
   value: string;
 }
 
@@ -91,19 +94,75 @@ export function EnhancedListView({
   const [showFilters, setShowFilters] = useState(false);
   const [showColumns, setShowColumns] = useState(false);
 
+  function flattenFields(fields: FieldConfig[]): FieldConfig[] {
+    const result: FieldConfig[] = [];
+    for (const field of fields) {
+      if (!field.name || field.admin?.hidden || field.name === "id") continue;
+      if (field.type === "tabs" && field.tabs) {
+        for (const tab of field.tabs) {
+          if (tab.fields) {
+            result.push(...flattenFields(tab.fields));
+          }
+        }
+      } else if (
+        (field.type === "row" || field.type === "collapsible") &&
+        field.fields
+      ) {
+        result.push(...flattenFields(field.fields));
+      } else {
+        result.push(field);
+      }
+    }
+    return result;
+  }
+
   const allFields = useMemo(
-    () =>
-      collection.fields.filter(
-        (f) => f.name && !f.admin?.hidden && f.name !== "id",
-      ),
+    () => flattenFields(collection.fields),
     [collection.fields],
   );
 
   const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
+    if (collection.admin?.defaultColumns) {
+      return new Set(collection.admin.defaultColumns);
+    }
     const defaultCols = allFields.slice(0, 4).map((f) => f.name);
     return new Set(defaultCols);
   });
 
+  const toggleColumn = useCallback((fieldName: string) => {
+    setVisibleColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) {
+        next.delete(fieldName);
+      } else {
+        next.add(fieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  function resolveSortField(fieldName: string): string {
+    const field = allFields.find((f) => f.name === fieldName);
+    if (!field) return fieldName;
+    if (field.type === "group" && field.fields?.[0]?.name) {
+      return `${fieldName}.${field.fields[0].name}`;
+    }
+    return fieldName;
+  }
+
+  const handleSort = useCallback((fieldName: string) => {
+    const resolvedField = resolveSortField(fieldName);
+    setSort((prev) => {
+      if (prev && prev.field === resolvedField) {
+        return {
+          field: resolvedField,
+          direction: prev.direction === "asc" ? "desc" : "asc",
+        };
+      }
+      return { field: resolvedField, direction: "asc" };
+    });
+  }, []);
+
   const [deleteConfirm, setDeleteConfirm] = useState<{
     open: boolean;
     count: number;
@@ -115,6 +174,34 @@ export function EnhancedListView({
     [allFields, visibleColumns],
   );
 
+  const titleField =
+    collection.admin?.useAsTitle ||
+    allFields.find((f) => f.type !== "group")?.name;
+
+  function fieldContainsTitle(field: FieldConfig): boolean {
+    if (field.name === titleField) return true;
+    if (field.type === "group" && field.fields?.[0]?.name === titleField)
+      return true;
+    return false;
+  }
+
+  function extractFieldValue(doc: any, field: FieldConfig): any {
+    if (doc[field.name] !== undefined && doc[field.name] !== null) {
+      return doc[field.name];
+    }
+    if (field.type === "group" && typeof doc[field.name] === "object") {
+      if (
+        field.fields?.[0]?.name &&
+        doc[field.name][field.fields[0].name] !== undefined
+      ) {
+        return doc[field.name][field.fields[0].name];
+      }
+      const firstKey = Object.keys(doc[field.name])[0];
+      if (firstKey) return doc[field.name][firstKey];
+    }
+    return null;
+  }
+
   const fetchDocs = useCallback(async () => {
     setLoading(true);
     try {
@@ -188,7 +275,6 @@ export function EnhancedListView({
   const totalPages = Math.ceil(totalDocs / limit);
   const hasActiveFilters = search || filters.length > 0 || sort;
 
-
   return (
     <div className="space-y-6">
       <ConfirmModal
@@ -214,7 +300,8 @@ export function EnhancedListView({
             )}
           </p>
         </div>
-        <button type="button"
+        <button
+          type="button"
           onClick={onCreate}
           className="flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg"
         >
@@ -264,12 +351,14 @@ export function EnhancedListView({
 
         <div className="flex items-center gap-2 flex-wrap">
           {/* Filter Toggle */}
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowFilters(!showFilters)}
-            className={`flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm transition-all ${showFilters || filters.length > 0
-              ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-              : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-              }`}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm transition-all ${
+              showFilters || filters.length > 0
+                ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+            }`}
           >
             <svg
               className="w-4 h-4"
@@ -294,7 +383,8 @@ export function EnhancedListView({
 
           {/* Column Toggle */}
           <div className="relative">
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setShowColumns(!showColumns)}
               className="flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
             >
@@ -314,7 +404,7 @@ export function EnhancedListView({
               Columns
             </button>
             {showColumns && (
-              <div className="absolute right-0 top-full mt-2 w-56 surface-tile border border-[var(--kyro-border)] rounded-xl shadow-xl z-50 overflow-hidden">
+              <div className="absolute right-0 top-full mt-2 w-56 surface-tile border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 overflow-hidden">
                 <div className="p-3 border-b border-[var(--kyro-border)]">
                   <span className="text-xs font-bold uppercase tracking-wider text-[var(--kyro-text-secondary)]">
                     Toggle Columns
@@ -344,7 +434,8 @@ export function EnhancedListView({
 
           {/* Clear All */}
           {hasActiveFilters && (
-            <button type="button"
+            <button
+              type="button"
               onClick={clearAll}
               className="px-4 py-2 rounded-xl font-bold text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all"
             >
@@ -361,7 +452,8 @@ export function EnhancedListView({
             <h3 className="font-bold text-[var(--kyro-text-primary)]">
               Advanced Filters
             </h3>
-            <button type="button"
+            <button
+              type="button"
               onClick={addFilter}
               className="flex items-center gap-2 px-3 py-1.5 text-sm font-bold text-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all"
             >
@@ -422,7 +514,8 @@ export function EnhancedListView({
                   placeholder="Value..."
                   className="flex-1 min-w-[150px] px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
                 />
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => removeFilter(index)}
                   className="p-2 text-[var(--kyro-text-muted)] hover:text-red-500 transition-colors"
                 >
@@ -458,7 +551,8 @@ export function EnhancedListView({
             {selectedIds.size} selected
           </span>
           <div className="flex gap-2">
-            <button type="button"
+            <button
+              type="button"
               onClick={handleBulkDelete}
               className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg font-bold text-sm hover:bg-red-600 transition-all"
             >
@@ -477,7 +571,8 @@ export function EnhancedListView({
               </svg>
               Delete Selected
             </button>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setSelectedIds(new Set())}
               className="px-4 py-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] font-bold text-sm transition-all"
             >
@@ -519,7 +614,8 @@ export function EnhancedListView({
                 : `Get started by creating your first ${(collection.singularLabel || collection.label || collectionSlug).toLowerCase()}.`}
             </p>
             {!hasActiveFilters && (
-              <button type="button"
+              <button
+                type="button"
                 onClick={onCreate}
                 className="mt-4 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"
               >
@@ -563,7 +659,8 @@ export function EnhancedListView({
                       onClick={() => handleSort(field.name)}
                     >
                       <div className="flex items-center gap-2">
-                        {checkTabbedValue(displayFields, field.type) ?? (field.label || field.name)}
+                        {checkTabbedValue(displayFields, field.type) ??
+                          (field.label || field.name)}
                         {sort?.field === field.name && (
                           <svg
                             className={`w-3 h-3 ${sort.direction === "desc" ? "rotate-180" : ""}`}
@@ -606,29 +703,33 @@ export function EnhancedListView({
                         className="w-4 h-4 rounded border-[var(--kyro-border-strong)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)]"
                       />
                     </td>
-                    {displayFields.map((field, i) => (
-                      <td
-                        key={field.name}
-                        className={`px-4 py-3 ${i === 0 ? "font-bold text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
-                      >
-                        {field.type === "select" && doc[field.name]
-                          ? field.options?.find(
-                            (o) => o.value === doc[field.name],
-                          )?.label || (doc[field.name])
-                          : formatCellValue(doc[field.name], field.type)}
-                      </td>
-                    ))}
+                    {displayFields.map((field) => {
+                      const rawValue = extractFieldValue(doc, field);
+                      const cellValue =
+                        field.type === "select" && rawValue
+                          ? field.options?.find((o) => o.value === rawValue)
+                              ?.label || rawValue
+                          : formatCellValue(rawValue, field.type);
+                      return (
+                        <td
+                          key={field.name}
+                          className={`px-4 py-3 ${fieldContainsTitle(field) ? "font-bold text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
+                        >
+                          {cellValue}
+                        </td>
+                      );
+                    })}
                     {collection.timestamps && (
                       <td className="px-4 py-3 text-sm text-[var(--kyro-text-secondary)]">
                         {doc.createdAt
                           ? new Date(doc.createdAt).toLocaleDateString(
-                            "en-US",
-                            {
-                              month: "short",
-                              day: "numeric",
-                              year: "numeric",
-                            },
-                          )
+                              "en-US",
+                              {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                              },
+                            )
                           : "—"}
                       </td>
                     )}
@@ -637,7 +738,8 @@ export function EnhancedListView({
                       onClick={(e) => e.stopPropagation()}
                     >
                       <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <button type="button"
+                        <button
+                          type="button"
                           onClick={() => onEdit(doc.slug || doc.id)}
                           className="flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
                           title="Edit"
@@ -656,7 +758,8 @@ export function EnhancedListView({
                             />
                           </svg>
                         </button>
-                        <button type="button"
+                        <button
+                          type="button"
                           onClick={() => handleDeleteSingle(doc.id)}
                           className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[var(--kyro-text-muted)] hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 transition-colors"
                           title="Delete"
@@ -719,7 +822,8 @@ export function EnhancedListView({
           </div>
           <div className="flex gap-2">
             {page > 1 && (
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setPage(page - 1)}
                 className="px-4 py-2 border border-[var(--kyro-border)] rounded-lg text-sm font-bold text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
               >
@@ -727,7 +831,8 @@ export function EnhancedListView({
               </button>
             )}
             {page < totalPages && (
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setPage(page + 1)}
                 className="px-4 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg text-sm font-bold hover:opacity-90 transition-all"
               >
@@ -778,7 +883,6 @@ function formatCellValue(value: any, type?: string): string {
   return String(value).slice(0, 60);
 }
 
-
 function checkTabbedValue(data: any[], type: string): string | undefined {
   if (type !== "tabs") return;
   const label = data[0]?.tabs[0]?.fields[0]?.label;

package/src/components/ListView.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import type { CollectionConfig, KyroConfig } from "@kyro-cms/core";
+import type { CollectionConfig, KyroConfig } from "@kyro-cms/core/client";
 import { Spinner } from "./ui/Spinner";
 import { ConfirmModal } from "./ui/Modal";
 import { Search, Plus, Settings } from "lucide-react";

package/src/components/Modal.tsx

@@ -1,14 +1,19 @@
-import {
-  useEffect,
-  useState,
-  useCallback,
+import React, {
   createContext,
   useContext,
+  useState,
+  useCallback,
   type ReactNode,
 } from "react";
-import { AlertTriangle, HelpCircle } from "lucide-react";
+import {
+  Modal as UIModal,
+  ModalContent,
+  ModalActions,
+  ConfirmModal,
+} from "./ui/Modal";
+import { PromptModal } from "./ui/PromptModal";
 
-export { Modal, ModalContent, ModalActions, ConfirmModal } from "./ui/Modal";
+export { UIModal as Modal, UIModal, ModalContent, ModalActions, ConfirmModal };
 
 // ============================================================================
 // Global Modal Context for programmatic access
@@ -25,6 +30,7 @@ interface ModalState {
   defaultValue?: string;
   onConfirm?: (value?: string) => void;
   onCancel?: () => void;
+  danger?: boolean;
 }
 
 const initialState: ModalState = {
@@ -34,11 +40,17 @@ const initialState: ModalState = {
   message: "",
   onConfirm: () => {},
   onCancel: () => {},
+  danger: false,
 };
 
 interface ModalContextType {
   showAlert: (title: string, message?: string) => void;
-  showConfirm: (title: string, message: string, onConfirm: () => void) => void;
+  showConfirm: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    options?: { danger?: boolean },
+  ) => void;
   showPrompt: (
     title: string,
     message: string,
@@ -78,12 +90,18 @@ export function ModalProvider({ children }: ModalProviderProps) {
   }, []);
 
   const showConfirm = useCallback(
-    (title: string, message: string, onConfirm: () => void) => {
+    (
+      title: string,
+      message: string,
+      onConfirm: () => void,
+      options?: { danger?: boolean },
+    ) => {
       setState({
         variant: "confirm",
         open: true,
         title,
         message,
+        danger: options?.danger,
         onConfirm: () => {
           onConfirm();
           setState((s) => ({ ...s, open: false }));
@@ -144,6 +162,45 @@ export function ModalProvider({ children }: ModalProviderProps) {
       }}
     >
       {children}
+      {state.variant === "confirm" && (
+        <ConfirmModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          onConfirm={() => state.onConfirm?.()}
+          title={state.title}
+          message={state.message || ""}
+          variant={state.danger ? "danger" : "default"}
+        />
+      )}
+      {state.variant === "alert" && (
+        <UIModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          title={state.title}
+          size="sm"
+          footer={
+            <button
+              type="button"
+              onClick={() => state.onConfirm?.()}
+              className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+            >
+              OK
+            </button>
+          }
+        >
+          <p className="text-[var(--kyro-text-secondary)]">{state.message}</p>
+        </UIModal>
+      )}
+      {state.variant === "prompt" && (
+        <PromptModal
+          open={state.open}
+          onClose={state.onCancel || closeModal}
+          onSubmit={(value) => state.onConfirm?.(value)}
+          title={state.title}
+          placeholder={state.placeholder}
+          defaultValue={state.defaultValue}
+        />
+      )}
     </ModalContext.Provider>
   );
 }

package/src/components/Sidebar.astro

@@ -116,7 +116,7 @@ function isActive(item: NavItem): boolean {
             {section.items.map((item) => (
               <a
                 href={item.href}
-                class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-bold ${
+                class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-semibold ${
                   item.icon === "collection"
                     ? currentPath === item.href ||
                       currentPath.startsWith(item.href + "/")
@@ -215,7 +215,7 @@ function isActive(item: NavItem): boolean {
         </a>
         <button
           id="logout-btn"
-          class="flex justify-center p-2.5 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all shadow-sm active:scale-95 font-bold"
+          class="flex justify-center p-2.5 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all shadow-sm active:scale-95 font-semibold"
           title="Logout"
         >
           <svg

package/src/components/ThemeProvider.tsx

@@ -9,7 +9,7 @@ import {
   defaultLightTheme,
   defaultDarkTheme,
   type ThemeConfig,
-} from "@kyro-cms/core";
+} from "@kyro-cms/core/client";
 
 export type ThemeMode = "light" | "dark" | "system";
 
@@ -25,7 +25,13 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
 export function useTheme() {
   const context = useContext(ThemeContext);
   if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
+    // Return default light theme if used outside of a provider to prevent crashes
+    return {
+      mode: "light" as ThemeMode,
+      theme: defaultLightTheme,
+      setMode: () => {},
+      setCustomTheme: () => {},
+    };
   }
   return context;
 }