@kyro-cms/admin 0.9.0 → 0.9.1

package/src/lib/shim/use-sync-external-store-with-selector.js

@@ -0,0 +1,30 @@
+import { useSyncExternalStore, useMemo } from "react";
+
+export function useSyncExternalStoreWithSelector(
+  subscribe,
+  getSnapshot,
+  getServerSnapshot,
+  selector,
+  isEqual,
+) {
+  const memoizedSelector = useMemo(() => {
+    let last, lastSnap, hasMemo = false;
+    return (snap) => {
+      if (!hasMemo || !Object.is(lastSnap, snap)) {
+        const next = selector(snap);
+        if (!hasMemo || !(isEqual ? isEqual(last, next) : Object.is(last, next))) {
+          last = next;
+          lastSnap = snap;
+          hasMemo = true;
+        }
+      }
+      return last;
+    };
+  }, [selector, isEqual]);
+  const getSelection = () => memoizedSelector(getSnapshot());
+  const getServerSelection =
+    getServerSnapshot != null
+      ? () => memoizedSelector(getServerSnapshot())
+      : undefined;
+  return useSyncExternalStore(subscribe, getSelection, getServerSelection);
+}

package/src/lib/shim/use-sync-external-store.js

@@ -0,0 +1 @@
+export { useSyncExternalStore } from "react";

package/src/lib/stores/index.ts

@@ -10,6 +10,7 @@ export interface AuthUser {
   id: string;
   email: string;
   role: string;
+  avatar?: string;
   tenantId?: string;
   [key: string]: unknown;
 }

package/src/lib/useResourceManager.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { apiGet, apiPost, apiDelete, apiPatch } from "./api";
-import { useUIStore } from "./stores";
+import { useUIStore, toast } from "./stores";
 
 interface UseResourceManagerOptions<T> {
   endpoint: string;
@@ -16,7 +16,7 @@ export function useResourceManager<T extends { id: string }>(
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const { confirm, alert } = useUIStore();
+  const { confirm } = useUIStore();
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -52,12 +52,12 @@ export function useResourceManager<T extends { id: string }>(
           options.onSuccess?.("delete", id);
 } catch (e: unknown) {
            const message = e instanceof Error ? e.message : `Failed to delete ${resourceName}`;
-           alert({ title: "Error", message });
+           toast.error(message);
            options.onError?.("delete", e as Error);
         }
       },
     });
