@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/ui/CommandPalette.tsx

@@ -20,6 +20,7 @@ import {
   Hexagon,
 } from "./icons";
 import { useAuthStore } from "../../lib/stores";
+import { useTranslation } from "react-i18next";
 
 interface SearchResult {
   collection: string;
@@ -44,6 +45,7 @@ export function CommandPalette({
   globals,
   onNavigate,
 }: CommandPaletteProps) {
+    const { t } = useTranslation();
   const { user, permissions } = useAuthStore();
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -107,7 +109,7 @@ export function CommandPalette({
 
   const collectionItems = Object.entries(collections)
     .filter(([slug]) => permissions?.collections?.[slug]?.read !== false)
-    .map(([slug, config]: [string, Record<string, unknown>]) => ({
+    .map(([slug, config]: [string, any]) => ({
       id: `col-${slug}`,
       label: config.label || slug,
       type: "collection",
@@ -117,7 +119,7 @@ export function CommandPalette({
 
   const globalItems = Object.entries(globals)
     .filter(([slug]) => permissions?.globals?.[slug]?.read !== false)
-    .map(([slug, config]: [string, Record<string, unknown>]) => ({
+    .map(([slug, config]: [string, any]) => ({
       id: `global-${slug}`,
       label: config.label || slug,
       type: "global",
@@ -267,7 +269,7 @@ export function CommandPalette({
       } else if (item.view === "media") {
         onNavigate("media", "media");
       } else {
-        onNavigate(item.view, item.view);
+        onNavigate(item.view as string, item.view as string);
       }
     }
     onClose();
@@ -298,7 +300,7 @@ export function CommandPalette({
           )}
           <input
             ref={inputRef}
-            placeholder="Search anything..."
+            placeholder={t("fields.searchAnything", { defaultValue: "Search anything..." })}
             className="flex-1 bg-transparent border-none focus:outline-none text-lg font-medium text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)]"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -334,12 +336,12 @@ export function CommandPalette({
                       <item.icon className="w-4 h-4" />
                     </div>
                     <div className="flex flex-col">
-                      <span className="font-bold text-sm">{item.label}</span>
-                      {item.type === "document" && item.label2 && (
+                      <span className="font-bold text-sm">{(item as any).label}</span>
+                      {item.type === "document" && (item as any).label2 && (
                         <span
                           className={`text-[10px] font-bold  tracking-widest ${index === selectedIndex ? "text-[var(--kyro-sidebar-text-active)]/60" : "opacity-40"}`}
                         >
-                          {item.label2}
+                          {(item as any).label2}
                         </span>
                       )}
                     </div>

package/src/components/ui/CommandPaletteWrapper.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { CommandPalette } from "./CommandPalette";
 import { ConfirmModal } from "./Modal";
 import { adminPath } from "../../lib/paths";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   collections: Record<string, unknown>;
@@ -9,6 +10,7 @@ interface Props {
 }
 
 export function CommandPaletteWrapper({ collections, globals }: Props) {
+    const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
 
@@ -87,7 +89,7 @@ export function CommandPaletteWrapper({ collections, globals }: Props) {
         open={showLogoutConfirm}
         onClose={() => setShowLogoutConfirm(false)}
         onConfirm={handleLogoutConfirm}
-        title="Sign Out"
+        title={t("tooltips.signOut", { defaultValue: "Sign Out" })}
         message="Are you sure you want to sign out?"
         confirmLabel="Sign Out"
         variant="danger"

package/src/components/ui/IconPickerModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from "react";
 import { Modal } from "./Modal";
 import * as LucideIcons from "lucide-react";
 import { Search } from "./icons";
+import { useTranslation } from "react-i18next";
 
 // Extract only valid components from lucide-react
 const availableIcons = Object.keys(LucideIcons).filter((key) => {
@@ -15,6 +16,7 @@ interface IconPickerModalProps {
 }
 
 export function IconPickerModal({ open, onClose, onSelect }: IconPickerModalProps) {
+    const { t } = useTranslation();
   const [search, setSearch] = useState("");
 
   const filteredIcons = useMemo(() => {
@@ -27,7 +29,7 @@ export function IconPickerModal({ open, onClose, onSelect }: IconPickerModalProp
     <Modal
       open={open}
       onClose={onClose}
-      title="Select an Icon"
+      title={t("tooltips.selectAnIcon", { defaultValue: "Select an Icon" })}
       size="xl"
     >
       <div className="flex flex-col h-[60vh]">
@@ -35,7 +37,7 @@ export function IconPickerModal({ open, onClose, onSelect }: IconPickerModalProp
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
           <input
             type="text"
-            placeholder="Search icons..."
+            placeholder={t("fields.searchIcons", { defaultValue: "Search icons..." })}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             className="w-full pl-10 pr-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] transition-all text-sm font-bold"

package/src/components/ui/PageHeader.tsx

@@ -9,7 +9,8 @@ interface Breadcrumb {
 
 interface Action {
   label: string;
-  onClick: () => void;
+  href?: string;
+  onClick?: () => void;
   icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
   variant?: "primary" | "outline" | "ghost";
   className?: string;
@@ -90,24 +91,40 @@ function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["action
   if (Array.isArray(actions)) {
     return (
       <div className="flex items-center gap-3">
-        {actions.map((act, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={act.onClick}
-            disabled={act.disabled}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
-              act.variant === "outline"
-                ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-                : act.variant === "ghost"
-                ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
-                : "kyro-btn-primary hover:opacity-90"
-            } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`}
-          >
-            {act.icon && <act.icon className="w-4 h-4" />}
-            {act.label}
-          </button>
-        ))}
+        {actions.map((act, i) => {
+          const className = `flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all ${act.variant === "outline"
+            ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+            : act.variant === "ghost"
+              ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
+              : "kyro-btn-primary hover:opacity-90"
+            } ${act.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${act.className || ""}`;
+
+          if (act.href && !act.disabled) {
+            return (
+              <a
+                key={i}
+                href={act.href}
+                className={className}
+              >
+                {act.icon && <act.icon className="w-4 h-4" />}
+                {act.label}
+              </a>
+            );
+          }
+
+          return (
+            <button
+              key={i}
+              type="button"
+              onClick={act.onClick}
+              disabled={act.disabled}
+              className={className}
+            >
+              {act.icon && <act.icon className="w-4 h-4" />}
+              {act.label}
+            </button>
+          );
+        })}
       </div>
     );
   }
@@ -115,12 +132,23 @@ function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["action
 }
 
 function SingleAction({ action }: { action: NonNullable<PageHeaderProps["action"]> }) {
+  const className = `kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`;
+
+  if (action.href && !action.disabled) {
+    return (
+      <a href={action.href} className={className}>
+        {action.icon && <action.icon className="w-4 h-4" />}
+        {action.label}
+      </a>
+    );
+  }
+
   return (
     <button
       type="button"
       onClick={action.onClick}
       disabled={action.disabled}
-      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 w-full lg:w-auto justify-center ${action.disabled ? "opacity-50 cursor-wait pointer-events-none" : ""} ${action.className || ""}`}
+      className={className}
     >
       {action.icon && <action.icon className="w-4 h-4" />}
       {action.label}

package/src/components/users/UserDetail.tsx

@@ -3,6 +3,7 @@ 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";
 
 interface User {
   id: string;
@@ -35,6 +36,7 @@ const roleOptions = [
 ];
 
 export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
+    const { t } = useTranslation();
   const [name, setName] = useState(user.name || "");
   const [role, setRole] = useState(user.role);
   const [avatar, setAvatar] = useState<string | undefined>(user.avatar);
@@ -228,7 +230,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
               value={name}
               onChange={(e) => setName(e.target.value)}
               className="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)]"
-              placeholder="Enter name"
+              placeholder={t("fields.enterName", { defaultValue: "Enter name" })}
             />
           </div>
           <div>

package/src/components/users/UserForm.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface UserFormProps {
   mode: "create" | "edit";
@@ -25,6 +26,7 @@ const roleOptions = [
 ];
 
 export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
+    const { t } = useTranslation();
   const [email, setEmail] = useState(user?.email || "");
   const [name, setName] = useState(user?.name || "");
   const [password, setPassword] = useState("");
@@ -120,7 +122,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
               value={name}
               onChange={(e) => setName(e.target.value)}
               className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
-              placeholder="John Doe"
+              placeholder={t("fields.johnDoe", { defaultValue: "John Doe" })}
             />
           </div>
 
@@ -158,7 +160,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
                 required
                 minLength={12}
                 className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
-                placeholder="Minimum 12 characters"
+                placeholder={t("fields.minimum12Characters", { defaultValue: "Minimum 12 characters" })}
               />
               <p className="text-xs text-[var(--kyro-text-secondary)] mt-1">
                 Must contain , lowercase, numbers, and special
@@ -201,7 +203,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
               value={tenantId}
               onChange={(e) => setTenantId(e.target.value)}
               className="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
-              placeholder="Leave empty for global user"
+              placeholder={t("fields.leaveEmptyForGlobal", { defaultValue: "Leave empty for global user" })}
             />
           </div>
 

package/src/fields/examples/sample-field-2.tsx

@@ -2,18 +2,20 @@ import React from "react";
 import type { FieldEditorProps } from "../types.ts";
 import { registerField } from "../registry.tsx";
 import type { KyroField } from "../types.ts";
+import { useTranslation } from "react-i18next";
 
 const SampleTextareaEditor: React.FC<FieldEditorProps> = ({
   name,
   value,
   onChange,
 }) => {
+    const { t } = useTranslation();
   return (
     <textarea
       name={name}
       value={typeof value === "string" ? value : ""}
       onChange={(e) => onChange?.(e.target.value)}
-      placeholder="Sample textarea"
+      placeholder={t("fields.sampleTextarea", { defaultValue: "Sample textarea" })}
     />
   );
 };

package/src/fields/examples/sample-field.tsx

@@ -2,18 +2,20 @@ import React from "react";
 import type { FieldEditorProps } from "../types.ts";
 import { registerField } from "../registry.tsx";
 import type { KyroField } from "../types.ts";
+import { useTranslation } from "react-i18next";
 
 const SampleTextEditor: React.FC<FieldEditorProps> = ({
   name,
   value,
   onChange,
 }) => {
+    const { t } = useTranslation();
   return (
     <input
       name={name}
       value={typeof value === "string" ? value : ""}
       onChange={(e) => onChange?.(e.target.value)}
-      placeholder="Sample text"
+      placeholder={t("fields.sampleText", { defaultValue: "Sample text" })}
     />
   );
 };

package/src/hooks/useAutoFormState.ts

@@ -107,7 +107,7 @@ const persistBrowserDraft = useCallback(
     ) => {
       setDraftCache(documentKey, {
         data,
-        baseUpdatedAt: lastSavedData.updatedAt ?? null,
+        baseUpdatedAt: (lastSavedData.updatedAt as string) ?? null,
         draftUpdatedAt: new Date().toISOString(),
         lastSyncedAt: options?.lastSyncedAt ?? null,
       });
@@ -140,7 +140,7 @@ const persistBrowserDraft = useCallback(
     const latestFormData = state.formData;
     if (autoSaveSkipRef.current || !collectionSlug || !latestFormData.id) return;
     if (!state.hasDirtyFields()) return;
-    const documentKey = getDocumentKey(latestFormData.id);
+    const documentKey = getDocumentKey(latestFormData.id as string);
     if (documentKey) {
       persistBrowserDraft(documentKey, latestFormData);
     }
@@ -155,7 +155,7 @@ const persistBrowserDraft = useCallback(
     if (!globalSlug && (!collectionSlug || !latestFormData.id)) return;
     if (!state.hasDirtyFields()) return;
 
-    const documentKey = getDocumentKey(latestFormData.id);
+    const documentKey = getDocumentKey(latestFormData.id as string);
     if (documentKey) {
       persistBrowserDraft(documentKey, latestFormData);
     }
@@ -186,7 +186,7 @@ const persistBrowserDraft = useCallback(
         },
         keepalive: options?.keepalive,
         body: JSON.stringify({
-          ...normalizeUploadFields(latestFormData),
+          ...(normalizeUploadFields(latestFormData) as Record<string, unknown>),
           baseUpdatedAt: currentLastSaved.updatedAt ?? null,
         }),
       });
@@ -200,7 +200,7 @@ const persistBrowserDraft = useCallback(
         if (documentKey) {
           setDraftCache(documentKey, {
             data: latestFormData,
-            baseUpdatedAt: currentLastSaved.updatedAt ?? null,
+            baseUpdatedAt: (currentLastSaved.updatedAt as string) ?? null,
             draftUpdatedAt: new Date().toISOString(),
             lastSyncedAt: (await response.clone().json()).data?.updatedAt || new Date().toISOString(),
           });
@@ -321,8 +321,7 @@ const persistBrowserDraft = useCallback(
       if (response.ok) {
         const result = await response.json();
         const savedData = result.data || payload;
-        state.setFormData({ ...payload, ...savedData });
-        state.setLastSavedData({ ...payload, ...savedData });
+        state.loadDocument(savedData, savedData);
         setAutoSaveStatus("success");
         setTimeout(() => {
           if (useAutoFormStore.getState().autoSaveStatus === "success") {
@@ -352,7 +351,7 @@ const persistBrowserDraft = useCallback(
   const lastInitialDataRef = useRef<string>("");
   const initialDataLoadedRef = useRef(false);
   useEffect(() => {
-    const currentSlug = globalSlug || initialData?.id;
+    const currentSlug = globalSlug || (initialData?.id as string);
     const serialized = JSON.stringify(initialData);
     if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug && lastInitialDataRef.current === serialized) return;
 
@@ -365,7 +364,7 @@ const persistBrowserDraft = useCallback(
   useEffect(() => {
     if (!collectionSlug || !initialData?.id) return;
 
-    const documentKey = getDocumentKey(initialData.id);
+    const documentKey = getDocumentKey(formData.id as string);
     if (!documentKey) return;
     if (restorePromptedRef.current === documentKey) return;
 
@@ -451,11 +450,20 @@ const persistBrowserDraft = useCallback(
     }
   }, [formData, config.fields, setField]);
 
+  interface FieldConfig {
+    name?: string;
+    admin?: {
+      autoGenerate?: string;
+      [key: string]: unknown;
+    };
+    [key: string]: unknown;
+  }
+
   // Auto-generate slug
   useEffect(() => {
-    const fields = config.fields as Record<string, unknown>[];
+    const fields = config.fields as FieldConfig[];
     const slugField = fields.find(
-      (f: Record<string, unknown>) => f.name === "slug" && f.admin?.autoGenerate,
+      (f: FieldConfig) => f.name === "slug" && f.admin?.autoGenerate,
     );
     if (!slugField?.admin?.autoGenerate) return;
     const sourceField: string = slugField.admin.autoGenerate;

package/src/integration.ts

@@ -5,6 +5,7 @@ import { pathToFileURL } from "url";
 import { build } from "esbuild";
 import { config as loadDotEnv } from "dotenv";
 import { Worker } from "worker_threads";
+import { useSyncExternalStoreShimPlugin } from "./lib/vite-shim-plugin";
 
 const _shimDir = path.resolve(new URL(".", import.meta.url).pathname, "lib/shim");
 const _shimUses = path.join(_shimDir, "use-sync-external-store.js");
@@ -163,6 +164,7 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
         updateConfig({
           vite: {
             plugins: [
+              useSyncExternalStoreShimPlugin(),
               {
                 name: "kyro-admin-tsx-loader",
                 enforce: "pre" as const,
@@ -233,6 +235,22 @@ export default debug;
             optimizeDeps: {
               include: [
                 '@kyro-cms/admin',
+                'recharts',
+                'recharts > recharts-scale',
+                'recharts > recharts-scale > decimal.js-light',
+                'recharts > react-smooth',
+                'recharts > react-smooth > react-transition-group',
+                'use-sync-external-store',
+                'use-sync-external-store/with-selector.js',
+                'react-i18next > html-parse-stringify > void-elements',
+                'react-i18next > html-parse-stringify',
+              ],
+              needsInterop: [
+                'decimal.js-light',
+                'use-sync-external-store',
+                'use-sync-external-store/with-selector.js',
+                'react-i18next > html-parse-stringify > void-elements',
+                'react-i18next > html-parse-stringify',
               ],
               exclude: ['debug', 'react/compiler-runtime'],
             },
@@ -292,6 +310,9 @@ export default debug;
             pattern: "/rest-playground",
             entrypoint: "./pages/rest-playground.astro",
           },
+          { pattern: "/health", entrypoint: "./pages/health.astro" },
+          { pattern: "/403", entrypoint: "./pages/403.astro" },
+          { pattern: "/graphql-explorer", entrypoint: "./pages/graphql-explorer.astro" },
           {
             pattern: "/[collection]",
             entrypoint: "./pages/[collection]/index.astro",