@kyro-cms/admin 0.11.2 → 0.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -933,6 +933,10 @@ export function AutoForm({
             onChange={onFieldChange}
             error={error}
             disabled={effectiveDisabled}
+            formData={formData}
+            siblingData={currentData}
+            collectionSlug={collectionSlug}
+            globalSlug={globalSlug}
           />
         );
     }

package/src/components/FieldRenderer.tsx

@@ -25,6 +25,10 @@ interface FieldRendererProps {
   onChange: (value: any) => void;
   error?: string;
   disabled?: boolean;
+  formData?: Record<string, unknown>;
+  siblingData?: Record<string, unknown>;
+  collectionSlug?: string;
+  globalSlug?: string;
 }
 
 export const FieldRenderer: React.FC<FieldRendererProps> = ({
@@ -33,6 +37,10 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
   onChange,
   error,
   disabled,
+  formData,
+  siblingData,
+  collectionSlug,
+  globalSlug,
 }) => {
   if (field.hidden === true || field.admin?.hidden === true) return null;
 
@@ -109,9 +117,13 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <SelectField
           field={field as any}
           value={value}
-          onChange={onChange}
-          disabled={disabled}
+          onChange={onChangeKeystroke}
           error={error}
+          disabled={disabled}
+          formData={formData}
+          siblingData={siblingData}
+          collectionSlug={collectionSlug}
+          globalSlug={globalSlug}
         />
       );
     case "date":
@@ -244,6 +256,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
                 }}
                 disabled={disabled}
                 error={error}
+                collectionSlug={collectionSlug}
+                globalSlug={globalSlug}
               />
             );
           }}

package/src/components/ListView.tsx

