npm - @akinon/ui-shell-dev - Versions diffs - 1.0.0 - Mend

@akinon/ui-shell-dev 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/assets/index-CuIRnKVE.css +1 -0
package/dist/assets/index-DUUd718F.js +193 -0
package/dist/index.html +33 -0
package/index.html +32 -0
package/index.mjs +1 -0
package/package.json +49 -0
package/src/components/AppLayout.tsx +64 -0
package/src/components/Header.tsx +66 -0
package/src/components/PluginLoader.tsx +112 -0
package/src/components/Sidebar.tsx +74 -0
package/src/index.tsx +4 -0
package/src/main.tsx +29 -0
package/src/server/dev-server.mjs +193 -0
package/src/server/dev-server.ts +142 -0
package/src/shell-app.tsx +17 -0
package/src/themes/index.ts +37 -0
package/src/themes/omnitron.ts +66 -0
package/src/types.ts +40 -0
package/tsconfig.json +11 -0
package/vite.config.ts +25 -0

package/dist/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Akinon UI Shell Development</title>
+    <!--SHELL_CONFIG-->
+    <style>
+      body {
+        margin: 0;
+        font-family: 'Jost Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      #root {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+      }
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+    <script type="module" crossorigin src="/assets/index-DUUd718F.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CuIRnKVE.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Akinon UI Shell Development</title>
+    <!--SHELL_CONFIG-->
+    <style>
+      body {
+        margin: 0;
+        font-family: 'Jost Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      #root {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+      }
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/index.mjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { ShellDevServer } from './src/server/dev-server.mjs';

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@akinon/ui-shell-dev",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Development shell application for Akinon UI Protocol plugins",
+  "type": "module",
+  "main": "index.mjs",
+  "files": [
+    "dist",
+    "src",
+    "index.html",
+    "index.mjs",
+    "vite.config.ts",
+    "tsconfig.json"
+  ],
+  "dependencies": {
+    "@akinon/ui-system": "^1.0.0",
+    "@akinon/ui-layout": "^1.0.0",
+    "@akinon/ui-menu": "^1.0.0",
+    "@akinon/ui-breadcrumb": "^1.0.0",
+    "@akinon/ui-button": "^1.0.0",
+    "@akinon/icons": "^1.0.0",
+    "@akinon/fonts-jost-variable": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "vite": "^5.2.0"
+  },
+  "devDependencies": {
+    "@akinon/typescript-config": "^1.0.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/express": "^4.17.21",
+    "@types/cors": "^2.8.17",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "typescript": "^5.2.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint",
+    "clean": "rm -rf dist node_modules"
+  }
+}

package/src/components/AppLayout.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { Layout } from '@akinon/ui-layout';
+import React, { useState } from 'react';
+import { getSidebarItems, getTheme } from '../themes';
+import type { ShellConfig } from '../types';
+import { Header } from './Header';
+import { PluginLoader } from './PluginLoader';
+import { Sidebar } from './Sidebar';
+interface AppLayoutProps {
+  config: ShellConfig;
+}
+export const AppLayout: React.FC<AppLayoutProps> = ({ config }) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const theme = getTheme(config.shell.theme);
+  const sidebarItems =
+    config.sidebar?.items || getSidebarItems(config.shell.theme);
+  const sidebarWidth = collapsed
+    ? theme.sidebar.collapsedWidth
+    : theme.sidebar.width;
+  return (
+    <Layout
+      style={{ minHeight: '100vh', backgroundColor: theme.colors.background }}
+    >
+      <Sidebar items={sidebarItems} theme={theme} collapsed={collapsed} />
+      <Layout
+        style={{ marginLeft: sidebarWidth, transition: 'margin-left 0.2s' }}
+      >
+        <Header
+          theme={theme}
+          title={config.shell.title}
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed(!collapsed)}
+          sidebarWidth={sidebarWidth}
+        />
+        <Layout.Content
+          style={{
+            marginTop: theme.header.height,
+            padding: '24px',
+            minHeight: `calc(100vh - ${theme.header.height}px)`,
+            backgroundColor: theme.colors.background
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: 'white',
+              borderRadius: '8px',
+              height: 'calc(100vh - 112px)',
+              overflow: 'hidden',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
+            }}
+          >
+            <PluginLoader config={config} />
+          </div>
+        </Layout.Content>
+      </Layout>
+    </Layout>
+  );
+};

package/src/components/Header.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import { Button } from '@akinon/ui-button';
+import { Layout } from '@akinon/ui-layout';
+import React from 'react';
+import type { ThemeConfig } from '../types';
+interface HeaderProps {
+  theme: ThemeConfig;
+  title: string;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  sidebarWidth: number;
+}
+export const Header: React.FC<HeaderProps> = ({
+  theme,
+  title,
+  collapsed,
+  onToggleCollapse,
+  sidebarWidth
+}) => {
+  return (
+    <Layout.Header
+      style={{
+        backgroundColor: theme.colors.header,
+        padding: '0 24px',
+        height: theme.header.height,
+        lineHeight: `${theme.header.height}px`,
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        left: sidebarWidth,
+        zIndex: 100,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        transition: 'left 0.2s'
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <Button
+          type="text"
+          onClick={onToggleCollapse}
+          style={{ fontSize: '16px' }}
+        >
+          {collapsed ? '☰' : '⬅'}
+        </Button>
+        <h1 style={{ margin: 0, fontSize: '18px', fontWeight: '500' }}>
+          {title}
+        </h1>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <span style={{ color: '#666' }}>Development Mode</span>
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: '#52c41a'
+          }}
+        />
+      </div>
+    </Layout.Header>
+  );
+};