-  }, [options.endpoint, confirm, alert]);
+  }, [options.endpoint, confirm]);
 
   const create = useCallback(async (data: unknown) => {
     setError(null);

package/src/lib/vite-shim-plugin.ts

@@ -0,0 +1,100 @@
+import type { Plugin } from "vite";
+
+/**
+ * Vite plugin that intercepts `use-sync-external-store/shim` and
+ * `use-sync-external-store/shim/with-selector` imports and replaces them
+ * with proper ESM implementations.
+ *
+ * Why this is needed:
+ * - xstate-react (and other libs) import these shim files which are CJS-only.
+ * - When @kyro-cms/admin is consumed as a local `file:` workspace dependency,
+ *   Vite skips pre-bundling for its transitive deps entirely, so the raw CJS
+ *   files are served directly to the browser — which cannot parse them.
+ * - resolve.alias does not help because Vite's `resolveExportsOrImports` runs
+ *   before alias matching for deep sub-path imports.
+ * - optimizeDeps.include does not help because it only applies to external npm
+ *   packages, not transitive deps of local workspace packages.
+ * - A virtual Vite plugin with `enforce: "pre"` intercepts the import in the
+ *   very first step of the resolution pipeline, before the filesystem is touched.
+ *
+ * useSyncExternalStoreWithSelector is NOT in the React core package, so we
+ * provide a minimal, spec-compliant implementation using the native
+ * useSyncExternalStore hook from React 18+.
+ */
+export function useSyncExternalStoreShimPlugin(): Plugin {
+  const SHIM_ID = "\0virtual:use-sync-external-store-shim";
+  const SHIM_WITH_SELECTOR_ID =
+    "\0virtual:use-sync-external-store-shim-with-selector";
+
+  const SHIM_PATHS = new Set([
+    "use-sync-external-store/shim",
+    "use-sync-external-store/shim/index.js",
+  ]);
+
+  const SHIM_WITH_SELECTOR_PATHS = new Set([
+    "use-sync-external-store/shim/with-selector",
+    "use-sync-external-store/shim/with-selector.js",
+  ]);
+
+  return {
+    name: "use-sync-external-store-shim-fix",
+    enforce: "pre",
+
+    resolveId(id: string) {
+      if (SHIM_PATHS.has(id)) return SHIM_ID;
+      if (SHIM_WITH_SELECTOR_PATHS.has(id)) return SHIM_WITH_SELECTOR_ID;
+    },
+
+    load(id: string) {
+      if (id === SHIM_ID) {
+        // React 18+ ships useSyncExternalStore natively.
+        return `export { useSyncExternalStore } from "react";`;
+      }
+
+      if (id === SHIM_WITH_SELECTOR_ID) {
+        // useSyncExternalStoreWithSelector is not in React core.
+        // This is a minimal, spec-compliant implementation that wraps
+        // React's native useSyncExternalStore with selector memoisation.
+        return `
+import { useSyncExternalStore, useRef, useMemo } from "react";
+
+export function useSyncExternalStoreWithSelector(
+  subscribe,
+  getSnapshot,
+  getServerSnapshot,
+  selector,
+  isEqual
+) {
+  const memoRef = useRef(null);
+
+  const memoizedSelector = useMemo(() => {
+    let lastSnapshot = undefined;
+    let lastSelection = undefined;
+    let hasMemo = false;
+
+    return (snapshot) => {
+      if (!hasMemo || !Object.is(lastSnapshot, snapshot)) {
+        const nextSelection = selector(snapshot);
+        if (!hasMemo || !(isEqual ? isEqual(lastSelection, nextSelection) : Object.is(lastSelection, nextSelection))) {
+          lastSnapshot = snapshot;
+          lastSelection = nextSelection;
+          hasMemo = true;
+        }
+      }
+      return lastSelection;
+    };
+  }, [selector, isEqual]);
+
+  const getSelection = () => memoizedSelector(getSnapshot());
+  const getServerSelection =
+    getServerSnapshot !== undefined && getServerSnapshot !== null
+      ? () => memoizedSelector(getServerSnapshot())
+      : undefined;
+
+  return useSyncExternalStore(subscribe, getSelection, getServerSelection);
+}
+`;
+      }
+    },
+  };
+}

package/src/pages/[collection]/[id].astro

@@ -58,7 +58,7 @@ const description =
         data={doc || {}}
         collectionSlug={collection}
         documentId={id || undefined}
-        documentName={doc?.title || doc?.name || doc?.slug || "new-document"}
+        documentName={(typeof doc?.title === "object" ? "" : doc?.title) || (typeof doc?.name === "object" ? "" : doc?.name) || doc?.slug || "new-document"}
       />
       <input type="hidden" id="form-data" name="form-data" value="{}" />
     </form>

package/src/pages/preview/[collection]/[id].astro

@@ -36,12 +36,12 @@ if (id) {
   }
 }
 
-const title = doc
-  ? `Preview: ${doc.title || doc.name || doc.slug || id}`
+const pageTitle = doc
+  ? `Preview: ${(typeof doc.title === "object" ? "" : doc.title) || (typeof doc.name === "object" ? "" : doc.name) || doc.slug || id}`
   : "Preview";
 ---
 
-<AdminLayout title={title}>
+<AdminLayout title={pageTitle}>
   <Fragment set:html={`<style>${richTextStyles}</style>`} />
   <div class="flex-1 overflow-y-auto space-y-6">
     <div class="surface-tile p-6 flex items-center justify-between">
@@ -222,7 +222,7 @@ const title = doc
                     </pre>
                   )}
                   {(!field.type || ["text", "string"].includes(field.type)) && (
-                    <p>{value}</p>
+                    <p>{typeof value === "object" ? JSON.stringify(value) : value}</p>
                   )}
                 </div>
               </div>

package/src/pages/settings/[slug].astro

@@ -1,7 +1,7 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
 import { globals } from "../../lib/config";
-import { AutoForm } from "../../components/AutoForm";
+import { SettingsPage } from "../../components/SettingsPage";
 
 import { adminPath, apiPath } from "../../lib/paths";
 
@@ -112,7 +112,7 @@ const description =
       )}
       <form id="settings-form">
         <input type="hidden" id="form-slug" value={slug} />
-        <AutoForm
+        <SettingsPage
           client:only="react"
           config={config}
           globalSlug={slug}

package/src/styles/main.css

@@ -1078,6 +1078,35 @@
     color: var(--kyro-sidebar-active);
   }
 
+  /* Compact inline array mode */
+  .kyro-form-array--compact .kyro-form-field {
+    margin-bottom: 0 !important;
+  }
+  .kyro-form-array--compact .kyro-form-field > div > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 2px !important;
+  }
+  .kyro-form-array--compact label {
+    font-size: 9px;
+    letter-spacing: 0.08em;
+    margin-bottom: 0;
+    opacity: 0.6;
+    display: block;
+  }
+  .kyro-form-array--compact input:not([type="checkbox"]):not([type="radio"]),
+  .kyro-form-array--compact textarea,
+  .kyro-form-array--compact select {
+    padding: 3px 6px !important;
+    font-size: 11px !important;
+    min-height: 26px !important;
+    border-radius: 4px !important;
+  }
+  .kyro-form-array--compact label > span {
+    display: none;
+  }
+  .kyro-form-array--compact [class*="description"] {
+    display: none !important;
+  }
+
   /* Blocks field */
   .kyro-form-blocks {
     display: flex;
@@ -1364,14 +1393,14 @@
     color: var(--kyro-text-secondary);
   }
 
-  /* Toast — Glassmorphic Monochrome */
+  /* Toast — Colored Flat */
   .kyro-toasts-container {
     position: fixed;
-    bottom: 24px;
-    right: 24px;
+    bottom: 16px;
+    right: 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 6px;
     z-index: 9999;
     pointer-events: none;
   }
