@trokky/studio 2.0.3

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @trokky/studio - Trokky CMS Studio
+ *
+ * A clean, maintainable Studio for Trokky CMS that works with API routers.
+ */
+interface StudioConfig {
+    /** API router for Studio to connect to (from @trokky/express or any Trokky API integration) */
+    apiRouter: any;
+    /** Mount point for Studio (default: '/studio') */
+    mount?: string;
+    /** Enable authentication */
+    auth?: boolean;
+    /** Studio branding configuration */
+    branding?: {
+        title?: string;
+        logo?: string;
+        theme?: 'light' | 'dark' | 'system';
+    };
+    /** Custom structure configuration */
+    structure?: any;
+    /** Custom field types to register */
+    customFields?: any[];
+    /** Additional Studio configuration */
+    config?: {
+        pageSize?: number;
+        enableDrafts?: boolean;
+        enableVersioning?: boolean;
+    };
+    /** Session management configuration */
+    sessionConfig?: {
+        /** Auto-refresh token buffer in milliseconds (default: 30000) */
+        refreshBufferMs?: number;
+        /** Warning display buffer in milliseconds (default: 90000) */
+        warningBufferMs?: number;
+        /** Session check interval in milliseconds (default: 5000) */
+        checkIntervalMs?: number;
+        /** Default session timeout in milliseconds (default: 2 hours) */
+        defaultTimeoutMs?: number;
+        /** Extended session timeout for "Remember Me" in milliseconds (default: 7 days) */
+        extendedTimeoutMs?: number;
+        /** Inactivity timeout in milliseconds (default: 30 minutes) */
+        inactivityTimeoutMs?: number;
+    };
+}
+interface StudioMiddleware {
+    /** Express router containing Studio routes */
+    router: any;
+}
+/**
+ * Create a Trokky Studio middleware
+ *
+ * @example
+ * ```typescript
+ * import { createStudio } from '@trokky/studio'
+ *
+ * const studio = createStudio({
+ *   apiRouter: myApiRouter,
+ *   schemas: cms.getAllSchemas(),
+ *   branding: { title: 'My CMS Admin' }
+ * })
+ *
+ * app.use('/studio', studio.router)
+ * ```
+ */
+export declare function createStudio(config: StudioConfig): Promise<StudioMiddleware>;
+export { createStudioLogger, StudioLogger } from './utils/logger.js';
+export type { LogLevel, StudioLoggerConfig } from './utils/logger.js';
+export { getStudioHTML, getStudioAsset } from './server/assets.js';
+export type { StudioConfig, StudioMiddleware };

package/dist/index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script>
+      window.TROKKY_CONFIG = {
+        mode: 'development',
+        basePath: '',
+        branding: {
+          title: 'Trokky Studio (Dev)',
+          theme: 'system'
+        },
+        structure: null,
+        config: {},
+        customFields: []
+      };
+    </script>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/trokky-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Trokky Studio v2 - Zero-config content management interface" />
+    
+    <!-- Theme variables with defaults (can be overridden at runtime) -->
+    <style>
+      :root {
+        /* Default blue theme */
+        --color-primary-50: 239 246 255;
+        --color-primary-100: 219 234 254;
+        --color-primary-200: 191 219 254;
+        --color-primary-300: 147 197 253;
+        --color-primary-400: 96 165 250;
+        --color-primary-500: 59 130 246;
+        --color-primary-600: 37 99 235;
+        --color-primary-700: 29 78 216;
+        --color-primary-800: 30 64 175;
+        --color-primary-900: 30 58 138;
+        --color-primary-950: 23 37 84;
+      }
+      
+      /* Dark mode by default respects system preference */
+      @media (prefers-color-scheme: dark) {
+        html:not(.light) {
+          color-scheme: dark;
+        }
+      }
+    </style>
+    
+    <title>Trokky Studio</title>
+    <script type="module" crossorigin src="/assets/index-CSDhJo2Z.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-CbXtAM7H.js">
+    <link rel="modulepreload" crossorigin href="/assets/router-Dpg4KYTB.js">
+    <link rel="modulepreload" crossorigin href="/assets/vendor-igJJvL5X.js">
+    <link rel="modulepreload" crossorigin href="/assets/query-CieM36kR.js">
+    <link rel="modulepreload" crossorigin href="/assets/ui-D5AGhrb0.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-DykyF7LU.css">
+  </head>
+  <body class="bg-gray-50 dark:bg-gray-900">
+    <div id="root"></div>
+    
+    
+  </body>
+</html>

