@kyro-cms/admin 0.2.10 → 0.3.1

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/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";

package/src/theme/tokens.ts

@@ -0,0 +1,222 @@
+export interface ThemeColors {
+  primary?: string;
+  secondary?: string;
+  background?: string;
+  surface?: string;
+  text?: string;
+  textMuted?: string;
+  border?: string;
+  success?: string;
+  error?: string;
+  warning?: string;
+  info?: string;
+}
+
+export interface ThemeTypography {
+  fontFamily?: string;
+  fontFamilyMono?: string;
+  fontSize?: {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    "2xl"?: string;
+    "3xl"?: string;
+    "4xl"?: string;
+  };
+  fontWeight?: {
+    normal?: number;
+    medium?: number;
+    semibold?: number;
+    bold?: number;
+  };
+}
+
+export interface ThemeSpacing {
+  xs?: string;
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+  "2xl"?: string;
+}
+
+export interface ThemeRadius {
+  sm?: string;
+  md?: string;
+  lg?: string;
+  full?: string;
+}
+
+export interface ThemeShadows {
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+}
+
+export interface BlockThemeOverrides {
+  card?: {
+    background?: string;
+    borderRadius?: string;
+    padding?: string;
+    shadow?: string;
+  };
+  hero?: {
+    background?: string;
+    textAlign?: "left" | "center" | "right";
+  };
+  gallery?: {
+    gridColumns?: number;
+    gap?: string;
+  };
+  code?: {
+    fontFamily?: string;
+    fontSize?: string;
+    background?: string;
+  };
+}
+
+export interface FieldThemeOverrides {
+  input?: {
+    background?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    focusRing?: string;
+  };
+  select?: {
+    background?: string;
+    border?: string;
+  };
+  textarea?: {
+    background?: string;
+    minHeight?: string;
+  };
+  richText?: {
+    toolbarBackground?: string;
+    buttonActive?: string;
+  };
+  upload?: {
+    dropzoneBackground?: string;
+    dropzoneActive?: string;
+  };
+}
+
+export interface KyroTheme {
+  id?: string;
+  label?: string;
+  colors?: ThemeColors;
+  typography?: ThemeTypography;
+  spacing?: ThemeSpacing;
+  borderRadius?: ThemeRadius;
+  shadows?: ThemeShadows;
+  blocks?: BlockThemeOverrides;
+  fields?: FieldThemeOverrides;
+}
+
+export const LIGHT_THEME: KyroTheme = {
+  id: "light",
+  label: "Light",
+  colors: {
+    primary: "#3b82f6",
+    secondary: "#8b5cf6",
+    background: "#f8fafc",
+    surface: "#ffffff",
+    text: "#0f172a",
+    textMuted: "#64748b",
+    border: "#e2e8f0",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#06b6d4",
+  },
+  typography: {
+    fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+    fontFamilyMono: "'Fira Code', 'Cascadia Code', monospace",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+  },
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px",
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.1)",
+    xl: "0 20px 25px -5px rgba(0,0,0,0.1)",
+  },
+};
+
+export const DARK_THEME: KyroTheme = {
+  id: "dark",
+  label: "Dark",
+  colors: {
+    primary: "#60a5fa",
+    secondary: "#a78bfa",
+    background: "#0b1222",
+    surface: "#1e293b",
+    text: "#f1f5f9",
+    textMuted: "#94a3b8",
+    border: "#334155",
+    success: "#4ade80",
+    error: "#f87171",
+    warning: "#fbbf24",
+    info: "#22d3ee",
+  },
+  typography: {
+    fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+    fontFamilyMono: "'Fira Code', 'Cascadia Code', monospace",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+  },
+  borderRadius: {
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px",
+  },
+  shadows: {
+    sm: "0 1px 2px rgba(0,0,0,0.3)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.4)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
+    xl: "0 20px 25px -5px rgba(0,0,0,0.5)",
+  },
+};
+
+export function mergeThemes(
+  base: KyroTheme,
+  overrides: Partial<KyroTheme>,
+): KyroTheme {
+  return {
+    ...base,
+    ...overrides,
+    colors: { ...base.colors, ...overrides.colors },
+    typography: { ...base.typography, ...overrides.typography },
+    spacing: { ...base.spacing, ...overrides.spacing },
+    borderRadius: { ...base.borderRadius, ...overrides.borderRadius },
+    shadows: { ...base.shadows, ...overrides.shadows },
+    blocks: base.blocks
+      ? { ...base.blocks, ...overrides.blocks }
+      : overrides.blocks,
+    fields: base.fields
+      ? { ...base.fields, ...overrides.fields }
+      : overrides.fields,
+  };
+}