@@ -1379,82 +1408,59 @@
   .kyro-toast {
     display: flex;
     align-items: center;
-    gap: 12px;
-    min-width: 320px;
-    max-width: 420px;
-    padding: 12px;
-    background: rgba(11, 18, 34, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    gap: 8px;
+    min-width: 240px;
+    max-width: 340px;
+    padding: 8px 10px;
     color: white;
-    border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 20px 25px -5px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    box-shadow:
+      0 2px 4px -1px rgba(0, 0, 0, 0.08),
+      0 8px 16px -4px rgba(0, 0, 0, 0.15),
+      0 16px 24px -8px rgba(0, 0, 0, 0.2);
     pointer-events: auto;
-    overflow: hidden;
     position: relative;
+    transition: box-shadow 0.2s ease;
   }
 
-  .dark .kyro-toast {
-    background: rgba(5, 9, 18, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  }
-
-  .kyro-toast-accent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background: var(--kyro-primary);
-  }
-
-  .kyro-toast-success .kyro-toast-accent { background: #10b981; }
-  .kyro-toast-error .kyro-toast-accent { background: #ef4444; }
-  .kyro-toast-warning .kyro-toast-accent { background: #f59e0b; }
-  .kyro-toast-info .kyro-toast-accent { background: #3b82f6; }
+  .kyro-toast-success { background: #16a34a; }
+  .kyro-toast-error { background: #dc2626; }
+  .kyro-toast-warning { background: #d97706; }
+  .kyro-toast-info { background: #4f46e5; }
 
   .kyro-toast-icon-container {
     flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.05);
+    width: 20px;
+    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.9);
+    color: rgba(255, 255, 255, 0.85);
   }
 
-  .kyro-toast-success .kyro-toast-icon-container { color: #10b981; background: rgba(16, 185, 129, 0.1); }
-  .kyro-toast-error .kyro-toast-icon-container { color: #f87171; background: rgba(239, 68, 68, 0.1); }
-  .kyro-toast-warning .kyro-toast-icon-container { color: #fbbf24; background: rgba(245, 158, 11, 0.1); }
-  .kyro-toast-info .kyro-toast-icon-container { color: #60a5fa; background: rgba(59, 130, 246, 0.1); }
-
   .kyro-toast-content {
     flex: 1;
     min-width: 0;
   }
 
   .kyro-toast-message {
-    font-size: 13px;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 500;
     letter-spacing: -0.01em;
-    color: rgba(255, 255, 255, 0.9);
-    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.92);
+    line-height: 1.3;
   }
 
   .kyro-toast-close {
-    padding: 6px;
-    border-radius: 8px;
-    color: rgba(255, 255, 255, 0.4);
-    transition: all 0.2s ease;
+    padding: 3px;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.35);
+    transition: all 0.15s ease;
+    flex-shrink: 0;
   }
 
   .kyro-toast-close:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.15);
     color: white;
   }
 

package/README.md

@@ -1,46 +0,0 @@
-# Kyro Admin MVP Extensibility
-
-This repository contains a minimal, upgrade-safe extension surface for @kyro-cms/admin.
-
-- Exposed modules: theme, hooks, plugins, blocks, fields, and the Astro integration (kyroAdmin).
-- MVP samples are included for quick experimentation:
-  - MVP Hook samples: sampleHook, sampleHook2
-  - MVP Block samples: sampleBlock, sampleBlock2
-  - MVP Field samples: sampleField, sampleField2
-  - MVP Plugin sample: samplePlugin
-
-How to try locally
-
-- Build:
-  - Run: bun install
-  - Run: bun run build
-  - Dist artifacts will be emitted in admin/dist
-- Test:
-  - Run: bun run test
-  - Tests cover MVP hooks; additional MVP tests can be added later
-
-Usage notes
-
-- kyroAdmin() is available from @kyro-cms/admin/integration and can be wired into Astro config
-- MVP samples are designed to be initial templates for plugin authors; replace or extend with real logic
-
-Next steps
-
-- Decide on final API shape (per-feature exports vs central namespace)
-- Add more MVP samples for blocks/fields/plugins and write accompanying tests
-- Add documentation explaining how to author plugins and blocks
-- MVP samples are included for quick experimentation:
-  - MVP Hook samples: sampleHook, sampleHook2
-  - MVP Block samples: sampleBlock, sampleBlock2
-  - MVP Field samples: sampleField, sampleField2
-  - MVP Plugin sample: samplePlugin
-
-Export surface (MVP)
-
-- The MVP exports are available per module:
-  - @kyro-cms/admin/hooks -> sampleHook, sampleHook2 (and lifecycle/data hooks)
-  - @kyro-cms/admin/blocks -> sampleBlock, sampleBlock2 (and registry)
-  - @kyro-cms/admin/fields -> sampleField, sampleField2 (and registry)
-  - @kyro-cms/admin/plugins -> samplePlugin, samplePlugin2 (and registry)
-- The main integration (kyroAdmin) is available via @kyro-cms/admin/integration
-- The theme module is available via @kyro-cms/admin/theme