@kyro-cms/admin 0.9.0 → 0.9.2

package/src/integration.ts

@@ -1,10 +1,14 @@
 import type { AstroIntegration } from "astro";
 import path from "path";
 import fs from "fs";
-import { execSync } from "child_process";
 import { pathToFileURL } from "url";
+import { build } from "esbuild";
 import { config as loadDotEnv } from "dotenv";
-import { transform } from "esbuild";
+import { Worker } from "worker_threads";
+
+const _shimDir = path.resolve(new URL(".", import.meta.url).pathname, "lib/shim");
+const _shimUses = path.join(_shimDir, "use-sync-external-store.js");
+const _shimUsesWs = path.join(_shimDir, "use-sync-external-store-with-selector.js");
 
 export interface KyroAdminOptions {
   basePath?: string;
@@ -46,81 +50,178 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           logger.warn(`Config file not found. Using defaults.`);
         }
 
-        // Load the user's config and expose it globally so that
-        // admin lib modules (config.ts, globals.ts) can access it
-        // without needing the kyro:config Vite alias during config loading.
-        // Load .env first since Vite hasn't processed it yet at this point
-        // in the lifecycle, and the config module evaluates eagerly.
-        // Use esbuild to transpile TS to ESM, then evaluate in a child
-        // process to completely bypass Vite's module runner interception.
+        // Transpile the user's config and write a serialized JSON copy.
+        // The JSON path is injected via Vite's define so the admin can read it reliably.
+        const configFile = path.join(path.dirname(resolvedConfig), ".kyro-admin-config.json");
         let tmpFile = "";
         try {
           const envPath = path.join(path.dirname(resolvedConfig), ".env");
           if (fs.existsSync(envPath)) {
             loadDotEnv({ path: envPath });
           }
-          const configContent = fs.readFileSync(resolvedConfig, "utf8");
-          const result = await transform(configContent, {
-            loader: "ts",
+          const result = await build({
+            entryPoints: [resolvedConfig],
+            bundle: true,
             format: "esm",
+            platform: "node",
             target: "es2022",
+            write: false,
             sourcemap: false,
+            loader: { '.ts': 'ts', '.tsx': 'tsx' },
+            resolveExtensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.json'],
+            external: ['@kyro-cms/*'],
           });
-          // Write transpiled config alongside original so Node.js can
-          // resolve @kyro-cms/core from the project's node_modules
           tmpFile = resolvedConfig.replace(/\.ts$/, ".admin.mjs");
-          fs.writeFileSync(tmpFile, result.code, "utf8");
-          // Evaluate in a child process to bypass Vite's module runner.
-          // Write a wrapper entrypoint that imports the config and prints JSON,
-          // then execute it with tsx (handles .ts resolution from .js imports).
-          const entryFile = tmpFile.replace(/\.admin\.mjs$/, ".admin-entry.mjs");
-          const resultFile = tmpFile.replace(/\.admin\.mjs$/, ".admin-result.json");
-          fs.writeFileSync(entryFile, `
-            import cfg from './${path.basename(tmpFile)}';
-            import fs from 'fs';
-            const data = { collections: cfg.default?.collections || cfg?.collections || [], globals: cfg.default?.globals || cfg?.globals || [] };
-            fs.writeFileSync('${path.basename(resultFile)}', JSON.stringify(data));
-          `, "utf8");
-          execSync(
-            `npx tsx "${entryFile}"`,
-            { cwd: path.dirname(resolvedConfig), encoding: "utf8", timeout: 15000, stdio: "pipe" },
-          );
-          const resultContent = fs.readFileSync(resultFile, "utf8");
-          const configModule = JSON.parse(resultContent);
-          try { fs.unlinkSync(resultFile); } catch {}
-          if (configModule.error) {
-            throw new Error(configModule.error);
+          fs.writeFileSync(tmpFile, result.outputFiles[0].text, "utf8");
+
+          // Use a Worker thread to load the config in an isolated context.
+          const workerCode = `
+            import { parentPort } from 'worker_threads';
+            import('${pathToFileURL(tmpFile).href}').then(mod => {
+              const cfg = mod.default || mod;
+              const serialize = (obj) => {
+                if (obj === null || obj === undefined) return obj;
+                if (typeof obj === 'function') return undefined;
+                if (Array.isArray(obj)) return obj.map(serialize);
+                if (typeof obj === 'object') {
+                  const result = {};
+                  for (const [k, v] of Object.entries(obj)) {
+                    const sv = serialize(v);
+                    if (sv !== undefined) result[k] = sv;
+                  }
+                  return result;
+                }
+                return obj;
+              };
+              parentPort.postMessage({
+                collections: serialize(cfg?.collections) || [],
+                globals: serialize(cfg?.globals) || [],
+                collectionOverrides: serialize(cfg?.admin?.collectionOverrides) || {},
+              });
+            }).catch(err => {
+              parentPort.postMessage({ error: err.message });
+            });
+          `;
+          const worker = new Worker(workerCode, { eval: true, env: { ...process.env, NODE_OPTIONS: '' } });
+          const configResult = await new Promise<any>((resolve, reject) => {
+            worker.on("message", resolve);
+            worker.on("error", reject);
+            const timer = setTimeout(() => {
+              worker.terminate();
+              reject(new Error("Config loading timed out"));
+            }, 30000);
+          });
+          worker.terminate();
+
+          if (configResult.error) {
+            throw new Error(configResult.error);
           }
-          (globalThis as any).__KYRO_ADMIN_PROJECT_CONFIG__ = {
-            collections: configModule.collections,
-            globals: configModule.globals,
-            adapter: configModule.adapter || null,
-          };
+          fs.writeFileSync(configFile, JSON.stringify(configResult, null, 2), "utf8");
           logger.info("Project config loaded for admin");
         } catch (e: any) {
-          logger.warn(`Could not load project config: ${e.message}`);
+          logger.error(`Could not load project config: ${e.message}`);
         } finally {
-          for (const suffix of [".admin.mjs", ".admin-entry.mjs", ".admin-result.json"]) {
-            const f = resolvedConfig.replace(/\.ts$/, suffix);
-            if (fs.existsSync(f)) { try { fs.unlinkSync(f); } catch { /* ignore */ } }
-          }
+          if (tmpFile && fs.existsSync(tmpFile)) { try { fs.unlinkSync(tmpFile); } catch { /* ignore */ } }
         }
 
-        // Set up Vite aliases and defines for runtime use
+        // Set up Vite aliases, defines, and plugins for runtime use
         updateConfig({
           vite: {
+            plugins: [
+              {
+                name: "kyro-admin-tsx-loader",
+                enforce: "pre" as const,
+                config(_config: any) {
+                  const existingEsbuild = _config.esbuild;
+                  const existingExclude = existingEsbuild?.exclude;
+                  const adminInclude = /\/node_modules\/(?!.*@kyro-cms\/(admin|core))/;
+                  return {
+                    esbuild: {
+                      ...(existingEsbuild || {}),
+                      exclude: existingExclude
+                        ? Array.isArray(existingExclude)
+                          ? [...existingExclude, adminInclude]
+                          : [existingExclude, adminInclude]
+                        : adminInclude,
+                    },
+                  };
+                },
+              },
+              {
+                name: "kyro-cjs-shim",
+                enforce: "pre" as const,
+                resolveId(id: string) {
+                  if (id.includes('react/compiler-runtime')) {
+                    return "\0react-compiler-runtime";
+                  }
+                  if (id === 'debug' || id.includes('debug/src/browser.js')) {
+                    return "\0debug-browser";
+                  }
+                },
+                load(id: string) {
+                  if (id === "\0react-compiler-runtime") {
+                    return `
+import React from "react";
+export function c(size) {
+  const internals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  if (!internals || !internals.H) {
+    return new Array(size);
+  }
+  return internals.H.useMemoCache(size);
+}
+`;
+                  }
+                  if (id === "\0debug-browser") {
+                    return `
+function debug(namespace) {
+  function d(...args) {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("DEBUG")) {
+      console.log(namespace, ...args);
+    }
+  }
+  d.enabled = false;
+  return d;
+}
+debug.enable = function() {};
+debug.disable = function() {};
+debug.enabled = function() { return false; };
+export default debug;
+`;
+                  }
+                },
+              },
+            ],
             resolve: {
               alias: {
                 "kyro:config": resolvedConfig,
               },
             },
+            optimizeDeps: {
+              include: [
+                'use-sync-external-store',
+              ],
+              exclude: ['debug', 'react/compiler-runtime'],
+            },
             define: {
               __KYRO_ADMIN_PATH__: JSON.stringify(basePath),
               __KYRO_API_PATH__: JSON.stringify(apiPath),
+              __KYRO_ADMIN_CONFIG_FILE__: JSON.stringify(configFile),
+            },
+            ssr: {
+              noExternal: ['@kyro-cms/admin', '@kyro-cms/core'],
             },
           },
         });
 
+        // Load the user's config at runtime via the kyro:config alias.
+        // We set a placeholder here; the actual config is loaded by
+        // admin/lib/config.ts via dynamic import of kyro:config.
+        (globalThis as any).__KYRO_ADMIN_PROJECT_CONFIG__ = {
+          collections: [],
+          globals: [],
+          adapter: null,
+        };
+
         // Inject Admin UI Routes
         const pages = [
           { pattern: "", entrypoint: "./pages/index.astro" },
@@ -128,6 +229,7 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           { pattern: "/register", entrypoint: "./pages/auth/register.astro" },
           { pattern: "/media", entrypoint: "./pages/media.astro" },
           { pattern: "/users", entrypoint: "./pages/users/index.astro" },
+          { pattern: "/users/new", entrypoint: "./pages/users/new.astro" },
           { pattern: "/users/[id]", entrypoint: "./pages/users/[id].astro" },
           { pattern: "/roles", entrypoint: "./pages/roles/index.astro" },
           { pattern: "/settings", entrypoint: "./pages/settings/index.astro" },

package/src/kyro-cms.d.ts

@@ -57,7 +57,7 @@ admin?: {
   export interface SelectField extends FieldConfig { type: 'select'; options?: { label: string; value: string | number }[] }
   export interface TextareaField extends FieldConfig { type: 'textarea' }
   export interface MarkdownField extends FieldConfig { type: 'markdown' }
-  export interface RichTextField extends FieldConfig { type: 'richText' }
+  export interface RichTextField extends FieldConfig { type: 'richtext' }
   export interface CodeField extends FieldConfig { type: 'code'; language?: string }
   export interface JSONField extends FieldConfig { type: 'json' }
   export interface ImageField extends FieldConfig { type: 'image' }
@@ -208,4 +208,9 @@ declare module 'kyro:config' {
   import type { KyroConfig } from '@kyro-cms/core';
   const config: KyroConfig;
   export default config;
-}
+}
+
+// Injected by Vite's define config during admin integration setup
+declare const __KYRO_ADMIN_CONFIG_FILE__: string;
+declare const __KYRO_ADMIN_PATH__: string;
+declare const __KYRO_API_PATH__: string;

package/src/layouts/AdminLayout.astro

@@ -7,7 +7,7 @@ import { adminPath, apiPath } from "../lib/paths";
 import { AuthBridge } from "../components/AuthBridge";
 import { GlobalModal } from "../components/ui/GlobalModal";
 import { Toaster } from "../components/ui/Toaster";
-import { getSiteSettings } from "../lib/globals";
+import { getSiteSettings, getGlobal } from "../lib/globals";
 
 interface Props {
   title: string;
@@ -15,8 +15,25 @@ interface Props {
 
 const { title } = Astro.props;
 const siteSettings = await getSiteSettings({ request: Astro.request });
+const seoSettings = await getGlobal("seo-settings", { request: Astro.request });
+
 const siteName = siteSettings?.siteName || "Kyro CMS";
 const siteFavicon = siteSettings?.siteFavicon;
+const siteDescription = siteSettings?.siteDescription || "";
+
+// SEO Logic
+const seoMode = seoSettings?.seoMode || "simple";
+const includeSiteName = seoSettings?.siteNameInTitle ?? true;
+const titleSeparator = seoSettings?.separator || " - ";
+const defaultTitle = seoSettings?.defaultTitle || title;
+const defaultDescription = seoSettings?.defaultDescription || siteDescription;
+const canonicalUrl = seoMode === "advanced" ? seoSettings?.meta?.canonicalUrl : "";
+const robots = seoMode === "advanced" && seoSettings?.meta?.robots ? seoSettings.meta.robots : "noindex, nofollow";
+
+let displayTitle = title === "Dashboard" && defaultTitle !== "Dashboard" ? defaultTitle : title;
+if (includeSiteName) {
+  displayTitle = `${displayTitle}${titleSeparator}${siteName}`;
+}
 ---
 
 <!doctype html>
@@ -24,7 +41,10 @@ const siteFavicon = siteSettings?.siteFavicon;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{title} - {siteName}</title>
+    <title>{displayTitle}</title>
+    {defaultDescription && <meta name="description" content={defaultDescription} />}
+    {robots && <meta name="robots" content={robots} />}
+    {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
     <link
       rel="icon"
       type={siteFavicon?.mimeType || "image/svg+xml"}

package/src/layouts/AuthLayout.astro

@@ -1,12 +1,37 @@
 ---
 import "../styles/main.css";
 import { adminPath, apiPath } from "../lib/paths";
+import { getSiteSettings, getGlobal } from "../lib/globals";
 
 interface Props {
   title: string;
 }
 
 const { title } = Astro.props;
+const siteSettings = await getSiteSettings({ request: Astro.request });
+const seoSettings = await getGlobal("seo-settings", { request: Astro.request });
+
+const siteName = siteSettings?.siteName || "Kyro CMS";
+const siteFavicon = siteSettings?.siteFavicon;
+const siteLogo = siteSettings?.siteLogo;
+const logoWidth = siteSettings?.logo?.width;
+const logoHeight = siteSettings?.logo?.height;
+const logoAlt = siteSettings?.logo?.altText || siteName;
+const siteDescription = siteSettings?.siteDescription || "";
+
+// SEO Logic
+const seoMode = seoSettings?.seoMode || "simple";
+const includeSiteName = seoSettings?.siteNameInTitle ?? true;
+const titleSeparator = seoSettings?.separator || " - ";
+const defaultTitle = seoSettings?.defaultTitle || title;
+const defaultDescription = seoSettings?.defaultDescription || siteDescription;
+const canonicalUrl = seoMode === "advanced" ? seoSettings?.meta?.canonicalUrl : "";
+const robots = seoMode === "advanced" && seoSettings?.meta?.robots ? seoSettings.meta.robots : "noindex, nofollow";
+
+let displayTitle = title === "Login" && defaultTitle !== "Login" ? defaultTitle : title;
+if (includeSiteName) {
+  displayTitle = `${displayTitle}${titleSeparator}${siteName}`;
+}
 ---
 
 <!doctype html>
@@ -14,8 +39,15 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{title} - Kyro CMS</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{displayTitle}</title>
+    {defaultDescription && <meta name="description" content={defaultDescription} />}
+    {robots && <meta name="robots" content={robots} />}
+    {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+    <link
+      rel="icon"
+      type={siteFavicon?.mimeType || "image/svg+xml"}
+      href={siteFavicon?.url || "/favicon.svg"}
+    />
     <script is:inline define:vars={{ adminPath, apiPath }}>
       (async () => {
         try {
@@ -49,11 +81,39 @@ const { title } = Astro.props;
       <div class="w-full max-w-md flex flex-col items-center">
         <!-- Logo -->
         <div class="w-full text-center mb-8">
-          <a href="/" class="inline-block">
-            <span
-              class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-              >KYRO.</span
-            >
+          <a href="/" class="inline-flex items-center justify-center gap-2">
+            {
+              siteLogo ? (
+                <img
+                  src={siteLogo.url}
+                  alt={logoAlt}
+                  style={{
+                    width: logoWidth ? `${logoWidth}px` : "auto",
+                    height: logoHeight ? `${logoHeight}px` : "40px",
+                    objectFit: "contain",
+                  }}
+                  class="rounded-lg"
+                />
+              ) : (
+                <>
+                  <svg class="w-7 h-7 text-[var(--kyro-text-primary)]" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                      <mask id="kyro-cutout-auth">
+                        <rect width="100" height="100" fill="white" />
+                        <path d="M 40 89.72 L 40 40 L 89.72 40 A 45 45 0 0 1 40 89.72 Z" stroke="black" stroke-width="8" fill="none" />
+                      </mask>
+                    </defs>
+                    <g mask="url(#kyro-cutout-auth)" fill="currentColor">
+                      <circle cx="45" cy="45" r="45" />
+                      <rect x="40" y="40" width="60" height="60" />
+                    </g>
+                  </svg>
+                  <span class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+                    {siteName}
+                  </span>
+                </>
+              )
+            }
           </a>
         </div>