@@ -638,8 +638,8 @@ export function ListView({
                     {displayFields.map((field) => {
                       const rawValue = extractFieldValue(doc, field);
                       const cellValue =
-                        field.type === "select" && rawValue
-                          ? field.options?.find((o: any) => o.value === rawValue)
+                        field.type === "select" && rawValue && Array.isArray(field.options)
+                          ? field.options.find((o: any) => o.value === rawValue)
                             ?.label || rawValue
                           : formatCellValue(rawValue, field.type);
                       return (

package/src/components/fields/ArrayLayout.tsx

@@ -17,7 +17,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
-const SIMPLE_TYPES = new Set(["text", "textarea", "number", "checkbox", "select", "radio", "color", "email", "password", "code", "markdown", "upload"]);
+const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password"]);
 
 interface ArrayLayoutProps {
   field: Field;
@@ -102,7 +102,7 @@ function SortableArrayItem({
         <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2.5 min-w-[18px] text-center">
           {index + 1}
         </span>
-        <div className="flex-1 flex items-start gap-1.5 min-w-0">
+        <div className={`flex-1 min-w-0 ${((field as any).fields || []).length >= 3 ? "flex flex-col gap-1.5" : "flex items-start gap-1.5"}`}>
           {((field as any).fields || []).map((f: Field) => (
             <div key={f.name} className="flex-1 min-w-0">
               {renderField(f, item, onChangeItem)}

package/src/components/fields/SelectField.tsx

@@ -1,6 +1,9 @@
+import React, { useState, useEffect } from "react";
 import type { SelectField as SelectFieldType } from "@kyro-cms/core/client";
 import FieldLayout from "./FieldLayout";
 import { collections } from "../../lib/config";
+import { fetchWithAuth } from "../../lib/api";
+import { apiPath } from "../../lib/paths";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
@@ -8,6 +11,10 @@ interface SelectFieldComponentProps {
   onChange?: (value: string | string[] | undefined) => void;
   error?: string;
   disabled?: boolean;
+  formData?: Record<string, unknown>;
+  siblingData?: Record<string, unknown>;
+  collectionSlug?: string;
+  globalSlug?: string;
 }
 
 export default function SelectField({
@@ -16,14 +23,71 @@ export default function SelectField({
   onChange,
   error,
   disabled,
+  formData,
+  siblingData,
+  collectionSlug,
+  globalSlug,
 }: SelectFieldComponentProps) {
   const isReadOnly =
     typeof field.admin?.readOnly === "function"
       ? false
       : Boolean(field.admin?.readOnly);
 
+  const [dynamicOptions, setDynamicOptions] = useState<Array<{ label: string; value: string }> | null>(null);
+
+  // Debounce stringify for formData to prevent infinite loops or excessive refetches
+  const formDataStr = JSON.stringify(formData || {});
+  const siblingDataStr = JSON.stringify(siblingData || {});
+
+  useEffect(() => {
+    if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") return;
+    
+    const fetchOptions = async () => {
+      try {
+        let url = "";
+        if (collectionSlug) {
+          url = `${apiPath}/${collectionSlug}/dynamic-options/${field.name}`;
+        } else if (globalSlug) {
+          url = `${apiPath}/globals/${globalSlug}/dynamic-options/${field.name}`;
+        } else {
+          return;
+        }
+
+        const res = await fetchWithAuth(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ 
+            data: JSON.parse(formDataStr), 
+            siblingData: JSON.parse(siblingDataStr) 
+          }),
+        });
+        
+        if (res.ok) {
+          const json = await res.json();
+          if (json.options) {
+            setDynamicOptions(json.options);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to fetch dynamic options:", err);
+      }
+    };
+
+    const timer = setTimeout(fetchOptions, 300);
+    return () => clearTimeout(timer);
+  }, [formDataStr, siblingDataStr, field.name, field.options, collectionSlug, globalSlug]);
+
   // Resolve dynamic options at runtime if configured
-  let options = field.options || [];
+  let options: Array<{ label: string; value: string }> = dynamicOptions || [];
+  
+  if (field.options !== "__KYRO_DYNAMIC_OPTIONS__") {
+    if (typeof field.options === "function") {
+      options = field.options({ data: formData || {}, siblingData: siblingData || {} });
+    } else if (Array.isArray(field.options)) {
+      options = field.options;
+    }
+  }
+
   if (field.dynamicOptions === "collections") {
     options = Object.keys(collections)
       .filter((slug) => slug !== "media")

package/src/components/fields/UploadField.tsx

@@ -347,46 +347,6 @@ export function UploadField({
     );
   };
 
-  if (value) {
-    return (
-      <div className="space-y-2">
-        {isMultiple ? (
-          <div className="grid grid-cols-2 gap-2">
-            {currentValue.map((img: any, i: number) =>
-              renderImagePreview(img, i),
-            )}
-            {canAddMore && (
-              <button
-                type="button"
-                onClick={() => {
-                  setSelectedItems([]);
-                  setShowPicker(true);
-                }}
-                disabled={disabled}
-                className="flex items-center justify-center h-12 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-border-active)] cursor-pointer transition-colors"
-              >
-                + Add {fieldLabel}
-              </button>
-            )}
-          </div>
-        ) : (
-          renderImagePreview(value)
-        )}
-        <input
-          ref={inputRef}
-          type="file"
-          accept="image/*"
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) uploadFile(file);
-          }}
-          disabled={disabled}
-          className="hidden"
-        />
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-2 relative">
       <input
@@ -400,35 +360,46 @@ export function UploadField({
         disabled={disabled}
         className="hidden"
       />
-      <div className="flex gap-2 flex-wrap">
-        <button
-          type="button"
-          onClick={() => inputRef.current?.click()}
-          disabled={disabled}
-          className="px-3 py-1.5 text-xs font-semibold rounded border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
-        >
-          + Upload {fieldLabel}
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            setSelectedItems([]);
-            setShowPicker(true);
-          }}
-          disabled={disabled}
-          className="px-3 py-1.5 text-xs font-semibold rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
-        >
-          Library
-        </button>
-        <button
-          type="button"
-          onClick={() => setShowUrlInput(!showUrlInput)}
-          disabled={disabled}
-          className="px-3 py-1.5 text-xs font-semibold rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
-        >
-          URL
-        </button>
-      </div>
+
+      {currentValue.length > 0 && (
+        <div className={isMultiple ? "grid grid-cols-2 gap-2" : "space-y-2"}>
+          {currentValue.map((img: any, i: number) =>
+            renderImagePreview(img, i),
+          )}
+        </div>
+      )}
+
+      {(!currentValue.length || canAddMore) && (
+        <div className="flex gap-2 flex-wrap">
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={disabled}
+            className="px-3 py-1.5 text-xs font-semibold rounded border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+          >
+            + Upload {fieldLabel}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setSelectedItems([]);
+              setShowPicker(true);
+            }}
+            disabled={disabled}
+            className="px-3 py-1.5 text-xs font-semibold rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+          >
+            Library
+          </button>
+          <button
+            type="button"
+            onClick={() => setShowUrlInput(!showUrlInput)}
+            disabled={disabled}
+            className="px-3 py-1.5 text-xs font-semibold rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-border-active)] transition-colors"
+          >
+            URL
+          </button>
+        </div>
+      )}
 
       {showUrlInput && (
         <div className="flex gap-2 items-center">

package/src/integration.ts

@@ -79,14 +79,17 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
             import { parentPort } from 'worker_threads';
             import('${pathToFileURL(tmpFile).href}').then(mod => {
               const cfg = mod.default || mod;
-              const serialize = (obj) => {
+              const serialize = (obj, key) => {
                 if (obj === null || obj === undefined) return obj;
-                if (typeof obj === 'function') return undefined;
-                if (Array.isArray(obj)) return obj.map(serialize);
+                if (typeof obj === 'function') {
+                  if (key === 'options') return "__KYRO_DYNAMIC_OPTIONS__";
+                  return undefined;
+                }
+                if (Array.isArray(obj)) return obj.map((v) => serialize(v));
                 if (typeof obj === 'object') {
                   const result = {};
                   for (const [k, v] of Object.entries(obj)) {
-                    const sv = serialize(v);
+                    const sv = serialize(v, k);
                     if (sv !== undefined) result[k] = sv;
                   }
                   return result;

package/src/lib/normalize-upload-fields.ts

@@ -25,7 +25,7 @@ export function normalizeUploadFields(value: unknown): unknown {
     const hasId = "id" in obj && (typeof obj.id === "string" || obj.id === null);
     const hasMediaField = "url" in obj && ("filename" in obj || "mimeType" in obj);
     
-    if (hasId && hasMediaField && keys.length <= 8) {
+    if (hasId && hasMediaField && keys.length <= 25) {
       return obj.id;
     }