@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/fields/SecretField.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import type { SecretField as SecretFieldType } from "@kyro-cms/core/client";
+import { IconCopy, IconCheck, IconRefreshCw } from "../ui/icons";
+import FieldLayout from "./FieldLayout";
+
+interface SecretFieldComponentProps {
+  field: SecretFieldType;
+  value?: string | null;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function SecretField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+}: SecretFieldComponentProps) {
+  const [copied, setCopied] = useState(false);
+  const [regenerating, setRegenerating] = useState(false);
+
+  const fullValue = value ?? "";
+  const displayValue = fullValue.length > 8
+    ? fullValue.slice(0, -8) + "*".repeat(8)
+    : fullValue;
+
+  const handleCopy = async () => {
+    if (!fullValue) return;
+    try {
+      await navigator.clipboard.writeText(fullValue);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = fullValue;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (regenerating || disabled) return;
+    setRegenerating(true);
+    const bytes = new Uint8Array(32);
+    crypto.getRandomValues(bytes);
+    const hex = Array.from(bytes)
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+    onChange?.(hex);
+    setTimeout(() => setRegenerating(false), 400);
+  };
+
+  return (
+    <FieldLayout field={field} error={error}>
+      <div className="flex items-center gap-1.5">
+        <div className="relative flex-1">
+          <input
+            id={field.name}
+            type="text"
+            value={displayValue}
+            readOnly
+            disabled={disabled}
+            className="kyro-form-input font-mono text-xs tracking-wider pr-10 opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed select-none"
+            spellCheck={false}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={!fullValue || disabled}
+          className="p-2 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-alpha)] transition-all disabled:opacity-40 disabled:cursor-not-allowed active:scale-95"
+          title={copied ? "Copied!" : "Copy full secret"}
+        >
+          {copied ? (
+            <IconCheck className="w-3.5 h-3.5 text-[var(--kyro-success)]" />
+          ) : (
+            <IconCopy className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={handleRegenerate}
+          disabled={disabled}
+          className="p-2 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-warning)] hover:bg-[var(--kyro-warning)]/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed active:scale-95"
+          title="Regenerate secret"
+        >
+          <IconRefreshCw
+            className={`w-3.5 h-3.5 ${regenerating ? "animate-spin" : ""}`}
+          />
+        </button>
+      </div>
+    </FieldLayout>
+  );
+}

package/src/components/fields/SelectField.tsx

@@ -1,5 +1,6 @@
 import type { SelectField as SelectFieldType } from "@kyro-cms/core/client";
 import FieldLayout from "./FieldLayout";
+import { collections } from "../../lib/config";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
@@ -16,7 +17,21 @@ export default function SelectField({
   error,
   disabled,
 }: SelectFieldComponentProps) {
-  const isReadOnly = field.admin?.readOnly;
+  const isReadOnly =
+    typeof field.admin?.readOnly === "function"
+      ? false
+      : Boolean(field.admin?.readOnly);
+
+  // Resolve dynamic options at runtime if configured
+  let options = field.options || [];
+  if (field.dynamicOptions === "collections") {
+    options = Object.keys(collections)
+      .filter((slug) => slug !== "media")
+      .map((slug) => ({
+        label: collections[slug]?.label || slug,
+        value: slug,
+      }));
+  }
 
   return (
     <FieldLayout
@@ -27,14 +42,12 @@ export default function SelectField({
         id={field.name}
         value={
           field.hasMany
-            ? Array.isArray(value)
-              ? value.join(",")
-              : ""
+            ? (Array.isArray(value) ? value : [])
             : value || ""
         }
         onChange={(e) => {
           if (field.hasMany) {
-            const selected = e.target.value ? e.target.value.split(",") : [];
+            const selected = Array.from(e.target.selectedOptions, (opt) => opt.value);
             onChange?.(selected);
           } else {
             onChange?.(e.target.value || undefined);
@@ -48,7 +61,7 @@ export default function SelectField({
         }`}
       >
         {!field.required && !field.hasMany && <option value="">Select...</option>}
-        {field.options?.map((option) => (
+        {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
           </option>

package/src/components/fields/TabsLayout.tsx

@@ -5,7 +5,7 @@ import { SeoPreview } from "../ui/SeoPreview";
 interface TabsLayoutProps {
   field: Field;
   formData: Record<string, unknown>;
-  onTabDataChange: (tabData: Record<string, unknown>) => void;
+  onTabDataChange: (value: unknown) => void;
   renderField: (
     field: Field,
     parentData: Record<string, unknown>,
@@ -24,8 +24,10 @@ export function TabsLayout({
   const fieldTabs = (field as Field & { tabs?: { label: string; fields: Field[] }[] }).tabs || [];
   const currentTab = fieldTabs[activeTab] || fieldTabs[0];
 
-  // Get nested tab data
-  const tabData = formData[field.name as string] || {};
+  // Tab data is stored nested under field.name when present
+  const tabData: Record<string, unknown> = field.name
+    ? (formData[field.name] as Record<string, unknown>) || {}
+    : formData;
 
   return (
     <div className="space-y-8">
@@ -34,7 +36,7 @@ export function TabsLayout({
           <button
             key={index}
             type="button"
-            className={`px-6 py-3 text-xs  tracking-widest font-bold transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
+            className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
               ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
               : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
               }`}
@@ -56,11 +58,19 @@ export function TabsLayout({
             Live Google Preview
           </h4>
           <SeoPreview
-            title={formData.metaTitle || formData.title || "Untitled"}
-            description={
-              formData.metaDescription || "Please enter a description..."
-            }
-            slug={formData.slug || "your-slug"}
+            title={String(
+              (typeof tabData.metaTitle === "object" ? "" : tabData.metaTitle) ||
+              (typeof tabData.title === "object" ? "" : tabData.title) ||
+              "Untitled"
+            )}
+            description={String(
+              (typeof tabData.metaDescription === "object" ? "" : tabData.metaDescription) ||
+              "Please enter a description..."
+            )}
+            slug={String(
+              (typeof formData.slug === "object" ? "" : formData.slug) ||
+              "your-slug"
+            )}
           />
         </div>
       )}

package/src/components/fields/TextField.tsx

@@ -18,7 +18,10 @@ export default function TextField({
   error,
   disabled,
 }: TextFieldComponentProps) {
-  const isReadOnly = field.admin?.readOnly;
+  const isReadOnly =
+    typeof field.admin?.readOnly === "function"
+      ? false
+      : Boolean(field.admin?.readOnly);
   const isTextarea = (field as TextFieldType).variant === "textarea";
   const isSlug = field.name === "slug";
 

package/src/components/fields/UploadField.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { Image as ImageIcon, Film, FileText, Music, File, X, Loader2 } from "../ui/icons";
+import { Image as ImageIcon, Film, FileText, Music, File, X, Loader2, Check } from "../ui/icons";
 import { apiGet, withCacheBust, apiPost, apiUpload, resolveApi, resolveMedia } from "../../lib/api";
 import { toast } from "../../lib/stores";
 
@@ -88,9 +88,10 @@ export function UploadField({
   const [showUrlInput, setShowUrlInput] = useState(false);
   const [urlValue, setUrlValue] = useState("");
   const [urlError, setUrlError] = useState("");
+  const [selectedItems, setSelectedItems] = useState<MediaItem[]>([]);
 
   const fieldLabel = field?.label || field?.name || "File";
-  const maxCount = field.maxCount || 1;
+  const maxCount = field.maxCount ?? (field.hasMany ? 999 : 1);
   const isMultiple = maxCount > 1;
   const currentValue = Array.isArray(value) ? value : value ? [value] : [];
   const canAddMore = currentValue.length < maxCount;
@@ -98,21 +99,38 @@ export function UploadField({
   useEffect(() => {
     const fetchMissingDetails = async () => {
       const idsToFetch = currentValue
-        .filter(item => typeof item === 'string')
-        .map(id => id as string);
+        .filter((item): item is string => typeof item === 'string')
+        .map(id => id);
 
-      if (idsToFetch.length === 0) return;
+      const objectIdsToFetch = currentValue
+        .filter((item): item is Record<string, unknown> =>
+          typeof item === 'object' && item !== null &&
+          typeof item.id === 'string' &&
+          !item.url && !item.filename && !item.mimeType
+        )
+        .map(item => item.id as string);
+
+      const allIds = [...idsToFetch, ...objectIdsToFetch];
+      if (allIds.length === 0) return;
 
       try {
         const fetchedItems = await Promise.all(
-          idsToFetch.map(id => apiGet<any>(`/api/media/${id}`))
+          allIds.map(id => apiGet<any>(`/api/media/${id}`))
         );
 
         const newItems = [...currentValue];
         fetchedItems.forEach(fetchedItem => {
-          const index = newItems.findIndex(item => item === (fetchedItem.id || fetchedItem));
-          if (index !== -1) {
-            newItems[index] = fetchedItem;
+          const id = fetchedItem.id as string;
+          const strIndex = newItems.findIndex(item => item === id);
+          if (strIndex !== -1) {
+            newItems[strIndex] = fetchedItem;
+            return;
+          }
+          const objIndex = newItems.findIndex(
+            item => typeof item === 'object' && item !== null && (item as any).id === id
+          );
+          if (objIndex !== -1) {
+            newItems[objIndex] = fetchedItem;
           }
         });
 
@@ -183,6 +201,7 @@ export function UploadField({
       toast.success(`Asset synchronized: ${newImage.filename}`);
     } catch (err) {
       console.error("Upload failed:", err);
+      toast.error(`Upload failed: ${err instanceof Error ? err.message : "Unknown error"}`);
     } finally {
       setUploading(false);
     }
@@ -227,18 +246,33 @@ export function UploadField({
     }
   };
 
+  const toMediaObj = (item: MediaItem) => ({
+    id: item.id,
+    filename: item.filename,
+    url: item.url,
+    mimeType: item.mimeType,
+  });
+
   const selectFromLibrary = (item: MediaItem) => {
-    const newImage = {
-      id: item.id,
-      filename: item.filename,
-      url: item.url,
-      mimeType: item.mimeType,
-    };
     if (isMultiple) {
-      onChange([...currentValue, newImage]);
+      setSelectedItems(prev => {
+        const exists = prev.find(i => i.id === item.id);
+        if (exists) return prev.filter(i => i.id !== item.id);
+        return [...prev, item];
+      });
     } else {
-      onChange(newImage);
+      onChange(toMediaObj(item));
+      setShowPicker(false);
+      setPickerSearch("");
     }
+  };
+
+  const handleDone = () => {
+    if (selectedItems.length > 0) {
+      const newItems = [...currentValue, ...selectedItems.map(toMediaObj)];
+      onChange(newItems);
+    }
+    setSelectedItems([]);
     setShowPicker(false);
     setPickerSearch("");
   };
@@ -324,7 +358,10 @@ export function UploadField({
             {canAddMore && (
               <button
                 type="button"
-                onClick={() => inputRef.current?.click()}
+                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"
               >
@@ -374,7 +411,10 @@ export function UploadField({
         </button>
         <button
           type="button"
-          onClick={() => setShowPicker(true)}
+          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"
         >
@@ -409,7 +449,7 @@ export function UploadField({
             type="button"
             onClick={addByUrl}
             disabled={disabled || !urlValue.trim()}
-            className="px-3 py-1.5 text-xs rounded bg-[var(--kyro-primary)] text-white cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-50"
+            className="kyro-btn kyro-btn-primary px-3 py-1.5 text-xs rounded cursor-pointer hover:opacity-90 transition-opacity disabled:opacity-50"
           >
             Add
           </button>
@@ -424,6 +464,8 @@ export function UploadField({
           createPortal(
             <MediaPickerContent
               isFullscreen
+              isMultiple={isMultiple}
+              selectedItems={selectedItems}
               pickerSearch={pickerSearch}
               setPickerSearch={setPickerSearch}
               folders={folders}
@@ -432,6 +474,7 @@ export function UploadField({
               mediaLoading={mediaLoading}
               filteredMedia={filteredMedia}
               selectFromLibrary={selectFromLibrary}
+              onDone={handleDone}
               setIsPickerFullscreen={setIsPickerFullscreen}
               setShowPicker={setShowPicker}
             />,
@@ -440,6 +483,8 @@ export function UploadField({
         ) : (
           <MediaPickerContent
             isFullscreen={false}
+            isMultiple={isMultiple}
+            selectedItems={selectedItems}
             pickerSearch={pickerSearch}
             setPickerSearch={setPickerSearch}
             folders={folders}
@@ -448,6 +493,7 @@ export function UploadField({
             mediaLoading={mediaLoading}
             filteredMedia={filteredMedia}
             selectFromLibrary={selectFromLibrary}
+            onDone={handleDone}
             setIsPickerFullscreen={setIsPickerFullscreen}
             setShowPicker={setShowPicker}
           />
@@ -458,6 +504,8 @@ export function UploadField({
 
 function MediaPickerContent({
   isFullscreen,
+  isMultiple,
+  selectedItems,
   pickerSearch,
   setPickerSearch,
   folders,
@@ -466,10 +514,13 @@ function MediaPickerContent({
   mediaLoading,
   filteredMedia,
   selectFromLibrary,
+  onDone,
   setIsPickerFullscreen,
   setShowPicker,
 }: {
   isFullscreen: boolean;
+  isMultiple: boolean;
+  selectedItems: MediaItem[];
   pickerSearch: string;
   setPickerSearch: (v: string) => void;
   folders: MediaFolder[];
@@ -478,14 +529,17 @@ function MediaPickerContent({
   mediaLoading: boolean;
   filteredMedia: MediaItem[];
   selectFromLibrary: (item: MediaItem) => void;
+  onDone: () => void;
   setIsPickerFullscreen: (v: boolean) => void;
   setShowPicker: (v: boolean) => void;
 }) {
+  const isItemSelected = (id: string) => selectedItems.some(i => i.id === id);
+
   return (
     <div
       className={`${isFullscreen
         ? "fixed inset-0 z-[9999]"
-        : "absolute z-[9999] w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
+        : "relative z-[9999] w-[360px] max-h-[400px] mt-1 rounded-lg shadow-lg"
         } overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] flex flex-col`}
     >
       <div className="p-2 border-b border-[var(--kyro-border)] flex flex-col gap-2">
@@ -501,8 +555,8 @@ function MediaPickerContent({
             <button
               type="button"
               onClick={() => setSelectedFolder("")}
-              className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === ""
-                ? "bg-[var(--kyro-primary)] text-white"
+              className={`kyro-btn-primary px-2 py-1 text-xs rounded transition-colors ${selectedFolder === ""
+                ? ""
                 : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
                 }`}
             >
@@ -513,8 +567,8 @@ function MediaPickerContent({
                 key={folder.path}
                 type="button"
                 onClick={() => setSelectedFolder(folder.path)}
-                className={`px-2 py-1 text-xs rounded transition-colors ${selectedFolder === folder.path
-                  ? "bg-[var(--kyro-primary)] text-white"
+                className={`kyro-btn-primary px-2 py-1 text-xs rounded transition-colors ${selectedFolder === folder.path
+                  ? ""
                   : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-border)]"
                   }`}
               >
@@ -542,40 +596,43 @@ function MediaPickerContent({
               : "grid-cols-3"
               }`}
           >
-            {filteredMedia.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                onClick={() => selectFromLibrary(item)}
-                className="border border-[var(--kyro-border)] rounded-md overflow-hidden cursor-pointer p-0 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)] transition-all relative group"
-              >
-                <div
-                  className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${isFullscreen ? "h-[120px]" : "h-[80px]"
+            {filteredMedia.map((item) => {
+              const selected = isItemSelected(item.id);
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => selectFromLibrary(item)}
+                  className={`border rounded-md overflow-hidden cursor-pointer p-0 bg-[var(--kyro-surface)] transition-all relative group ${selected
+                    ? "border-[var(--kyro-primary)] ring-2 ring-[var(--kyro-primary)]"
+                    : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]"
                     }`}
                 >
-                  {getFileType(item.mimeType, item.filename) === "image" ? (
-                    <img
-                      src={resolveMedia(item.thumbnailUrl || item.url)}
-                      alt={item.filename}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <FileIcon
-                      type={getFileType(item.mimeType, item.filename)}
-                      className={isFullscreen ? "w-10 h-10" : "w-8 h-8"}
-                    />
+                  <div
+                    className={`w-full flex items-center justify-center bg-[var(--kyro-surface-accent)] ${isFullscreen ? "h-[120px]" : "h-[80px]"
+                      }`}
+                  >
+                    {getFileType(item.mimeType, item.filename) === "image" ? (
+                      <img
+                        src={resolveMedia(item.thumbnailUrl || item.url)}
+                        alt={item.filename}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <FileIcon
+                        type={getFileType(item.mimeType, item.filename)}
+                        className={isFullscreen ? "w-10 h-10" : "w-8 h-8"}
+                      />
+                    )}
+                  </div>
+                  {isMultiple && selected && (
+                    <div className="absolute top-1 right-1 w-5 h-5 rounded-full bg-[var(--kyro-primary)] flex items-center justify-center">
+                      <Check className="w-3 h-3 text-white" />
+                    </div>
                   )}
-                </div>
-                <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-0 transition-opacity flex flex-col items-center justify-center p-2">
-                  <span className="text-white text-[10px] font-medium text-center line-clamp-2 mb-1">
-                    {item.filename}
-                  </span>
-                  <span className="text-white/70 text-[9px]  font-bold tracking-tighter">
-                    {getFileType(item.mimeType, item.filename)}
-                  </span>
-                </div>
-              </button>
-            ))}
+                </button>
+              );
+            })}
           </div>
         )}
       </div>
@@ -584,6 +641,15 @@ function MediaPickerContent({
           {filteredMedia.length} items
         </span>
         <div className="flex gap-2 items-center">
+          {isMultiple && (
+            <button
+              type="button"
+              onClick={onDone}
+              className="kyro-btn kyro-btn-primary px-3 py-1 text-xs font-semibold rounded cursor-pointer hover:opacity-90 transition-opacity"
+            >
+              Done{selectedItems.length > 0 ? ` (${selectedItems.length})` : ""}
+            </button>
+          )}
           <button
             type="button"
             onClick={() => setIsPickerFullscreen(!isFullscreen)}