@kyro-cms/admin 0.12.6 → 0.12.8

package/src/components/fields/RichTextField.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
+import { marked } from "marked";
 import Link from "@tiptap/extension-link";
 import Image from "@tiptap/extension-image";
 import TextAlign from "@tiptap/extension-text-align";
@@ -14,7 +15,10 @@ import Color from "@tiptap/extension-color";
 import type { Field } from "@kyro-cms/core/client";
 import FieldLayout from "./FieldLayout";
 import { SlidePanel } from "../ui/SlidePanel";
+import { PromptModal } from "../ui/PromptModal";
 import { MediaGallery } from "../MediaGallery";
+import { useAutoFormStore } from "../../lib/autoform-store";
+import { projectConfig } from "virtual:kyro-plugins";
 import {
   Bold,
   Italic,
@@ -44,8 +48,10 @@ import {
   Maximize2,
   Minimize2,
   ChevronDown,
+  Sparkles,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useToast } from "@kyro-cms/admin";
 
 interface RichTextFieldProps {
   field: Field;
@@ -73,15 +79,28 @@ const MenuBar = ({
   isExpanded,
   setIsExpanded,
   onOpenMediaPicker,
+  isAiLoading,
+  setIsAiLoading,
 }: {
   editor: any;
   isExpanded: boolean;
   setIsExpanded: (expanded: boolean) => void;
   onOpenMediaPicker: () => void;
+  isAiLoading: boolean;
+  setIsAiLoading: (loading: boolean) => void;
 }) => {
     const { t } = useTranslation();
   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const [isPromptModalOpen, setIsPromptModalOpen] = useState(false);
   const menuBarRef = useRef<HTMLDivElement>(null);
+  const { addToast } = useToast();
+  
+  const formData = useAutoFormStore((state) => state.formData);
+  const setField = useAutoFormStore((state) => state.setField);
+  
+  const isAiAssistantEnabled = projectConfig?.plugins?.some?.(
+    (p: any) => p.name === "ai-assistant"
+  ) ?? false;
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -126,6 +145,103 @@ const MenuBar = ({
     setActiveDropdown(null);
   };
 
+  const handleAiAction = async (action: string, customPrompt?: string) => {
+    setActiveDropdown(null);
+    
+    const titleValue = (document.querySelector('input#title, input[name="title"]') as HTMLInputElement)?.value;
+    const title = formData?.title || titleValue || "Untitled Document";
+    
+    let collectionName = "document";
+    try {
+      const pathParts = window.location.pathname.split('/').filter(Boolean);
+      if (pathParts[0] === "admin" && pathParts.length >= 2) {
+        collectionName = pathParts[1];
+        if (collectionName.endsWith('s')) collectionName = collectionName.slice(0, -1);
+      }
+    } catch(e) {}
+
+    const context = editor.state.doc.textBetween(
+      Math.max(0, editor.state.selection.from - 500),
+      Math.min(editor.state.doc.content.size, editor.state.selection.to + 500),
+      ' '
+    );
+    const selectedText = editor.state.doc.textBetween(
+      editor.state.selection.from,
+      editor.state.selection.to,
+      ' '
+    );
+
+    let prompt = "";
+    if (action === "Generate") {
+      prompt = `Write a comprehensive, engaging, and professional ${collectionName} titled "${title}". 
+The content MUST be full-featured and highly formatted. You MUST include:
+1. Proper Markdown formatting (headings, paragraphs, bold/italic text, blockquotes)
+2. Relevant and context-specific images. You MUST use EXACT Markdown image syntax like this: '![alt text](https://image.pollinations.ai/prompt/URL_ENCODED_KEYWORDS)' (replace URL_ENCODED_KEYWORDS with descriptive keywords for the image)
+3. Hyperlinks where necessary to provide additional context or references
+4. Well-structured sections with bullet points or numbered lists where appropriate.`;
+    } else if (action === "Summarize") {
+      prompt = `Summarize the following content from the ${collectionName} titled "${title}" into a concise paragraph. Use clear Markdown formatting if necessary (like bolding key terms): ${selectedText || context}`;
+    } else if (action === "Expand") {
+      prompt = `Expand on the following content from the ${collectionName} titled "${title}". Add more details, context, and depth. 
+Please format the output using rich Markdown (headings, paragraphs, lists). 
+If visual context would be helpful, include relevant images using EXACT Markdown image syntax: '![alt text](https://image.pollinations.ai/prompt/URL_ENCODED_KEYWORDS)'.
+Here is the content to expand: ${selectedText || context}`;
+    } else if (action === "Prompt") {
+      if (customPrompt) {
+        prompt = `${customPrompt}\n\nPlease format your response using rich Markdown. If your response includes images, use EXACT Markdown image syntax: '![alt text](https://image.pollinations.ai/prompt/URL_ENCODED_KEYWORDS)'`;
+      } else {
+        setIsPromptModalOpen(true);
+        return;
+      }
+    }
+
+    setIsAiLoading(true);
+    try {
+      const apiPath = (window as any).__KYRO_API_PATH__ || '/api';
+      const res = await fetch(`${apiPath}/kyro/ai/completion`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ prompt, context: selectedText || context })
+      });
+      if (!res.ok) throw new Error("Failed to get AI response");
+      
+      const data = await res.json();
+      const generatedText = data.text;
+
+      if (generatedText) {
+        console.log("[AI Client] Raw Markdown Response:", generatedText);
+        const htmlContent = await marked.parse(generatedText);
+        console.log("[AI Client] Parsed HTML Response:", htmlContent);
+        if (selectedText && action !== "Generate") {
+          editor.chain().focus().insertContent(htmlContent).run();
+        } else {
+          editor.chain().focus().insertContent(htmlContent).run();
+        }
+
+        // Automatically generate excerpt and push to excerpt field if it exists
+        const excerptInput = document.querySelector('input[name="excerpt"], textarea[name="excerpt"]');
+        if (excerptInput || 'excerpt' in formData) {
+          const cleanText = generatedText.replace(/<[^>]*>?/gm, '').replace(/[#*]/g, '');
+          const excerptMatch = cleanText.match(/^.*?[.!?](?:\s|$)/);
+          let excerpt = excerptMatch ? excerptMatch[0].trim() : cleanText.substring(0, 150) + "...";
+          if (excerpt.length > 200) {
+              excerpt = excerpt.substring(0, 150) + "...";
+          }
+          setField('excerpt', excerpt);
+          addToast('success', "Content generated and excerpt updated.");
+        } else {
+          addToast('success', "Content generated.");
+        }
+      }
+    } catch (err) {
+      console.error("AI Assistant Error:", err);
+      addToast('error', "AI Assistant failed to generate text.");
+    } finally {
+      setIsAiLoading(false);
+    }
+  };
+
   const toggleDropdown = (name: string) => {
     setActiveDropdown(activeDropdown === name ? null : name);
   };
@@ -505,6 +621,59 @@ const MenuBar = ({
 
       {/* Group 8: Workspace Controls */}
       <div className="flex items-center gap-0.5 p-0.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-md shadow-xs ml-auto">
+        {isAiAssistantEnabled && (
+          <div className="relative flex items-center justify-center">
+            <ToolbarButton
+            onClick={() => toggleDropdown("ai")}
+            title={t("tooltips.aiAssistant", { defaultValue: "AI Assistant" })}
+            isActive={activeDropdown === "ai"}
+            disabled={isAiLoading}
+          >
+            {isAiLoading ? (
+              <Sparkles size={14} className="animate-pulse text-[var(--kyro-primary)]" />
+            ) : activeDropdown === "ai" ? (
+              <Sparkles size={14} className="text-[var(--kyro-primary)]" />
+            ) : (
+              <>
+                <img src="/logo.svg" alt="Kyro AI" className="w-3.5 h-3.5 object-contain opacity-80 group-hover:opacity-100 block dark:hidden" />
+                <img src="/logo-white.svg" alt="Kyro AI" className="w-3.5 h-3.5 object-contain opacity-80 group-hover:opacity-100 hidden dark:block" />
+              </>
+            )}
+          </ToolbarButton>
+          {activeDropdown === "ai" && (
+            <div className="absolute top-full right-0 mt-1.5 p-1 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 min-w-32 flex flex-col gap-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
+              <button
+                type="button"
+                onClick={() => handleAiAction("Generate")}
+                className="px-2.5 py-1.5 text-xs text-left rounded-md hover:bg-[var(--kyro-bg-hover)] cursor-pointer text-[var(--kyro-text)] transition-colors flex items-center gap-2"
+              >
+                <Sparkles size={12} className="text-[var(--kyro-primary)]" /> Generate
+              </button>
+              <button
+                type="button"
+                onClick={() => handleAiAction("Summarize")}
+                className="px-2.5 py-1.5 text-xs text-left rounded-md hover:bg-[var(--kyro-bg-hover)] cursor-pointer text-[var(--kyro-text)] transition-colors flex items-center gap-2"
+              >
+                <AlignLeft size={12} /> Summarize
+              </button>
+              <button
+                type="button"
+                onClick={() => handleAiAction("Expand")}
+                className="px-2.5 py-1.5 text-xs text-left rounded-md hover:bg-[var(--kyro-bg-hover)] cursor-pointer text-[var(--kyro-text)] transition-colors flex items-center gap-2"
+              >
+                <Maximize2 size={12} /> Expand
+              </button>
+              <button
+                type="button"
+                onClick={() => handleAiAction("Prompt")}
+                className="px-2.5 py-1.5 text-xs text-left rounded-md hover:bg-[var(--kyro-bg-hover)] cursor-pointer text-[var(--kyro-text)] transition-colors flex items-center gap-2 border-t border-[var(--kyro-border)] mt-0.5"
+              >
+                <Terminal size={12} /> Prompt
+              </button>
+            </div>
+          )}
+        </div>
+        )}
         <ToolbarButton
           onClick={() => setIsExpanded(!isExpanded)}
           title={isExpanded ? "Collapse Workspace" : "Enlarge Workspace"}
@@ -512,6 +681,18 @@ const MenuBar = ({
           {isExpanded ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
         </ToolbarButton>
       </div>
+
+      <PromptModal
+        open={isPromptModalOpen}
+        onClose={() => setIsPromptModalOpen(false)}
+        onSubmit={(prompt) => {
+          setIsPromptModalOpen(false);
+          handleAiAction("Prompt", prompt);
+        }}
+        title="AI Assistant Prompt"
+        placeholder="What do you want the AI to do?"
+        defaultValue={editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to, ' ') ? "Rewrite this text to be more engaging." : "Write a paragraph about..."}
+      />
     </div>
   );
 };
@@ -566,6 +747,7 @@ function RichTextEditor({
   const [isExpanded, setIsExpanded] = useState(false);
   const [panelWidth, setPanelWidth] = useState(0);
   const [isMediaPickerOpen, setIsMediaPickerOpen] = useState(false);
+  const [isAiLoading, setIsAiLoading] = useState(false);
 
   useEffect(() => {
     if (!isExpanded) {
@@ -607,7 +789,7 @@ function RichTextEditor({
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
-        codeBlock: true,
+        codeBlock: {},
         link: false,
         underline: false,
       }),
@@ -676,8 +858,15 @@ function RichTextEditor({
             isExpanded={isExpanded}
             setIsExpanded={setIsExpanded}
             onOpenMediaPicker={() => setIsMediaPickerOpen(true)}
+            isAiLoading={isAiLoading}
+            setIsAiLoading={setIsAiLoading}
           />
-          <div className="overflow-y-auto min-h-[160px] max-h-[400px]">
+          <div className={`overflow-y-auto min-h-[160px] max-h-[400px] transition-all duration-300 ${isAiLoading ? 'opacity-40 pointer-events-none' : ''} relative`}>
+            {isAiLoading && (
+              <div className="absolute inset-0 flex items-center justify-center z-10 font-medium text-sm text-[var(--kyro-primary)]">
+                <Sparkles size={16} className="animate-pulse mr-2" /> Generating content...
+              </div>
+            )}
             <EditorContent editor={editor} />
           </div>
         </div>
@@ -703,15 +892,21 @@ function RichTextEditor({
               isExpanded={isExpanded}
               setIsExpanded={setIsExpanded}
               onOpenMediaPicker={() => setIsMediaPickerOpen(true)}
+              isAiLoading={isAiLoading}
+              setIsAiLoading={setIsAiLoading}
             />
-            <div className="overflow-y-auto flex-1 h-[calc(100vh-140px)] bg-[var(--kyro-bg)]">
-              <EditorContent editor={editor} />
+            <div className={`flex-1 overflow-y-auto transition-all duration-300 ${isAiLoading ? 'opacity-40 pointer-events-none' : ''} relative`}>
+              {isAiLoading && (
+                <div className="absolute inset-0 flex items-center justify-center z-10 font-medium text-lg text-[var(--kyro-primary)]">
+                  <Sparkles size={24} className="animate-pulse mr-3" /> Generating content...
+                </div>
+              )}
+              <EditorContent editor={editor} className="h-full" />
             </div>
           </div>,
           document.body
         )}
 
-      {/* Injected tasklist, and highlight custom styles for preview & editor */}
       <style>{`
         .kyro-richtext ul[data-type="taskList"] {
           list-style: none !important;

package/src/components/fields/extensions/blockComponents.tsx

@@ -39,7 +39,7 @@ import {
 } from "../../ui/icons";
 
 // Block component registry
-export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Record<string, unknown>; index: number }>> = {
+export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: any; index: number }>> = {
   heading: HeadingBlock,
   paragraph: ParagraphBlock,
   image: ImageBlock,

package/src/components/fields/extensions/blocksStore.ts

@@ -125,10 +125,11 @@ export function ensureIds(blocks: BlockData[]): BlockData[] {
       updatedBlock.children = ensureIds(updatedBlock.children);
     }
 
-    if (updatedBlock.data?.columnData && Array.isArray(updatedBlock.data.columnData)) {
+    const blockData = updatedBlock.data as Record<string, any> | undefined;
+    if (blockData?.columnData && Array.isArray(blockData.columnData)) {
       updatedBlock.data = {
         ...updatedBlock.data,
-        columnData: updatedBlock.data.columnData.map((col: Record<string, unknown>) => ({
+        columnData: blockData.columnData.map((col: any) => ({
           ...col,
           children: col.children ? ensureIds(col.children) : col.children,
         })),
@@ -144,12 +145,12 @@ export function createNewBlock(type: string): BlockData {
   const defaultData = getDefaultData(type);
   const { options, children, ...data } = defaultData;
   return {
-    id: Math.random().toString(36).substr(2, 9),
+    id: Math.random().toString(36).substring(2, 11),
     type,
     name: "",
-    data,
-    options,
-    children,
+    data: data as Record<string, unknown>,
+    options: options as Record<string, unknown> | undefined,
+    children: children as BlockData[] | undefined,
     order: Date.now(),
   };
 }
@@ -189,7 +190,7 @@ function getDefaultData(type: string): Record<string, unknown> {
     gallery: { images: [] },
     tabs: { tabs: [{ label: "Tab 1", content: "" }] },
   };
-  return defaults[type] || {};
+  return (defaults[type] || {}) as Record<string, unknown>;
 }
 
 // React hooks that read from context
@@ -212,8 +213,9 @@ export function useBlockById(id: string): BlockData | undefined {
           const found = findRecursive(b.children);
           if (found) return found;
         }
-        if (b.data?.columnData) {
-          for (const col of b.data.columnData) {
+        const bData = b.data as Record<string, any> | undefined;
+        if (bData?.columnData && Array.isArray(bData.columnData)) {
+          for (const col of bData.columnData) {
             if (col && col.children && col.children.length > 0) {
               const found = findRecursive(col.children);
               if (found) return found;
@@ -270,8 +272,9 @@ export function traverseBlocks(
     }
 
     // Handle columnData
-    if (block.data?.columnData && Array.isArray(block.data.columnData)) {
-      const updatedColumnData = block.data.columnData.map((col: Record<string, unknown>) => {
+    const blockData = block.data as Record<string, any> | undefined;
+    if (blockData?.columnData && Array.isArray(blockData.columnData)) {
+      const updatedColumnData = blockData.columnData.map((col: any) => {
         if (col.children && col.children.length > 0) {
           const updatedColChildren = traverseBlocks(col.children, action);
           if (updatedColChildren !== col.children) {
@@ -281,7 +284,7 @@ export function traverseBlocks(
         return col;
       });
 
-      if (updatedColumnData.some((col: Record<string, unknown>, i: number) => col !== block.data.columnData[i])) {
+      if (updatedColumnData.some((col: any, i: number) => col !== blockData.columnData[i])) {
         updatedBlock.data = { ...updatedBlock.data, columnData: updatedColumnData };
         blockChanged = true;
       }

package/src/components/ui/Button.tsx

@@ -1,8 +1,11 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: ButtonVariant;
+  size?: ButtonSize;
   loading?: boolean;
   children: ReactNode;
 }

package/src/components/ui/Pagination.tsx

@@ -13,7 +13,7 @@ export function Pagination({ page, totalPages, totalDocs, limit, onPageChange, o
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-[var(--kyro-border)]">
+    <div className="surface-tile flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-[var(--kyro-border)]">
       {totalDocs !== undefined && limit ? (
         <span className="text-xs text-[var(--kyro-text-secondary)] font-medium">
           Showing {(page - 1) * limit + 1} to {Math.min(page * limit, totalDocs)} of {totalDocs}

package/src/components/users/UserDetail.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { apiGet } from "../../lib/api";
 import { useUIStore, toast } from "../../lib/stores";
-import { X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface User {
   id: string;
@@ -43,8 +43,8 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [avatarMedia, setAvatarMedia] = useState<any>(user.avatar ? { id: user.avatar } : null);
   const [saving, setSaving] = useState(false);
-  const { confirm, alert } = useUIStore();
-  const [deleting, setDeleting] = useState(false);
+  const { confirm } = useUIStore();
+  const [, setDeleting] = useState(false);
   const [locking, setLocking] = useState(false);
   const [isLocked, setIsLocked] = useState(user.locked || false);
 
@@ -90,7 +90,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
       }
 
       if (Object.keys(body).length === 0) {
-        window.location.href = adminPath + "/users";
+        navigate(adminPath + "/users");
         return;
       }
 
@@ -105,7 +105,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
 
       if (res.ok) {
         toast.success("User updated");
-        window.location.href = adminPath + "/users";
+        navigate(adminPath + "/users");
       } else {
         toast.error(data.error || "Failed to save user");
       }
@@ -162,7 +162,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
           });
           if (res.ok) {
             toast.success("User deleted");
-            window.location.href = adminPath + "/users";
+            navigate(adminPath + "/users");
           } else {
             toast.error("Failed to delete user");
           }

package/src/components/users/UserForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface UserFormProps {
   mode: "create" | "edit";
@@ -38,7 +39,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
     type: "success" | "error";
   } | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
     setMessage(null);
@@ -71,7 +72,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
           type: "success",
         });
         setTimeout(() => {
-          window.location.href = `${adminPath}/users`;
+          navigate(`${adminPath}/users`);
         }, 1000);
       } else {
         setMessage({

package/src/components/users/UsersList.tsx

@@ -1,6 +1,7 @@
 import { Plus, Lock, CheckCircle2, Edit2, Trash2, XCircle, X } from "../ui/icons";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useUIStore } from "../../lib/stores";
+import { navigate } from 'astro:transitions/client';
 
 interface User {
   id: string;
@@ -39,8 +40,8 @@ export function UsersList({
 }: UsersListProps) {
   const [users, setUsers] = useState<User[]>(initialUsers);
   const [totalUsers, setTotalUsers] = useState(initialTotal);
-  const { confirm, alert } = useUIStore();
-  const [deleting, setDeleting] = useState(false);
+  const { confirm } = useUIStore();
+  const [, setDeleting] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
   const handleDeleteClick = (user: User) => {
@@ -168,7 +169,7 @@ export function UsersList({
                   key={user.id}
                   className="group hover:bg-gray-50/50 transition-colors cursor-pointer"
                   onClick={() =>
-                    (window.location.href = `${adminPath}/users/${user.id}`)
+                    navigate(`${adminPath}/users/${user.id}`)
                   }
                 >
                   <td className="px-8 py-5">

package/src/env.d.ts

@@ -2,6 +2,10 @@ declare const __KYRO_API_PATH__: string;
 declare const __KYRO_ADMIN_PATH__: string;
 declare const __KYRO_ADMIN_AUTH_DISABLED__: boolean;
 
+declare module 'astro:transitions/client' {
+  export function navigate(href: string, options?: any): void;
+}
+
 declare namespace App {
   interface Locals {
     user?: {

package/src/fields/index.ts

@@ -31,4 +31,4 @@ export type {
   GroupField,
 } from "@kyro-cms/core";
 
-export { ALL_FIELD_TYPES } from "@kyro-cms/core";
+export { ALL_FIELD_TYPES } from "@kyro-cms/core/client";

package/src/hooks/useAutoFormState.ts

@@ -52,7 +52,7 @@ export function useAutoFormState({
     resetForm,
   } = store;
 
-  const versionsEnabled = !!config.versions;
+  const versionsEnabled = !!config?.versions;
 
   // Guard: clear stale formData from a previous page context.
   // For collections, if the loaded document's id doesn't match the expected
@@ -438,6 +438,7 @@ const persistBrowserDraft = useCallback(
 
   // Auto-generate metaTitle
   useEffect(() => {
+    if (!config?.fields) return;
     const fields = config.fields as Record<string, unknown>[];
     const metaTitleField = findFieldDeep(fields, "metaTitle");
     if (!metaTitleField) return;
@@ -448,7 +449,7 @@ const persistBrowserDraft = useCallback(
     if (titleStr && (!formData.metaTitle || formData.metaTitle === formData._lastMetaTitle)) {
       setField("metaTitle", titleStr);
     }
-  }, [formData, config.fields, setField]);
+  }, [formData, config?.fields, setField]);
 
   interface FieldConfig {
     name?: string;
@@ -461,8 +462,8 @@ const persistBrowserDraft = useCallback(
 
   // Auto-generate slug
   useEffect(() => {
-    const fields = config.fields as FieldConfig[];
-    const slugField = fields.find(
+    const fields = config?.fields as FieldConfig[];
+    const slugField = fields?.find(
       (f: FieldConfig) => f.name === "slug" && f.admin?.autoGenerate,
     );
     if (!slugField?.admin?.autoGenerate) return;
@@ -470,13 +471,13 @@ const persistBrowserDraft = useCallback(
 
     const sourceValue = resolveFieldValue(fields, formData, sourceField);
 
-    if (isSlugLocked && sourceValue) {
+    if (isSlugLocked && typeof sourceValue === "string") {
       const newSlug = slugifyText(sourceValue);
       if (newSlug !== formData.slug) {
         setField("slug", newSlug);
       }
     }
-  }, [formData, isSlugLocked, config.fields, setField]);
+  }, [formData, isSlugLocked, config?.fields, setField]);
 
   // Auto-save effect — only starts timers on keystroke-originated changes.
   // Local save fires after 1.5s of inactivity, server save after 8s.

package/src/hooks/useQueue.ts

@@ -14,7 +14,6 @@ type QueueTask = (fn: QueuedFunction, options?: QueueTaskOptions) => void;
  * Only the last task in the queue is ever processed; all prior pending tasks are discarded.
  * This prevents race conditions where multiple autosave fetches could run in parallel.
  *
- * Inspired by Payload's useQueues hook.
  *
  * @returns {queueTask} A function used to queue a task for execution.
  */
@@ -40,7 +39,9 @@ export function useQueue(): { queueTask: QueueTask } {
         isProcessing.current = true;
 
         try {
-          await latestTask();
+          if (latestTask) {
+            await latestTask();
+          }
         } catch (err) {
           console.error("Error in queued function:", err);
         } finally {

package/src/index.ts

@@ -109,7 +109,6 @@ export {
 } from "./fields/index";
 
 // Astro Integration
-export { kyroAdmin } from "./integration";
 export type { KyroAdminOptions } from "./integration";
 
 // Paths (for users who need direct access)