package/dist/index.js

@@ -0,0 +1,199 @@
+/**
+ * @trokky/studio - Trokky CMS Studio
+ *
+ * A clean, maintainable Studio for Trokky CMS that works with API routers.
+ */
+import { createStudioLogger } from './utils/logger.js';
+/**
+ * Create a Trokky Studio middleware
+ *
+ * @example
+ * ```typescript
+ * import { createStudio } from '@trokky/studio'
+ *
+ * const studio = createStudio({
+ *   apiRouter: myApiRouter,
+ *   schemas: cms.getAllSchemas(),
+ *   branding: { title: 'My CMS Admin' }
+ * })
+ *
+ * app.use('/studio', studio.router)
+ * ```
+ */
+export async function createStudio(config) {
+    const logger = createStudioLogger('Studio');
+    // Validate configuration
+    if (!config.apiRouter) {
+        throw new Error('apiRouter is required in config');
+    }
+    // Note: Schemas are now fetched from /api/collections endpoint
+    // Import Express synchronously for Node.js environment
+    let router;
+    try {
+        const { createRequire } = await import('module');
+        const require = createRequire(import.meta.url);
+        const express = require('express');
+        router = express.Router();
+    }
+    catch (e) {
+        console.error('[ERROR] Failed to import Express:', e);
+        throw new Error('Express is required for Studio but could not be imported');
+    }
+    logger.info('Creating Studio', {
+        mount: config.mount || '/studio',
+        auth: config.auth || false,
+        customFields: config.customFields?.length || 0
+    });
+    // Serve Studio static assets
+    router.get('/', serveStudioHTML(config));
+    router.get('/assets/*', serveStudioAssets());
+    // Note: API router is mounted at main server level (/api), not here
+    // router.use('/api', config.apiRouter); // Removed - API is at server root level
+    // Catch-all route for SPA routing - must be last  
+    router.get('*', serveStudioHTML(config));
+    return { router };
+}
+/**
+ * Serve the Studio HTML with injected configuration
+ */
+function serveStudioHTML(config) {
+    return async (_req, res) => {
+        try {
+            // Get Studio HTML template (only works in Node.js)
+            let html;
+            try {
+                const { createRequire } = await import('module');
+                const require = createRequire(import.meta.url);
+                const url = require('url');
+                const path = require('path');
+                const fs = require('fs');
+                const currentFile = url.fileURLToPath(import.meta.url);
+                const currentDir = path.dirname(currentFile);
+                // Check if we're running from TypeScript source or compiled dist
+                const isTypeScript = currentFile.includes('/src/');
+                const htmlPath = isTypeScript
+                    ? path.join(currentDir, '../dist/index.html') // From src/ to dist/
+                    : path.join(currentDir, 'index.html'); // Already in dist/
+                html = fs.readFileSync(htmlPath, 'utf-8');
+            }
+            catch (e) {
+                console.error('[ERROR] Failed to read Studio HTML:', e.message);
+                // Provide basic HTML template
+                html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trokky Studio</title>
+</head>
+<body>
+    <div id="root">
+        <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, sans-serif;">
+            <div style="text-align: center;">
+                <h1>Trokky Studio</h1>
+                <p>Loading...</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>`;
+            }
+            // Inject runtime configuration and set base href
+            const basePath = _req.baseUrl || '/studio';
+            const runtimeConfig = {
+                mode: process.env.NODE_ENV || 'production',
+                apiUrl: '/api', // API is at server root level
+                apiBaseUrl: '/api',
+                branding: config.branding || { title: 'Trokky Studio' },
+                structure: config.structure || null,
+                config: config.config || {},
+                customFields: config.customFields || [],
+                sessionConfig: config.sessionConfig || null,
+                basePath
+            };
+            // Safe JSON serialization that handles functions and circular references
+            const safeStringify = (obj) => {
+                try {
+                    return JSON.stringify(obj, (_, value) => {
+                        if (typeof value === 'function') {
+                            return undefined; // Remove functions
+                        }
+                        if (typeof value === 'object' && value !== null) {
+                            // Simple circular reference check
+                            if (obj._seen && obj._seen.has(value)) {
+                                return '[Circular]';
+                            }
+                            if (!obj._seen)
+                                obj._seen = new Set();
+                            obj._seen.add(value);
+                        }
+                        return value;
+                    });
+                }
+                catch (error) {
+                    console.error('[ERROR] JSON serialization failed:', error);
+                    return '{}';
+                }
+            };
+            const configJson = safeStringify(runtimeConfig);
+            console.log('[DEBUG] Runtime config length:', configJson.length);
+            // Override any hardcoded TROKKY_CONFIG from Vite build
+            // Use a more robust replacement that handles nested objects
+            html = html.replace(/window\.TROKKY_CONFIG\s*=\s*\{[\s\S]*?\};/g, `window.TROKKY_CONFIG = ${configJson};`);
+            html = html.replace('<head>', `<head>
+    <base href="${basePath}/">
+    <script>
+      window.TROKKY_CONFIG = ${configJson};
+    </script>`);
+            res.setHeader('Content-Type', 'text/html');
+            res.send(html);
+        }
+        catch (error) {
+            console.error('[ERROR] Failed to serve Studio HTML:', error);
+            res.status(500).json({ error: 'Failed to serve Studio' });
+        }
+    };
+}
+/**
+ * Serve Studio static assets
+ */
+function serveStudioAssets() {
+    return async (req, res) => {
+        try {
+            // Assets handling only works in Node.js environment
+            const { createRequire } = await import('module');
+            const require = createRequire(import.meta.url);
+            const url = require('url');
+            const path = require('path');
+            const currentFile = url.fileURLToPath(import.meta.url);
+            const currentDir = path.dirname(currentFile);
+            // Check if we're running from TypeScript source or compiled dist
+            const isTypeScript = currentFile.includes('/src/');
+            const assetPath = isTypeScript
+                ? path.join(currentDir, '..', req.path) // From src/ to dist/
+                : path.join(currentDir, req.path); // Already in dist/
+            // Set proper MIME types
+            const ext = path.extname(req.path);
+            if (ext === '.css') {
+                res.setHeader('Content-Type', 'text/css');
+            }
+            else if (ext === '.js') {
+                res.setHeader('Content-Type', 'application/javascript');
+            }
+            res.sendFile(assetPath, (err) => {
+                if (err) {
+                    console.error('[ERROR] Failed to serve asset:', req.path, err.message);
+                    res.status(404).json({ error: 'Asset not found' });
+                }
+            });
+        }
+        catch (e) {
+            // Return 404 for asset not found
+            res.status(404).json({ error: 'Asset not found' });
+        }
+    };
+}
+// Export Studio logger for custom components
+export { createStudioLogger, StudioLogger } from './utils/logger.js';
+// Export Studio asset serving utilities
+export { getStudioHTML, getStudioAsset } from './server/assets.js';

package/dist/server/assets.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Studio Asset Serving Utilities
+ *
+ * These utilities allow other packages (like @trokky/routes) to serve
+ * Studio HTML and assets without needing to resolve package paths.
+ */
+export interface StudioConfig {
+    mode: 'production';
+    apiBasePath: string;
+    basePath?: string;
+    backendUrl?: string;
+    schemas: any[];
+    branding?: {
+        title?: string;
+        theme?: 'light' | 'dark' | 'system';
+    };
+    structure?: any;
+    config?: any;
+    customFields?: any[];
+}
+/**
+ * Get Studio HTML with injected configuration
+ */
+export declare function getStudioHTML(config: StudioConfig, studioPath: string): string;
+/**
+ * Get Studio asset content
+ */
+export declare function getStudioAsset(assetPath: string): {
+    content: Buffer;
+    contentType: string;
+} | null;

package/dist/server/assets.js

@@ -0,0 +1,169 @@
+/**
+ * Studio Asset Serving Utilities
+ *
+ * These utilities allow other packages (like @trokky/routes) to serve
+ * Studio HTML and assets without needing to resolve package paths.
+ */
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname, extname } from 'path';
+import { fileURLToPath } from 'url';
+/**
+ * Escape a string for safe embedding in HTML content.
+ */
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Safely serialize an object for embedding inside a <script> tag.
+ * Prevents breaking out via </script> or similar sequences.
+ */
+function escapeJsonForScript(obj) {
+    return JSON.stringify(obj)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/'/g, '\\u0027');
+}
+// Get the Studio package root directory (assuming we're in dist/server/ when compiled)
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const studioDir = join(__dirname, '../..');
+const distDir = join(studioDir, 'dist');
+/**
+ * Get Studio HTML with injected configuration
+ */
+export function getStudioHTML(config, studioPath) {
+    try {
+        const htmlPath = join(distDir, 'index.html');
+        if (!existsSync(htmlPath)) {
+            throw new Error(`Studio HTML not found at ${htmlPath}. Please build @trokky/studio package.`);
+        }
+        let html = readFileSync(htmlPath, 'utf-8');
+        // Replace any existing config with our config (handle multi-line objects)
+        html = html.replace(/window\.TROKKY_CONFIG\s*=\s*{[\s\S]*?};/, `window.TROKKY_CONFIG = ${escapeJsonForScript(config)};
+
+      // TEMPORARY FIX: Override API client path building for dynamic API paths
+      window.TROKKY_API_PATH_FIX = function() {
+
+
+        // Wait for the API client to be available
+        const checkApiClient = setInterval(() => {
+          if (window.TrokkyApiClient) {
+
+            clearInterval(checkApiClient);
+
+            // Store original post method
+            const originalPost = window.TrokkyApiClient.post;
+
+            // Override post method to handle dynamic API paths
+            window.TrokkyApiClient.post = function(endpoint, data) {
+
+
+              // Replace /api with the correct API base path
+              if (endpoint.startsWith('/api')) {
+                const newEndpoint = endpoint.replace('/api', '${escapeHtml(config.apiBasePath)}');
+
+                endpoint = newEndpoint;
+              }
+
+              return originalPost.call(this, endpoint, data);
+            };
+
+
+          }
+        }, 100);
+
+        // Timeout after 5 seconds
+        setTimeout(() => {
+          clearInterval(checkApiClient);
+
+        }, 5000);
+      };
+
+      // Apply the fix after DOM loads
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', window.TROKKY_API_PATH_FIX);
+      } else {
+        window.TROKKY_API_PATH_FIX();
+      }`);
+        // Update asset paths to use our Studio route
+        html = html.replace(/src="\/assets\//g, `src="${studioPath}/assets/`);
+        html = html.replace(/href="\/assets\//g, `href="${studioPath}/assets/`);
+        // Remove favicon reference since we don't have the icon
+        html = html.replace(/<link rel="icon"[^>]*>/g, '');
+        // Update title if provided
+        if (config.branding?.title) {
+            html = html.replace(/<title>.*?<\/title>/, `<title>${escapeHtml(config.branding.title)}</title>`);
+        }
+        return html;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        // Fallback HTML if built assets are not available
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${escapeHtml(config.branding?.title || 'Trokky Studio')}</title>
+    <script>
+      window.TROKKY_CONFIG = ${escapeJsonForScript(config)};
+    </script>
+</head>
+<body>
+    <div id="root">
+        <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, sans-serif;">
+            <div style="text-align: center;">
+                <h1>${escapeHtml(config.branding?.title || 'Trokky Studio')}</h1>
+                <p>Studio not built. Please run: npm run build in @trokky/studio package.</p>
+                <p style="font-size: 12px; color: #666; margin-top: 16px;">Error: ${escapeHtml(errorMessage)}</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>`;
+    }
+}
+/**
+ * Get Studio asset content
+ */
+export function getStudioAsset(assetPath) {
+    try {
+        const safePath = assetPath.replace(/\.\.\//g, ''); // Prevent directory traversal
+        const fullAssetPath = join(distDir, 'assets', safePath);
+        if (!existsSync(fullAssetPath)) {
+            return null;
+        }
+        const content = readFileSync(fullAssetPath);
+        // Determine content type based on file extension
+        const ext = extname(assetPath).toLowerCase();
+        let contentType = 'application/octet-stream';
+        if (ext === '.js') {
+            contentType = 'application/javascript';
+        }
+        else if (ext === '.css') {
+            contentType = 'text/css';
+        }
+        else if (ext === '.map') {
+            contentType = 'application/json';
+        }
+        else if (ext === '.svg') {
+            contentType = 'image/svg+xml';
+        }
+        else if (ext === '.png') {
+            contentType = 'image/png';
+        }
+        else if (ext === '.jpg' || ext === '.jpeg') {
+            contentType = 'image/jpeg';
+        }
+        return { content, contentType };
+    }
+    catch (error) {
+        return null;
+    }
+}

package/dist/utils/logger.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Studio Logger - Browser-optimized logging
+ *
+ * Lightweight logger for Studio frontend components.
+ * Integrates with browser dev tools and provides structured output.
+ */
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+export interface StudioLoggerConfig {
+    level: LogLevel;
+    enabled: boolean;
+    prefix: string;
+}
+export declare class StudioLogger {
+    private config;
+    constructor(component: string, config?: Partial<StudioLoggerConfig>);
+    private shouldLog;
+    private formatMessage;
+    debug(message: string, data?: any): void;
+    info(message: string, data?: any): void;
+    warn(message: string, data?: any): void;
+    error(message: string, error?: Error | any): void;
+}
+/**
+ * Create a logger for a Studio component
+ */
+export declare function createStudioLogger(component: string): StudioLogger;
+/**
+ * Global configuration for all Studio loggers
+ */
+export declare const StudioLoggerConfig: {
+    setLevel(level: LogLevel): void;
+    getLevel(): LogLevel;
+    disable(): void;
+    enable(): void;
+};

package/dist/utils/logger.js

@@ -0,0 +1,114 @@
+/**
+ * Studio Logger - Browser-optimized logging
+ *
+ * Lightweight logger for Studio frontend components.
+ * Integrates with browser dev tools and provides structured output.
+ */
+const LOG_LEVELS = {
+    debug: 0,
+    info: 1,
+    warn: 2,
+    error: 3
+};
+// Default to warn level to reduce console noise
+// Use cross-platform development detection that works in all environments
+let GLOBAL_LOG_LEVEL = (typeof window !== 'undefined' && window.__TROKKY_DEV__ === true) ? 'warn' : 'error';
+export class StudioLogger {
+    constructor(component, config = {}) {
+        this.config = {
+            level: GLOBAL_LOG_LEVEL,
+            enabled: true,
+            prefix: `[Studio:${component}]`,
+            ...config
+        };
+    }
+    shouldLog(level) {
+        // Always use the current global log level instead of the instance level
+        return this.config.enabled && LOG_LEVELS[level] >= LOG_LEVELS[GLOBAL_LOG_LEVEL];
+    }
+    formatMessage(level, message) {
+        return `${this.config.prefix}[${level}] ${message}`;
+    }
+    debug(message, data) {
+        if (this.shouldLog('debug')) {
+            const formatted = this.formatMessage('debug', message);
+            if (data) {
+                console.debug(formatted, data);
+            }
+            else {
+                console.debug(formatted);
+            }
+        }
+    }
+    info(message, data) {
+        if (this.shouldLog('info')) {
+            const formatted = this.formatMessage('info', message);
+            if (data) {
+                console.info(formatted, data);
+            }
+            else {
+                console.info(formatted);
+            }
+        }
+    }
+    warn(message, data) {
+        if (this.shouldLog('warn')) {
+            const formatted = this.formatMessage('warn', message);
+            if (data) {
+                console.warn(formatted, data);
+            }
+            else {
+                console.warn(formatted);
+            }
+        }
+    }
+    error(message, error) {
+        if (this.shouldLog('error')) {
+            const formatted = this.formatMessage('error', message);
+            if (error instanceof Error) {
+                console.error(formatted, error);
+            }
+            else if (error) {
+                console.error(formatted, error);
+            }
+            else {
+                console.error(formatted);
+            }
+        }
+    }
+}
+/**
+ * Create a logger for a Studio component
+ */
+export function createStudioLogger(component) {
+    return new StudioLogger(component);
+}
+/**
+ * Global configuration for all Studio loggers
+ */
+export const StudioLoggerConfig = {
+    setLevel(level) {
+        GLOBAL_LOG_LEVEL = level;
+        // Also store in window for persistence across page reloads in dev
+        if (typeof window !== 'undefined') {
+            window.__TROKKY_LOG_LEVEL__ = level;
+        }
+    },
+    getLevel() {
+        return GLOBAL_LOG_LEVEL;
+    },
+    disable() {
+        GLOBAL_LOG_LEVEL = 'error'; // Effectively disable by setting to highest level
+    },
+    enable() {
+        GLOBAL_LOG_LEVEL = (typeof window !== 'undefined' && window.__TROKKY_DEV__ === true) ? 'warn' : 'error';
+    }
+};
+// Check for persisted log level from previous session
+if (typeof window !== 'undefined' && window.__TROKKY_LOG_LEVEL__) {
+    GLOBAL_LOG_LEVEL = window.__TROKKY_LOG_LEVEL__;
+}
+// Expose logger config to window for easy console control
+if (typeof window !== 'undefined') {
+    window.TrokkyLogger = StudioLoggerConfig;
+}