@kyro-cms/admin 0.2.4 → 0.3.0

package/src/pages/api/[collection]/index.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../lib/dataStore";
-import { collections } from "../../../../lib/config";
+import { dataStore } from "../../../lib/dataStore";
+import { collections } from "../../../lib/config";
 import { getAuthAdapter } from "../../../lib/db";
 
 dataStore.initialize(collections);

package/src/pages/api/collections.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { collections } from "../../../lib/config";
+import { collections } from "../../lib/config";
 
 export const GET: APIRoute = async () => {
   try {

package/src/pages/api/globals/[slug].ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../../lib/dataStore";
-import { globals } from "../../../../lib/config";
+import { dataStore } from "../../../lib/dataStore";
+import { globals } from "../../../lib/config";
 
 export const GET: APIRoute = async ({ params }) => {
   const slug = params.slug as string;

package/src/pages/api/graphql.ts

@@ -1,7 +1,7 @@
 import type { APIRoute } from "astro";
-import { executeGraphQL } from "../../../lib/graphql/schema";
-import { dataStore } from "../../../lib/dataStore";
-import { collections } from "../../../lib/config";
+import { executeGraphQL } from "../../lib/graphql/schema";
+import { dataStore } from "../../lib/dataStore";
+import { collections } from "../../lib/config";
 
 dataStore.initialize(collections);
 

package/src/pages/api/media/folders.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
 import fs from "fs/promises";
-import { getStorageConfig } from "../../../../lib/storage";
+import { getStorageConfig } from "../../../lib/storage";
 import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
 
 function isCloudProvider(provider: string): boolean {

package/src/pages/api/media/index.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
 import { getMediaService, type MediaItem } from "../../../lib/MediaService";
-import { constructMediaUrl, getStorageConfig } from "../../../../lib/storage";
+import { constructMediaUrl, getStorageConfig } from "../../../lib/storage";
 
 export const GET: APIRoute = async ({ url }) => {
   let mediaService: any = null;

package/src/pages/api/media/resize.ts

@@ -5,7 +5,7 @@ import fs from "fs/promises";
 import fsSync from "fs";
 import https from "https";
 import { createHash } from "crypto";
-import { getStorageConfig } from "../../../../lib/storage";
+import { getStorageConfig } from "../../../lib/storage";
 
 // Cache configuration
 const CACHE_BASE = path.join(process.cwd(), ".cache", "kyro-media", "resize");

package/src/pages/api/slug-availability.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
-import { dataStore } from "../../../lib/dataStore";
-import { collections } from "../../../lib/config";
+import { dataStore } from "../../lib/dataStore";
+import { collections } from "../../lib/config";
 
 dataStore.initialize(collections);
 

package/src/pages/api/storage-config.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { getStorageConfig } from "../../../lib/storage";
+import { getStorageConfig } from "../../lib/storage";
 
 export const GET: APIRoute = async () => {
   try {

package/src/pages/api/storage-status.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { getDatabaseConfig } from "../../../lib/db";
+import { getDatabaseConfig } from "../../lib/db";
 
 interface RawStorageSettings {
   provider?: string;

package/src/pages/api/upload.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
 import { MediaService, type Dialect } from "@kyro-cms/core";
-import { getDatabaseConfig, runMigrations } from "../../../lib/db";
+import { getDatabaseConfig, runMigrations } from "../../lib/db";
 
 const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
 

package/src/plugins/examples/sample-plugin-2.ts

@@ -0,0 +1,21 @@
+import type { KyroPlugin } from "../types.js";
+import { registerPlugin } from "../registry.js";
+
+// Second MVP plugin demonstrating beforeDeploy hook usage
+const samplePlugin2: KyroPlugin = {
+  name: "sample-plugin-2",
+  version: "0.1.0",
+  description: "Second MVP plugin demonstrating beforeDeploy hook",
+  hooks: {
+    beforeDeploy: (ctx) => {
+      // Lightweight side-effect; in real plugins, you could validate config, migrations, etc.
+      void ctx;
+      console.log("[Kyro Admin] sample-plugin-2 beforeDeploy");
+      return { success: true };
+    },
+  },
+};
+
+registerPlugin(samplePlugin2);
+
+export default samplePlugin2;

package/src/plugins/examples/sample-plugin.ts

@@ -0,0 +1,21 @@
+import type { KyroPlugin } from "../types.js";
+import { registerPlugin } from "../registry.js";
+
+// Simple MVP plugin demonstrating registration and an onAdminReady hook
+const samplePlugin: KyroPlugin = {
+  name: "sample-plugin",
+  version: "0.1.0",
+  description: "A tiny sample plugin to demonstrate the extensibility surface",
+  hooks: {
+    onAdminReady: () => {
+      // Lightweight side-effect; in real plugins this could mount UI or register editors
+      // eslint-disable-next-line no-console
+      console.log("[ Kyro Admin ] sample-plugin: onAdminReady executed");
+      return;
+    },
+  },
+};
+
+registerPlugin(samplePlugin);
+
+export default samplePlugin;

package/src/plugins/index.ts

@@ -0,0 +1,10 @@
+export {
+  registerPlugin,
+  unregisterPlugin,
+  getPlugin,
+  getPlugins,
+  getPluginsWithHook,
+} from "./registry.ts";
+export type { KyroPlugin } from "./types.ts";
+export { default as samplePlugin } from "./examples/sample-plugin";
+export { default as samplePlugin2 } from "./examples/sample-plugin-2.ts";

package/src/plugins/registry.ts

@@ -0,0 +1,36 @@
+import type { KyroPlugin } from "./types.ts";
+
+const plugins: Map<string, KyroPlugin> = new Map();
+
+export function registerPlugin(plugin: KyroPlugin): void {
+  if (!plugin.name || typeof plugin.name !== "string") {
+    throw new Error("Plugin must have a valid name");
+  }
+  if (plugins.has(plugin.name)) {
+    console.warn(`Plugin "${plugin.name}" is already registered. Overwriting.`);
+  }
+  plugins.set(plugin.name, plugin);
+  if (plugin.apply) {
+    plugin.apply({});
+  }
+}
+
+export function unregisterPlugin(name: string): void {
+  plugins.delete(name);
+}
+
+export function getPlugin(name: string): KyroPlugin | undefined {
+  return plugins.get(name);
+}
+
+export function getPlugins(): KyroPlugin[] {
+  return Array.from(plugins.values());
+}
+
+export function getPluginsWithHook<
+  K extends keyof NonNullable<KyroPlugin["hooks"]>,
+>(hookName: K): KyroPlugin[] {
+  return Array.from(plugins.values()).filter(
+    (p) => p.hooks && typeof p.hooks[hookName] === "function",
+  );
+}

package/src/plugins/types.ts

@@ -0,0 +1,22 @@
+import type { AdminContext, HookResult } from "../hooks/types.js";
+
+export interface KyroPlugin {
+  name: string;
+  version: string;
+  description?: string;
+  apply?: (config: Record<string, unknown>) => void;
+  hooks?: {
+    onAdminReady?: (
+      ctx: AdminContext,
+    ) => void | HookResult | Promise<void | HookResult>;
+    beforeDeploy?: (
+      ctx: AdminContext,
+    ) => void | HookResult | Promise<void | HookResult>;
+    afterDeploy?: (
+      ctx: AdminContext,
+      result: HookResult,
+    ) => void | Promise<void>;
+    beforeRender?: (ctx: AdminContext) => void;
+    afterRender?: (ctx: AdminContext) => void;
+  };
+}

package/src/styles/main.css

@@ -1,48 +1,9 @@
 @import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");
 @custom-variant dark (&:where(.dark, .dark *));
 
 @source "../../src/**/*.{astro,html,js,jsx,ts,tsx}";
 
-@font-face {
-  font-family: "Serotiva Sans";
-  src: url("/fonts/Serotiva-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Serotiva Sans";
-  src: url("/fonts/Serotiva-Medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Serotiva Sans";
-  src: url("/fonts/Serotiva-SemiBold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Serotiva Sans";
-  src: url("/fonts/Serotiva-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Serotiva Sans";
-  src: url("/fonts/Serotiva-Black.woff2") format("woff2");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
 :root {
   /* Monochrome Palette */
   --kyro-black: #0b1222;
@@ -165,7 +126,7 @@
 }
 
 @theme {
-  --font-sans: "Serotiva Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 
   --color-primary: var(--kyro-black);
   --color-primary-hover: var(--kyro-black-hover);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,238 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import type { KyroTheme } from "./tokens.js";
+import { LIGHT_THEME, DARK_THEME, mergeThemes } from "./tokens.js";
+
+export type ThemeMode = "light" | "dark" | "system";
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  theme: KyroTheme;
+  lightTheme: KyroTheme;
+  darkTheme: KyroTheme;
+  setMode: (mode: ThemeMode) => void;
+  updateTheme: (overrides: Partial<KyroTheme>) => void;
+  getCssVar: (key: string) => string;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    return {
+      mode: "light" as ThemeMode,
+      theme: LIGHT_THEME,
+      lightTheme: LIGHT_THEME,
+      darkTheme: DARK_THEME,
+      setMode: () => {},
+      updateTheme: () => {},
+      getCssVar: (key: string) => `var(--kyro-${key})`,
+    };
+  }
+  return context;
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultMode?: ThemeMode;
+  light?: Partial<KyroTheme>;
+  dark?: Partial<KyroTheme>;
+}
+
+function applyThemeToDOM(config: KyroTheme) {
+  const root = document.documentElement;
+  if (!root) return;
+
+  // Apply colors
+  if (config.colors) {
+    Object.entries(config.colors).forEach(([key, value]) => {
+      if (value) {
+        root.style.setProperty(`--kyro-${key}`, value);
+        root.style.setProperty(
+          `--kyro-${key}-light`,
+          adjustBrightness(value, 0.9),
+        );
+        root.style.setProperty(
+          `--kyro-${key}-dark`,
+          adjustBrightness(value, 0.8),
+        );
+      }
+    });
+  }
+
+  // Apply typography
+  if (config.typography) {
+    if (config.typography.fontFamily) {
+      root.style.setProperty(
+        "--kyro-font-family",
+        config.typography.fontFamily,
+      );
+    }
+    if (config.typography.fontFamilyMono) {
+      root.style.setProperty(
+        "--kyro-font-mono",
+        config.typography.fontFamilyMono,
+      );
+    }
+  }
+
+  // Apply spacing
+  if (config.spacing) {
+    Object.entries(config.spacing).forEach(([key, value]) => {
+      if (value) root.style.setProperty(`--kyro-spacing-${key}`, value);
+    });
+  }
+
+  // Apply border radius
+  if (config.borderRadius) {
+    Object.entries(config.borderRadius).forEach(([key, value]) => {
+      if (value) root.style.setProperty(`--kyro-radius-${key}`, value);
+    });
+  }
+
+  // Apply shadows
+  if (config.shadows) {
+    Object.entries(config.shadows).forEach(([key, value]) => {
+      if (value) root.style.setProperty(`--kyro-shadow-${key}`, value);
+    });
+  }
+
+  // Apply block theme overrides
+  if (config.blocks) {
+    if (config.blocks.card) {
+      Object.entries(config.blocks.card).forEach(([key, value]) => {
+        if (value) root.style.setProperty(`--kyro-block-card-${key}`, value);
+      });
+    }
+    if (config.blocks.hero?.background) {
+      root.style.setProperty(
+        "--kyro-block-hero-bg",
+        config.blocks.hero.background,
+      );
+    }
+    if (config.blocks.code) {
+      Object.entries(config.blocks.code).forEach(([key, value]) => {
+        if (value) root.style.setProperty(`--kyro-block-code-${key}`, value);
+      });
+    }
+  }
+
+  // Apply field theme overrides
+  if (config.fields) {
+    if (config.fields.input) {
+      Object.entries(config.fields.input).forEach(([key, value]) => {
+        if (value) root.style.setProperty(`--kyro-field-input-${key}`, value);
+      });
+    }
+    if (config.fields.upload) {
+      if (config.fields.upload.dropzoneBackground) {
+        root.style.setProperty(
+          "--kyro-field-upload-dropzone-bg",
+          config.fields.upload.dropzoneBackground,
+        );
+      }
+    }
+  }
+}
+
+function adjustBrightness(hex: string, factor: number): string {
+  if (!hex.startsWith("#")) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const adjust = (c: number) =>
+    Math.round(c * factor)
+      .toString(16)
+      .padStart(2, "0");
+  return `#${adjust(r)}${adjust(g)}${adjust(b)}`;
+}
+
+export function ThemeProvider({
+  children,
+  defaultMode = "light",
+  light: lightOverrides,
+  dark: darkOverrides,
+}: ThemeProviderProps) {
+  const [mode, setMode] = useState<ThemeMode>(defaultMode);
+  const [baseLight, setBaseLight] = useState<Partial<KyroTheme>>(
+    lightOverrides || {},
+  );
+  const [baseDark, setBaseDark] = useState<Partial<KyroTheme>>(
+    darkOverrides || {},
+  );
+
+  const lightTheme = mergeThemes(LIGHT_THEME, baseLight);
+  const darkTheme = mergeThemes(DARK_THEME, baseDark);
+
+  const getResolvedTheme = useCallback((): KyroTheme => {
+    if (mode === "system") {
+      if (typeof window !== "undefined") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? darkTheme
+          : lightTheme;
+      }
+      return lightTheme;
+    }
+    return mode === "dark" ? darkTheme : lightTheme;
+  }, [mode, lightTheme, darkTheme]);
+
+  const [theme, setTheme] = useState<KyroTheme>(getResolvedTheme());
+
+  // Apply theme on mode/customization change
+  useEffect(() => {
+    const resolved = getResolvedTheme();
+    setTheme(resolved);
+    applyThemeToDOM(resolved);
+  }, [getResolvedTheme]);
+
+  // Handle system theme changes
+  useEffect(() => {
+    if (mode !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const resolved = getResolvedTheme();
+      setTheme(resolved);
+      applyThemeToDOM(resolved);
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [mode, getResolvedTheme]);
+
+  const updateTheme = useCallback((overrides: Partial<KyroTheme>) => {
+    setBaseLight((prev) => ({ ...prev, ...overrides }));
+    setBaseDark((prev) => ({ ...prev, ...overrides }));
+  }, []);
+
+  const getCssVar = useCallback((key: string) => `var(--kyro-${key})`, []);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        mode,
+        theme,
+        lightTheme,
+        darkTheme,
+        setMode,
+        updateTheme,
+        getCssVar,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const LightThemeProvider = (
+  props: Omit<ThemeProviderProps, "defaultMode">,
+) => <ThemeProvider defaultMode="light" {...props} />;
+
+export const DarkThemeProvider = (
+  props: Omit<ThemeProviderProps, "defaultMode">,
+) => <ThemeProvider defaultMode="dark" {...props} />;

package/src/theme/index.ts

@@ -0,0 +1,20 @@
+export {
+  ThemeProvider,
+  LightThemeProvider,
+  DarkThemeProvider,
+  useTheme,
+} from "./ThemeProvider.tsx";
+export type { ThemeMode } from "./ThemeProvider.tsx";
+export {
+  LIGHT_THEME,
+  DARK_THEME,
+  mergeThemes,
+  type KyroTheme,
+  type ThemeColors,
+  type ThemeTypography,
+  type ThemeSpacing,
+  type ThemeRadius,
+  type ThemeShadows,
+  type BlockThemeOverrides,
+  type FieldThemeOverrides,
+} from "./tokens.ts";