@kyro-cms/admin 0.12.5 → 0.12.7

package/src/components/FieldRenderer.tsx

@@ -1,5 +1,17 @@
 import React from "react";
-import type { Field } from "@kyro-cms/core/client";
+import type {
+  Field,
+  TextField as TextFieldType,
+  NumberField as NumberFieldType,
+  CheckboxField as CheckboxFieldType,
+  SelectField as SelectFieldType,
+  DateField as DateFieldType,
+  CodeField as CodeFieldType,
+  UploadField as UploadFieldType,
+  RelationshipField as RelationshipFieldType,
+  BlocksField as BlocksFieldType,
+  MarkdownField as MarkdownFieldType,
+} from "@kyro-cms/core/client";
 import { UploadField } from "./fields/UploadField";
 import { CodeField } from "./fields";
 import NumberField from "./fields/NumberField";
@@ -22,8 +34,8 @@ import { setChangeSource } from "../lib/change-source";
 
 interface FieldRendererProps {
   field: Field;
-  value: any;
-  onChange: (value: any) => void;
+  value: unknown;
+  onChange: (value: unknown) => void;
   error?: string;
   disabled?: boolean;
   formData?: Record<string, unknown>;
@@ -56,9 +68,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "url":
       return (
         <TextField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -67,8 +79,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <IconField
           field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -76,9 +88,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "textarea":
       return (
         <TextField
-          field={{ ...field, variant: "textarea" } as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={{ ...field, variant: "textarea" } as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -86,9 +98,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "password":
       return (
         <TextField
-          field={{ ...field, variant: "password" } as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={{ ...field, variant: "password" } as TextFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -97,7 +109,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <SecretField
           field={field as any}
-          value={value as string | null | undefined}
+          value={(value as string) ?? undefined}
           onChange={onChange as (value: string) => void}
           error={error}
           disabled={disabled}
@@ -106,9 +118,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "number":
       return (
         <NumberField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as NumberFieldType}
+          value={(value as number) ?? undefined}
+          onChange={onChange as (value: number | undefined) => void}
           disabled={disabled}
           error={error}
         />
@@ -116,9 +128,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "checkbox":
       return (
         <CheckboxField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as CheckboxFieldType}
+          value={value as boolean}
+          onChange={onChange as (value: boolean) => void}
           disabled={disabled}
           error={error}
         />
@@ -126,9 +138,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "select":
       return (
         <SelectField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as SelectFieldType}
+          value={(value as string | string[]) ?? undefined}
+          onChange={onChangeKeystroke as (value: string | string[] | undefined) => void}
           error={error}
           disabled={disabled}
           formData={formData}
@@ -140,9 +152,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "date":
       return (
         <DateField
-          field={field as any}
-          value={value}
-          onChange={onChange}
+          field={field as DateFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChange as (value: string | undefined) => void}
           disabled={disabled}
           error={error}
         />
@@ -151,7 +163,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <RichTextField
           field={field}
-          value={value}
+          value={value as Record<string, any> | null}
           onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
@@ -160,9 +172,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "markdown":
       return (
         <MarkdownField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as MarkdownFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           disabled={disabled}
           error={error}
         />
@@ -170,9 +182,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "code":
       return (
         <CodeField
-          field={field as any}
-          value={value}
-          onChange={onChangeKeystroke}
+          field={field as CodeFieldType}
+          value={(value as string) ?? undefined}
+          onChange={onChangeKeystroke as (value: string) => void}
           disabled={disabled}
           error={error}
         />
@@ -182,9 +194,9 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <FieldLayout field={field} error={error}>
           <UploadField
-            field={field as any}
-            value={value}
-            onChange={onChange}
+            field={field as UploadFieldType}
+            value={value as Record<string, unknown> | Record<string, unknown>[] | null}
+            onChange={onChange as (value: Record<string, unknown> | Record<string, unknown>[] | null) => void}
             disabled={disabled}
           />
         </FieldLayout>
@@ -192,7 +204,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "relationship":
       return (
         <RelationshipField
-          field={field as any}
+          field={field as unknown as { name: string; label?: string; relationTo: string | string[]; hasMany?: boolean; required?: boolean; admin?: { description?: string; readOnly?: boolean; placeholder?: string; } }}
           value={value}
           onChange={onChange}
           disabled={disabled}
@@ -203,8 +215,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <FieldLayout field={field} error={error}>
           <ListField
-            items={Array.isArray(value) ? value : []}
-            onChange={onChange}
+            items={Array.isArray(value) ? (value as string[]) : []}
+            onChange={onChange as (items: string[]) => void}
             compact
           />
         </FieldLayout>
@@ -213,8 +225,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
       return (
         <ArrayLayout
           field={field}
-          value={Array.isArray(value) ? value : []}
-          onChange={onChange}
+          value={Array.isArray(value) ? (value as unknown[]) : []}
+          onChange={onChange as (value: unknown[]) => void}
           disabled={disabled}
           renderField={(nestedField, parentData, onNestedChange) => {
             const nestedValue = parentData[nestedField.name];
@@ -239,8 +251,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
     case "blocks":
       return (
         <BlocksField
-          field={field as any}
-          value={value}
+          field={field as BlocksFieldType}
+          value={value as unknown[]}
           onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
@@ -251,7 +263,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <GroupLayout
           field={field}
           value={value as Record<string, unknown> | null}
-          onChange={onChange}
+          onChange={onChange as (value: Record<string, unknown>) => void}
           renderField={(nestedField, parentData, onNestedChange) => {
             const nestedValue = parentData[nestedField.name];
             return (
@@ -280,7 +292,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
           <div className="flex items-center gap-3">
             <input
               type="color"
-              value={value || "#000000"}
+              value={(value as string) || "#000000"}
               onChange={(e) => onChange(e.target.value)}
               disabled={disabled}
               className="h-10 w-14 p-1 cursor-pointer bg-[var(--kyro-input-bg)] border border-[var(--kyro-input-border)] rounded-lg"
@@ -288,7 +300,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
             <input
               type="text"
               className="kyro-form-input font-mono "
-              value={value || ""}
+              value={(value as string) || ""}
               onChange={(e) => onChange(e.target.value)}
               disabled={disabled}
               placeholder="#000000"

package/src/components/ListView.tsx

@@ -259,6 +259,7 @@ export function ListView({
       const params = new URLSearchParams({
         page: page.toString(),
         limit: limit.toString(),
+        depth: "1",
       });
 
       if (search) params.append("search", search);
@@ -764,17 +765,21 @@ function formatCellValue(value: any, type?: string, t?: any): string {
   if (Array.isArray(value)) {
     return value.map(item => {
       if (item && typeof item === "object") {
-        return item.title || item.name || item.email || item.filename || item.url || JSON.stringify(item).slice(0, 30);
+        const target = ('value' in item && typeof item.value === 'object' && item.value !== null) ? item.value : item;
+        const fallbackName = (target.firstName || target.lastName) ? `${target.firstName || ''} ${target.lastName || ''}`.trim() : undefined;
+        return target.fullName || fallbackName || target.title || target.name || target.label || target.email || target.filename || target.slug || target.id || JSON.stringify(target).slice(0, 30);
       }
       return String(item ?? "").slice(0, 30);
     }).filter(Boolean).join(", ");
   }
 
   if (typeof value === "object") {
-    if (value.title) return value.title;
-    if (value.name) return value.name;
-    if (value.email) return value.email;
-    return JSON.stringify(value).slice(0, 50);
+    const target = ('value' in value && typeof value.value === 'object' && value.value !== null) ? value.value : value;
+    const fallbackName = (target.firstName || target.lastName) ? `${target.firstName || ''} ${target.lastName || ''}`.trim() : undefined;
+    const label = target.fullName || fallbackName || target.title || target.name || target.label || target.email || target.filename || target.slug;
+    if (label) return String(label);
+    if (target.id) return String(target.id);
+    return JSON.stringify(target).slice(0, 50);
   }
   return String(value).slice(0, 60);
 }

package/src/components/PluginsManager.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { pluginViews } from "virtual:kyro-plugins";
+import React, { useState, useEffect, Suspense } from "react";
 import {
   Blocks,
   Settings,
@@ -16,6 +17,7 @@ import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { useTranslation } from "react-i18next";
 
+
 interface Plugin {
   id: string;
   name: string;
@@ -32,13 +34,15 @@ interface ToggleError {
 }
 
 export function PluginsManager() {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const [plugins, setPlugins] = useState<Plugin[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [showConfigModal, setShowConfigModal] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const PluginSettingsView = showConfigModal ? pluginViews[showConfigModal] : null;
+
   const fetchPlugins = async () => {
     try {
       setLoading(true);
@@ -120,8 +124,8 @@ export function PluginsManager() {
           <div>
             <h4 className="text-sm font-bold text-blue-500 mb-1">Developer-First Approach</h4>
             <p className="text-xs text-blue-500/80 leading-relaxed">
-              Plugins inject core structural components like schemas, collections, and APIs. 
-              To ensure version-controlled integrity, plugins are entirely managed via code in your <code className="bg-blue-500/20 px-1.5 py-0.5 rounded-md text-[10px] font-mono">kyro.config.ts</code> file. 
+              Plugins inject core structural components like schemas, collections, and APIs.
+              To ensure version-controlled integrity, plugins are entirely managed via code in your <code className="bg-blue-500/20 px-1.5 py-0.5 rounded-md text-[10px] font-mono">kyro.config.ts</code> file.
               This page serves as a read-only directory of the currently installed ecosystem.
             </p>
           </div>
@@ -222,14 +226,16 @@ export function PluginsManager() {
                     </div>
 
                     <div className="flex items-center gap-1.5">
-                      <button
-                        type="button"
-                        onClick={() => setShowConfigModal(plugin.id)}
-                        className="p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg hover:border-[var(--kyro-primary)] transition-all disabled:opacity-30 shadow-sm"
-                        disabled={!plugin.enabled}
-                      >
-                        <Settings className="w-3.5 h-3.5" />
-                      </button>
+                      {pluginViews[plugin.id] && (
+                        <button
+                          type="button"
+                          onClick={() => setShowConfigModal(plugin.id)}
+                          className="p-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg hover:border-[var(--kyro-primary)] transition-all disabled:opacity-30 shadow-sm"
+                          disabled={!plugin.enabled}
+                        >
+                          <Settings className="w-3.5 h-3.5" />
+                        </button>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -253,15 +259,26 @@ export function PluginsManager() {
         size="lg"
       >
         <ModalContent>
-          <div className="p-12 text-center space-y-4">
-            <div className="w-20 h-20 mx-auto bg-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center border border-[var(--kyro-border)] shadow-xl">
-              <Settings className="w-10 h-10 text-[var(--kyro-primary)] opacity-40 animate-spin-slow" />
-            </div>
-            <div>
-              <h4 className="text-xl font-bold mb-1">Advanced Configuration</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Settings for this plugin will be synthesized dynamically from its manifest.</p>
+          {PluginSettingsView ? (
+            <Suspense fallback={
+              <div className="p-12 flex flex-col items-center justify-center space-y-4">
+                <RefreshCw className="w-8 h-8 text-[var(--kyro-primary)] animate-spin opacity-50" />
+                <p className="text-sm text-[var(--kyro-text-secondary)]">Loading plugin settings...</p>
+              </div>
+            }>
+              <PluginSettingsView />
+            </Suspense>
+          ) : (
+            <div className="p-12 text-center space-y-4">
+              <div className="w-20 h-20 mx-auto bg-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center border border-[var(--kyro-border)] shadow-xl">
+                <Settings className="w-10 h-10 text-[var(--kyro-primary)] opacity-40 animate-spin-slow" />
+              </div>
+              <div>
+                <h4 className="text-xl font-bold mb-1">Custom Configuration</h4>
+                <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Settings for this plugin are managed by its own custom views and components.</p>
+              </div>
             </div>
-          </div>
+          )}
         </ModalContent>
         <ModalActions>
           <button

package/src/components/Sidebar.astro

@@ -10,6 +10,7 @@ interface NavItem {
   href: string;
   label: string;
   icon: string;
+  order?: number;
 }
 
 const siteSettings = await getSiteSettings({ request: Astro.request });
@@ -33,7 +34,6 @@ const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 const groupedCollections = new Map<string, NavItem[]>();
-const defaultCollections: NavItem[] = [];
 
 nonAuthCollections
   .filter((col) => col.slug !== "media") //removed here cos it's been added manually in the navSections.
@@ -42,22 +42,19 @@ nonAuthCollections
       href: `${adminPath}/${col.slug}`,
       label: col.label || col.slug,
       icon: (col.admin?.icon as string) || "collection",
+      order: typeof col.admin?.order === 'number' ? col.admin.order : 999,
     };
     
-    if (col.admin?.group) {
-      const groupName = col.admin.group as string;
-      if (!groupedCollections.has(groupName)) {
-        groupedCollections.set(groupName, []);
-      }
-      groupedCollections.get(groupName)!.push(item);
-    } else {
-      defaultCollections.push(item);
+    const groupName = (col.admin?.group as string) || "Content";
+    if (!groupedCollections.has(groupName)) {
+      groupedCollections.set(groupName, []);
     }
+    groupedCollections.get(groupName)!.push(item);
   });
 
 const dynamicSections = Array.from(groupedCollections.entries()).map(([group, items]) => ({
   label: group,
-  items: items,
+  items: items.sort((a, b) => (a.order || 999) - (b.order || 999)),
 }));
 
 const navSections: { label: string; items: NavItem[] }[] = [
@@ -73,10 +70,6 @@ const navSections: { label: string; items: NavItem[] }[] = [
     ],
   },
   ...dynamicSections,
-  ...(defaultCollections.length > 0 ? [{
-    label: "Content",
-    items: defaultCollections,
-  }] : []),
   {
     label: "Settings",
     items: [

package/src/components/blocks/AccordionBlock.tsx

@@ -4,10 +4,14 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
-import { AccordionField } from "../fields/AccordionField";
+import { AccordionField, type AccordionItem } from "../fields/AccordionField";
 import { useTranslation } from "react-i18next";
 
-export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface AccordionBlockData {
+  items?: AccordionItem[];
+}
+
+export const AccordionBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,10 +19,10 @@ export const AccordionBlock: React.FC<{ block: Record<string, unknown>; index: n
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
+  const data = (blockData?.data ?? block.data ?? {}) as AccordionBlockData;
   const items = Array.isArray(data.items) ? data.items : [];
 
-  const handleChange = (items: Record<string, unknown>[]) => {
+  const handleChange = (items: AccordionItem[]) => {
     updateBlock(block.id, { data: { ...data, items } });
   };
 

package/src/components/blocks/ArrayBlock.tsx

@@ -6,8 +6,9 @@ import {
 import { ChevronRight, X } from "../ui/icons";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 import { useTranslation } from "react-i18next";
+import type { BlockData } from "@kyro-cms/core/client";
 
-export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+export const ArrayBlock: React.FC<{ block: { id: string; data?: Record<string, unknown>; children?: BlockData[] }; index: number }> = ({
   block,
   index,
 }) => {
@@ -15,8 +16,8 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data ?? block.data ?? {};
-  const children = blockData?.children ?? block.children ?? [];
+  const data = (blockData?.data ?? block.data ?? {}) as Record<string, unknown>;
+  const children = (blockData?.children ?? block.children ?? []) as BlockData[];
 
   return (
     <div className="block-array border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">

package/src/components/blocks/BlockEditModal.tsx

@@ -7,9 +7,10 @@ import { blockTheme } from "../fields/extensions/blockComponents";
 import { SlidePanel } from "../ui/SlidePanel";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 import { FieldRenderer } from "../FieldRenderer";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface BlockEditModalProps {
-  block: Record<string, unknown>;
+  block: Record<string, any>;
   blockSchema?: Record<string, any>;
   onClose: () => void;
 }
@@ -28,7 +29,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
-  const handleUpdateChildren = (newChildren: Record<string, unknown>[]) => {
+  const handleUpdateChildren = (newChildren: BlockData[]) => {
     updateBlock(block.id, { children: newChildren });
   };
 
@@ -95,7 +96,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
     );
   };
 
-  const theme = blockTheme[block.type as string] || blockTheme.default;
+  const theme = blockTheme[block.type] || blockTheme.default;
 
   return (
     <SlidePanel

package/src/components/blocks/CardBlock.tsx

@@ -6,14 +6,22 @@ import {
 import { CardField } from "../fields/CardField";
 import { BlockWrapper } from "./BlockWrapper";
 
-export const CardBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+interface CardBlockData {
+  title?: string;
+  description?: string;
+  icon?: string;
+  link?: string;
+  linkText?: string;
+}
+
+export const CardBlock: React.FC<{ block: { id: string; data?: Record<string, unknown> }; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data ?? block.data ?? {}) as CardBlockData;
 
   const handleChange = (field: string, value: unknown) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });