@kyro-cms/admin 0.12.5 → 0.12.7

package/src/components/fields/CodeField.tsx

@@ -3,6 +3,7 @@ import { githubLight } from "@uiw/codemirror-theme-github";
 import { aura } from "@uiw/codemirror-theme-aura";
 import type { CodeField as CodeFieldType } from "@kyro-cms/core/client";
 import { useTheme } from "../ThemeProvider";
+import type { Extension } from "@codemirror/state";
 
 interface CodeFieldProps {
   field: CodeFieldType;
@@ -74,7 +75,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
 }) => {
   const [isMounted, setIsMounted] = useState(false);
   const [isDark, setIsDark] = useState(false);
-  const [extensions, setExtensions] = useState<unknown[]>([]);
+  const [extensions, setExtensions] = useState<Extension[]>([]);
   const [loading, setLoading] = useState(false);
   const [copied, setCopied] = useState(false);
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -104,7 +105,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
         const loader =
           languageExtensions[language] || languageExtensions.javascript;
         const ext = await loader();
-        setExtensions([ext]);
+        setExtensions([ext as Extension]);
       } catch (err) {
         console.error("Failed to load language extension:", err);
         setExtensions([]);

package/src/components/fields/ColumnsField.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+import type { BlockData } from "@kyro-cms/core/client";
 
 interface ColumnData {
   id: number;
-  children: Record<string, unknown>[];
+  children: BlockData[];
 }
 
 interface ColumnsFieldProps {
   columns?: number;
   columnData?: ColumnData[];
   onColumnsChange: (columns: number) => void;
-  onUpdateColumnChildren: (columnIndex: number, newChildren: Record<string, unknown>[]) => void;
+  onUpdateColumnChildren: (columnIndex: number, newChildren: BlockData[]) => void;
   compact?: boolean;
 }
 

package/src/components/fields/DateField.tsx

@@ -32,8 +32,8 @@ export default function DateField({
         value={value == null ? "" : value}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled || isReadOnly}
-        min={field.minDate}
-        max={field.maxDate}
+        min={field.minDate as string | undefined}
+        max={field.maxDate as string | undefined}
         required={field.required}
         className={`kyro-form-input ${
           disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""

package/src/components/fields/FieldLayout.tsx

@@ -31,11 +31,11 @@ export default function FieldLayout({
         {children}
       </div>
 
-      {(field.admin?.description || error) && (
+      {((field.admin?.description as string | undefined) || error) && (
         <div className="flex flex-col gap-1.5 px-1">
-          {field.admin?.description && !error && (
+          {((field.admin?.description as string | undefined) && !error) && (
             <p className="text-[11px] leading-relaxed text-[var(--kyro-text-muted)] font-medium opacity-60 italic">
-              {field.admin.description}
+              {field.admin?.description as string}
             </p>
           )}
           {error && (

package/src/components/fields/GroupLayout.tsx

@@ -8,7 +8,7 @@ interface GroupLayoutProps {
   renderField: (
     field: Field,
     parentData: Record<string, unknown>,
-    onChange: (value: unknown) => void,
+    onChange: (value: Record<string, unknown>) => void,
   ) => React.ReactNode;
 }
 
@@ -29,7 +29,7 @@ export function GroupLayout({
 
       </div>
       <div className={field.admin?.inline ? "flex items-start gap-4" : "space-y-6"}>
-        {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
+        {(field as Field & { fields?: Field[] }).fields?.map((f: Field) =>
           renderField(f, groupData, onChange),
         )}
       </div>

package/src/components/fields/MarkdownField.tsx

@@ -237,8 +237,8 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
         </div>
       )}
 
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
+      {((field.admin?.description as string | undefined) && !error) && (
+        <p className="kyro-form-help">{field.admin?.description as string}</p>
       )}
       {error && <p className="kyro-form-error">{error}</p>}
     </div>

package/src/components/fields/NumberField.tsx

@@ -31,11 +31,11 @@ export default function NumberField({
         id={field.name}
         value={value ?? ""}
         onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
-        placeholder={field.admin?.placeholder}
+        placeholder={field.admin?.placeholder as string | undefined}
         disabled={disabled || isReadOnly}
-        min={field.min}
-        max={field.max}
-        step={field.step || (field.integer ? 1 : "any")}
+        min={field.min as number | undefined}
+        max={field.max as number | undefined}
+        step={(field.step as number | string | undefined) || (field.integer ? 1 : "any")}
         required={field.required}
         className={`kyro-form-input ${
           disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""

package/src/components/fields/RelationshipField.tsx

@@ -235,7 +235,10 @@ export function RelationshipField({
 
   const getValueId = (val: unknown): string => {
     if (typeof val === "object" && val !== null) {
-      return (val as { value?: string }).value || (val as { id?: string }).id || "";
+      const inner = (val as { value?: unknown }).value ?? (val as { id?: unknown }).id;
+      // Recursively unwrap in case of doubly-nested {relationTo, value: {relationTo, value: id}}
+      if (inner !== undefined && inner !== null) return getValueId(inner);
+      return "";
     }
     return String(val);
   };

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/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/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/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)