package/src/components/PluginLoader.tsx ADDED Viewed

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import type { ShellConfig } from '../types';
+interface PluginLoaderProps {
+  config: ShellConfig;
+}
+export const PluginLoader: React.FC<PluginLoaderProps> = ({ config }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, []);
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    setError(null);
+  };
+  const handleIframeError = () => {
+    setIsLoading(false);
+    setError('Failed to load plugin. Make sure your plugin is running.');
+  };
+  if (error) {
+    return (
+      <div
+        style={{
+          padding: '48px',
+          textAlign: 'center',
+          backgroundColor: '#fff',
+          borderRadius: '8px',
+          margin: '24px',
+          border: '1px solid #f0f0f0'
+        }}
+      >
+        <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
+        <h3 style={{ margin: '0 0 8px 0', color: '#ff4d4f' }}>
+          Plugin Load Error
+        </h3>
+        <p style={{ margin: '0 0 16px 0', color: '#666' }}>{error}</p>
+        <p style={{ margin: 0, fontSize: '14px', color: '#999' }}>
+          Expected plugin URL: <code>{config.plugin.url}</code>
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      {isLoading && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#fff',
+            zIndex: 10
+          }}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '32px',
+                border: '3px solid #f3f3f3',
+                borderTop: '3px solid #1890ff',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite',
+                margin: '0 auto 16px'
+              }}
+            />
+            <p style={{ margin: 0, color: '#666' }}>Loading plugin...</p>
+          </div>
+        </div>
+      )}
+      <iframe
+        src={config.plugin.url}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          backgroundColor: 'white'
+        }}
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+        title="Plugin Content"
+      />
+      <style>{`
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};

package/src/components/Sidebar.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import { Layout } from '@akinon/ui-layout';
+import { Menu } from '@akinon/ui-menu';
+import React from 'react';
+import type { SidebarItem, ThemeConfig } from '../types';
+interface SidebarProps {
+  items: SidebarItem[];
+  theme: ThemeConfig;
+  collapsed?: boolean;
+}
+export const Sidebar: React.FC<SidebarProps> = ({
+  items,
+  theme,
+  collapsed = false
+}) => {
+  const menuItems = items.map(item => ({
+    key: item.key,
+    label: item.label,
+    icon: item.icon,
+    children: item.children?.map(child => ({
+      key: child.key,
+      label: child.label
+    }))
+  }));
+  const selectedKeys = items.filter(item => item.active).map(item => item.key);
+  return (
+    <Layout.Sider
+      width={theme.sidebar.width}
+      collapsedWidth={theme.sidebar.collapsedWidth}
+      collapsed={collapsed}
+      style={{
+        backgroundColor: theme.colors.sidebar,
+        height: '100vh',
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 200
+      }}
+    >
+      <div
+        style={{
+          height: theme.header.height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+          color: 'white',
+          fontSize: '18px',
+          fontWeight: 'bold'
+        }}
+      >
+        {collapsed ? 'A' : 'Akinon'}
+      </div>
+      <Menu
+        theme="dark"
+        mode="inline"
+        selectedKeys={selectedKeys}
+        defaultOpenKeys={items
+          .filter(item => item.children)
+          .map(item => item.key)}
+        items={menuItems}
+        style={{
+          backgroundColor: 'transparent',
+          border: 'none'
+        }}
+      />
+    </Layout.Sider>
+  );
+};

package/src/index.tsx ADDED Viewed

@@ -0,0 +1,4 @@
+export { ShellDevServer } from './server/dev-server';
+export { ShellApp } from './shell-app';
+export { getSidebarItems, getTheme } from './themes';
+export type { ShellConfig, SidebarItem, ThemeConfig } from './types';

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ShellApp } from './shell-app';
+import type { ShellConfig } from './types';
+// Get configuration injected by the server
+const config: ShellConfig = (
+  window as unknown as { __SHELL_CONFIG__?: ShellConfig }
+).__SHELL_CONFIG__ || {
+  plugin: {
+    url: 'http://localhost:4002',
+    path: './src'
+  },
+  shell: {
+    port: 4000,
+    theme: 'omnitron',
+    title: 'Development Shell'
+  },
+  sidebar: {
+    items: []
+  }
+};
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ShellApp config={config} />
+  </React.StrictMode>
+);

package/src/server/dev-server.mjs ADDED Viewed

@@ -0,0 +1,193 @@
+import cors from 'cors';
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createServer as createViteServer } from 'vite';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export class ShellDevServer {
+  constructor(config) {
+    this.app = express();
+    this.config = config;
+    this.viteServer = null;
+    this.setupMiddleware();
+  }
+  setupMiddleware() {
+    // Enable CORS for plugin communication
+    this.app.use(
+      cors({
+        origin: true,
+        credentials: true
+      })
+    );
+    // Parse JSON bodies
+    this.app.use(express.json());
+    // Serve static assets
+    this.app.use('/assets', express.static(path.join(__dirname, '../assets')));
+  }
+  async start() {
+    try {
+      console.log('🔧 Starting shell server initialization...');
+      const shellRoot = path.resolve(__dirname, '../..');
+      const distPath = path.resolve(shellRoot, 'dist');
+      // Only use production mode if explicitly set via env var
+      const isProduction = process.env.NODE_ENV === 'production' && fs.existsSync(distPath);
+      console.log(`📁 Shell root: ${shellRoot}`);
+      console.log(`🏭 Production mode: ${isProduction}`);
+      // API endpoints
+      this.setupApiRoutes();
+      if (isProduction) {
+        // Production: serve built assets
+        this.app.use('/assets', express.static(path.join(distPath, 'assets')));
+        this.app.get('*', (req, res, next) => {
+          if (req.path.startsWith('/api')) {
+            return next();
+          }
+          console.log(`📄 Serving production HTML for: ${req.url}`);
+          let template = fs.readFileSync(
+            path.resolve(distPath, 'index.html'),
+            'utf-8'
+          );
+          // Inject config
+          template = template.replace(
+            '<!--SHELL_CONFIG-->',
+            `<script>window.__SHELL_CONFIG__ = ${JSON.stringify(this.config)};</script>`
+          );
+          res.status(200).set({ 'Content-Type': 'text/html' }).end(template);
+        });
+      } else {
+        // Development: use Vite middleware
+        this.viteServer = await createViteServer({
+          root: shellRoot,
+          configFile: path.resolve(shellRoot, 'vite.config.ts'),
+          server: {
+            middlewareMode: true,
+            cors: true
+          },
+          appType: 'spa'
+        });
+        console.log('✅ Vite server created successfully');
+        // Use Vite middleware for assets and HMR
+        this.app.use(this.viteServer.middlewares);
+        console.log('✅ Vite middleware configured');
+        // Serve the shell app (only for HTML requests)
+        this.app.get('*', async (req, res, next) => {
+          if (req.path.startsWith('/api') || req.path.startsWith('/src') || req.path.includes('.')) {
+            return next();
+          }
+          try {
+            console.log(`📄 Serving development HTML for: ${req.url}`);
+            let template = fs.readFileSync(
+              path.resolve(__dirname, '../../index.html'),
+              'utf-8'
+            );
+            template = await this.viteServer.transformIndexHtml(
+              req.url,
+              template
+            );
+            // Inject config
+            template = template.replace(
+              '<!--SHELL_CONFIG-->',
+              `<script>window.__SHELL_CONFIG__ = ${JSON.stringify(this.config)};</script>`
+            );
+            console.log(`✅ HTML processed successfully for ${req.url}`);
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(template);
+          } catch (error) {
+            console.error(`❌ Error serving ${req.url}:`, error);
+            this.viteServer.ssrFixStacktrace(error);
+            next(error);
+          }
+        });
+      }
+      // Start server
+      const server = this.app.listen(this.config.shell.port, '0.0.0.0', () => {
+        console.log(
+          `🚀 Shell development server running on http://localhost:${this.config.shell.port}`
+        );
+        console.log(`📱 Plugin expected at: ${this.config.plugin.url}`);
+        console.log(`🎨 Theme: ${this.config.shell.theme}`);
+        console.log(`🔍 Server bound to 0.0.0.0:${this.config.shell.port}`);
+      });
+      // Handle graceful shutdown
+      process.on('SIGTERM', () => {
+        console.log('🛑 Shutting down shell server...');
+        server.close(() => {
+          if (this.viteServer) {
+            this.viteServer.close();
+          }
+          process.exit(0);
+        });
+      });
+      return server;
+    } catch (error) {
+      console.error('❌ Failed to start shell server:', error);
+      throw error;
+    }
+  }
+  setupApiRoutes() {
+    // Health check
+    this.app.get('/api/health', (req, res) => {
+      console.log('🏥 Health check accessed');
+      res.json({
+        status: 'ok',
+        config: this.config,
+        timestamp: new Date().toISOString()
+      });
+    });
+    // Simple test endpoint
+    this.app.get('/test', (req, res) => {
+      console.log('🧪 Test endpoint accessed');
+      res.send('Shell server is working!');
+    });
+    // Configuration endpoint
+    this.app.get('/api/config', (req, res) => {
+      res.json(this.config);
+    });
+    // Plugin proxy endpoint (for development)
+    this.app.get('/api/plugin/health', async (req, res) => {
+      try {
+        const response = await fetch(`${this.config.plugin.url}/api/health`);
+        const data = await response.json();
+        res.json({ plugin: data, shell: { status: 'ok' } });
+      } catch (error) {
+        res.status(502).json({
+          error: 'Plugin not available',
+          plugin_url: this.config.plugin.url,
+          message: error.message
+        });
+      }
+    });
+  }
+}