@akinon/ui-shell-dev 1.0.0 → 1.1.0

package/dist/assets/index-tRJwBFdH.css

@@ -0,0 +1 @@
+.akinon-dropdown-menu-item-selected{font-weight:700!important}.akinon-method-modal{font-family:var(--token-fontFamily)}.akinon-method-modal-content{background-color:var(--token-colorBgElevated)!important}.akinon-method-modal-confirm-title{color:var(--color-neutral-50)!important}.akinon-method-modal-confirm-content{color:var(--color-neutral-100)!important;font-weight:300!important}.ant-notification-notice{padding:21px 70px 21px 24px!important;border-radius:5px;background-color:var(--color-ebonyClay-500)}.ant-notification-notice .ant-notification-notice-icon{right:24.5px!important}.ant-notification-notice .ant-notification-notice-message{color:var(--color-neutral-50)!important;font-size:var(--token-fontSize)!important;line-height:1.4285714285714286!important;margin:0!important;font-family:var(--token-fontFamily)}.ant-notification-notice-success{border:1px solid var(--color-green-954)}.ant-notification-notice-success .ant-notification-notice-icon svg{color:var(--color-green-954)}.ant-notification-notice-info{border:1px solid var(--color-orange-954)}.ant-notification-notice-info .ant-notification-notice-icon svg{color:var(--color-orange-954)}.ant-notification-notice-error{border:1px solid var(--color-red-425)}.ant-notification-notice-error .ant-notification-notice-icon svg{color:var(--color-red-425)}.akinon-table-wrapper{font-weight:500;line-height:normal}.akinon-table-wrapper .akinon-table-tbody tr:last-child td{border-bottom:none}.akinon-table-wrapper .akinon-table-thead>tr>th{border-bottom:none}.akinon-table-wrapper .akinon-table-thead .akinon-table-selection{display:none}.akinon-table-wrapper .akinon-checkbox-wrapper{margin-right:20px}.akinon-upload.akinon-upload-select{cursor:pointer;flex:1;width:100%;padding:10px 20px;font-weight:600;background-color:var(--color-ebonyClay-475);border-radius:5px;background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")}.akinon-upload.akinon-upload-select:not(:has(.akinon-upload-list-item)){max-width:300px}.akinon-upload-wrapper .akinon-upload-list:not(.akinon-upload-list-picture-card){line-height:0;max-width:300px}.akinon-upload-wrapper .akinon-upload-list:not(.akinon-upload-list-picture-card) .akinon-upload-list-item{border-radius:5px;height:unset;padding:10px 20px;background-color:var(--color-ebonyClay-550);font-size:14px;font-weight:600;gap:10px;align-items:center}.akinon-upload-wrapper .akinon-upload-list:not(.akinon-upload-list-picture-card) .akinon-upload-list-item .akinon-upload-list-item-name{white-space:normal;word-break:break-all}.akinon-upload-wrapper.akinon-upload-picture-card-wrapper .akinon-upload-list.akinon-upload-list-picture-card .akinon-upload-list-item{border-radius:0;border:2px solid var(--color-neutral-350)}.akinon-upload-wrapper.akinon-upload-picture-card-wrapper .akinon-upload-list.akinon-upload-list-picture-card .akinon-upload-list-item-error{border-color:var(--color-red-500)}.akinon-upload-wrapper.akinon-upload-picture-card-wrapper .akinon-upload-list.akinon-upload-list-picture-card .akinon-upload-list-item:before{display:none}.akinon-upload-wrapper.akinon-upload-picture-card-wrapper .akinon-upload-list.akinon-upload-list-picture-card .akinon-upload-list-item-actions{cursor:pointer;width:fit-content;inset:auto 6px 6px auto;background-color:#ffffff80;display:flex;align-items:center;justify-content:center;border-radius:100%;height:18px;width:18px;font-size:12px}.akinon-upload-wrapper .akinon-upload-list .akinon-upload-list-item .akinon-upload-list-item-actions .akinon-upload-list-item-action{opacity:1}.akinon-layout-footer{text-align:center}.akinon-layout-header{padding-inline:1rem;height:3.5rem;border-bottom:1px solid var(--color-gray-900);display:flex;align-items:center;justify-content:space-between;line-height:unset;position:sticky;top:0;z-index:999}.akinon-layout-sider{position:sticky;top:0;height:100svh;overflow-y:auto}.akinon-layout-sider.left{inset-inline-start:0}.akinon-layout-sider.right{inset-inline-end:0}.akinon-layout-sider .logo-container{display:flex;flex-direction:row;align-items:center;height:3.5rem;gap:.8rem;background-color:var(--color-ebonyClay-600);padding-inline:1.5rem}.akinon-layout-sider .logo-container.collapsed{justify-content:center;padding-inline:1rem}.akinon-layout-sider .logo-container.collapsed .brand-image{display:none}.log-messages{display:flex;flex-direction:column;padding:.75rem}.log-messages .akinon-space-item{width:100%}.log-messages-item{border-radius:10px;border:1px solid #fff;padding:.75rem;display:flex;flex-direction:column;margin-bottom:.25rem}.log-messages-item>div{width:100%}.flex{display:flex}.items-center{align-items:center}.mr-2{margin-right:.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-8{padding-top:2rem;padding-bottom:2rem}

package/dist/index.html

@@ -24,8 +24,8 @@
         box-sizing: border-box;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-DUUd718F.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CuIRnKVE.css">
+    <script type="module" crossorigin src="/assets/index-cI-pE1VB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-tRJwBFdH.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-shell-dev",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "description": "Development shell application for Akinon UI Protocol plugins",
   "type": "module",
@@ -14,11 +14,7 @@
     "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/ui-react": "^1.1.0",
     "@akinon/icons": "^1.0.0",
     "@akinon/fonts-jost-variable": "^1.0.0",
     "react": "^18.2.0",
@@ -28,13 +24,13 @@
     "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"
+    "typescript": "^5.2.2",
+    "@akinon/typescript-config": "1.0.1"
   },
   "engines": {
     "node": ">=18"

package/src/components/AppLayout.tsx

@@ -1,64 +1,78 @@
-import { Layout } from '@akinon/ui-layout';
+import './layout.scss';
+
+import { Layout, Space, Text } from '@akinon/ui-react';
 import React, { useState } from 'react';
 
-import { getSidebarItems, getTheme } from '../themes';
-import type { ShellConfig } from '../types';
+import type { ShellConfig, ViewType } from '../types';
+import { AppRouter } from './AppRouter';
 import { Header } from './Header';
-import { PluginLoader } from './PluginLoader';
-import { Sidebar } from './Sidebar';
+import { Navigation } from './Navigation';
 
 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 [leftSiderCollapsed, setLeftSiderCollapsed] = useState(false);
+  const [rightSiderCollapsed, setRightSiderCollapsed] = useState(true);
+  const [currentView, setCurrentView] = useState<ViewType>('welcome');
 
-  const sidebarWidth = collapsed
-    ? theme.sidebar.collapsedWidth
-    : theme.sidebar.width;
+  const toggleLeftSider = () => setLeftSiderCollapsed(!leftSiderCollapsed);
+  const toggleRightSider = () => setRightSiderCollapsed(!rightSiderCollapsed);
 
   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' }}
+    <Layout>
+      <Layout.Sider
+        collapsed={leftSiderCollapsed}
+        brandImageUrl="/akinon-logo.svg"
+        iconUrl="/akinon-favicon.svg"
       >
-        <Header
-          theme={theme}
-          title={config.shell.title}
-          collapsed={collapsed}
-          onToggleCollapse={() => setCollapsed(!collapsed)}
-          sidebarWidth={sidebarWidth}
+        <Navigation
+          config={config}
+          currentView={currentView}
+          onNavigate={setCurrentView}
         />
+      </Layout.Sider>
 
-        <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>
+        <Layout.Header>
+          <Header
+            onToggleLeftSider={toggleLeftSider}
+            onToggleRightSider={toggleRightSider}
+          />
+        </Layout.Header>
+
+        <Layout.Content>
+          <AppRouter
+            config={config}
+            currentView={currentView}
+            onNavigate={setCurrentView}
+          />
         </Layout.Content>
+
+        <Layout.Footer>
+          {config.shell.title} &copy; {new Date().getFullYear()} Created by
+          Akinon
+        </Layout.Footer>
       </Layout>
+
+      {/* Development logs/notifications area */}
+      <Layout.Sider
+        collapsed={rightSiderCollapsed}
+        collapsedWidth={0}
+        position="right"
+      >
+        <Space className="log-messages">
+          <div className="log-messages-item">
+            <Text type="success">Development server running</Text>
+            <Text>{new Date().toLocaleTimeString()}</Text>
+          </div>
+          <div className="log-messages-item">
+            <Text>Plugin URL: {config.plugin.url}</Text>
+            <Text>Type: {config.plugin.type}</Text>
+          </div>
+        </Space>
+      </Layout.Sider>
     </Layout>
   );
 };

package/src/components/AppRouter.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { ShellConfig, ViewType } from '../types';
+import { PluginLoader } from './PluginLoader';
+import { WelcomePage } from './WelcomePage';
+import { PluginTestPage } from './PluginTestPage';
+
+interface AppRouterProps {
+  config: ShellConfig;
+  currentView: ViewType;
+  onNavigate: (view: ViewType) => void;
+}
+
+export const AppRouter: React.FC<AppRouterProps> = ({ config, currentView, onNavigate }) => {
+  const renderView = () => {
+    switch (currentView) {
+      case 'welcome':
+        return (
+          <div className="px-8 py-8">
+            <WelcomePage config={config} onNavigate={onNavigate} />
+          </div>
+        );
+      case 'app':
+        return <PluginLoader config={config} />;
+      case 'plugin-test':
+        return (
+          <div className="px-8 py-8">
+            <PluginTestPage config={config} onNavigate={onNavigate} />
+          </div>
+        );
+      default:
+        return (
+          <div className="px-8 py-8">
+            <WelcomePage config={config} onNavigate={onNavigate} />
+          </div>
+        );
+    }
+  };
+
+  return renderView();
+};

package/src/components/Header.tsx

@@ -1,66 +1,42 @@
-import { Button } from '@akinon/ui-button';
-import { Layout } from '@akinon/ui-layout';
+import { Button } from '@akinon/ui-react';
 import React from 'react';
 
-import type { ThemeConfig } from '../types';
+import { HeaderSearch } from './HeaderSearch';
+import { HeaderUser } from './HeaderUser';
 
 interface HeaderProps {
-  theme: ThemeConfig;
-  title: string;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-  sidebarWidth: number;
+  onToggleLeftSider: () => void;
+  onToggleRightSider: () => void;
 }
 
-export const Header: React.FC<HeaderProps> = ({
-  theme,
-  title,
-  collapsed,
-  onToggleCollapse,
-  sidebarWidth
+export const Header: React.FC<HeaderProps> = ({ 
+  onToggleLeftSider, 
+  onToggleRightSider 
 }) => {
   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' }}>
+    <>
+      <div className="flex items-center">
         <Button
           type="text"
-          onClick={onToggleCollapse}
-          style={{ fontSize: '16px' }}
-        >
-          {collapsed ? '☰' : '⬅'}
-        </Button>
-        <h1 style={{ margin: 0, fontSize: '18px', fontWeight: '500' }}>
-          {title}
-        </h1>
+          icon="outdent"
+          onClick={onToggleLeftSider}
+          className="mr-2"
+        />
+      </div>
+
+      <div>
+        <HeaderSearch />
       </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 className="flex items-center">
+        <HeaderUser />
+        <Button
+          type="text"
+          icon="bell"
+          onClick={onToggleRightSider}
+          className="mr-2"
         />
       </div>
-    </Layout.Header>
+    </>
   );
-};
+};

package/src/components/HeaderSearch.tsx

@@ -0,0 +1,12 @@
+import { InputSearch } from '@akinon/ui-react';
+import React from 'react';
+
+export const HeaderSearch: React.FC = () => {
+  return (
+    <InputSearch
+      placeholder="Search..."
+      style={{ width: 300 }}
+      onSearch={() => {}}
+    />
+  );
+};

package/src/components/HeaderUser.tsx

@@ -0,0 +1,23 @@
+import { Avatar, Dropdown } from '@akinon/ui-react';
+import React from 'react';
+
+export const HeaderUser: React.FC = () => {
+  return (
+    <Dropdown
+      menu={{
+        items: [
+          { key: 'profile', label: 'Profile' },
+          { key: 'settings', label: 'Settings' },
+          { key: 'divider', type: 'divider' },
+          { key: 'logout', label: 'Logout' }
+        ]
+      }}
+      placement="bottomRight"
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+        <Avatar size="small">Dev</Avatar>
+        <span style={{ fontSize: '14px' }}>Developer</span>
+      </div>
+    </Dropdown>
+  );
+};

package/src/components/Navigation.tsx

@@ -0,0 +1,82 @@
+import { Menu, IMenuProps } from '@akinon/ui-react';
+import React from 'react';
+
+import type { ShellConfig, ViewType } from '../types';
+
+interface NavigationProps {
+  config: ShellConfig;
+  currentView: ViewType;
+  onNavigate: (view: ViewType) => void;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({ 
+  config, 
+  currentView, 
+  onNavigate 
+}) => {
+  const getMenuItems = () => {
+    const items = [
+      {
+        key: 'welcome',
+        label: 'Welcome',
+        icon: 'home'
+      },
+      {
+        key: 'development',
+        label: 'Development',
+        icon: 'build',
+        children: [
+          {
+            key: 'app',
+            label: config.plugin.name,
+            icon: config.plugin.type === 'fullpage' ? 'desktop' : 'appstore'
+          }
+        ]
+      }
+    ];
+
+    // Add plugin test page for plugin apps
+    if (config.plugin.type === 'plugin') {
+      items[1].children.push({
+        key: 'plugin-test',
+        label: 'Plugin Test',
+        icon: 'experiment'
+      });
+    }
+
+    // Add static menu items to match playground
+    items.push(
+      {
+        key: 'settings',
+        label: 'Settings',
+        icon: 'setting'
+      },
+      {
+        key: 'help',
+        label: 'Help & Support',
+        icon: 'question-circle'
+      }
+    );
+
+    return items;
+  };
+
+  const onClick: IMenuProps['onClick'] = (e: any) => {
+    if (e.key === 'welcome' || e.key === 'app' || e.key === 'plugin-test') {
+      onNavigate(e.key as ViewType);
+    }
+  };
+
+  return (
+    <div>
+      <Menu
+        mode="inline"
+        selectedKeys={[currentView]}
+        defaultOpenKeys={['development']}
+        items={getMenuItems()}
+        onClick={onClick}
+        theme="dark"
+      />
+    </div>
+  );
+};

package/src/components/PluginTestPage.tsx

@@ -0,0 +1,223 @@
+import { Button, Card } from '@akinon/ui-react';
+import React, { useState } from 'react';
+
+import type { ShellConfig } from '../types';
+import { PluginLoader } from './PluginLoader';
+
+interface PluginTestPageProps {
+  config: ShellConfig;
+  onNavigate: (view: 'welcome' | 'app' | 'plugin-test') => void;
+}
+
+type PlaceholderType = 'sidebar' | 'header' | 'content' | 'modal' | 'drawer';
+
+const placeholderConfigs = {
+  sidebar: {
+    name: 'Sidebar Plugin',
+    description: 'Plugin rendered in sidebar area',
+    dimensions: '300px × 100%',
+    containerStyle: { 
+      width: '300px', 
+      height: '400px', 
+      border: '2px dashed #1890ff',
+      borderRadius: '4px',
+      backgroundColor: '#f0f8ff'
+    }
+  },
+  header: {
+    name: 'Header Plugin',
+    description: 'Plugin rendered in header area',
+    dimensions: '100% × 60px',
+    containerStyle: { 
+      width: '100%', 
+      height: '60px', 
+      border: '2px dashed #52c41a',
+      borderRadius: '4px',
+      backgroundColor: '#f6ffed'
+    }
+  },
+  content: {
+    name: 'Content Plugin',
+    description: 'Plugin rendered in main content area',
+    dimensions: '100% × 400px',
+    containerStyle: { 
+      width: '100%', 
+      height: '400px', 
+      border: '2px dashed #722ed1',
+      borderRadius: '4px',
+      backgroundColor: '#f9f0ff'
+    }
+  },
+  modal: {
+    name: 'Modal Plugin',
+    description: 'Plugin rendered in modal overlay',
+    dimensions: '600px × 400px',
+    containerStyle: { 
+      width: '600px', 
+      height: '400px', 
+      border: '2px dashed #fa541c',
+      borderRadius: '4px',
+      backgroundColor: '#fff7e6'
+    }
+  },
+  drawer: {
+    name: 'Drawer Plugin',
+    description: 'Plugin rendered in drawer panel',
+    dimensions: '400px × 100%',
+    containerStyle: { 
+      width: '400px', 
+      height: '300px', 
+      border: '2px dashed #eb2f96',
+      borderRadius: '4px',
+      backgroundColor: '#fff0f6'
+    }
+  }
+};
+
+export const PluginTestPage: React.FC<PluginTestPageProps> = ({ config, onNavigate }) => {
+  const [selectedPlaceholder, setSelectedPlaceholder] = useState<PlaceholderType>('content');
+  const [isPluginVisible, setIsPluginVisible] = useState(false);
+
+  const currentConfig = placeholderConfigs[selectedPlaceholder];
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <Button onClick={() => onNavigate('welcome')}>← Back to Welcome</Button>
+        <h2 style={{ margin: 0 }}>Plugin Integration Test</h2>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '24px' }}>
+        <Card title="Test Configuration" size="small">
+          <div style={{ marginBottom: '16px' }}>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+              Placeholder Type:
+            </label>
+            <select
+              value={selectedPlaceholder}
+              onChange={(e) => setSelectedPlaceholder(e.target.value as PlaceholderType)}
+              style={{
+                width: '100%',
+                padding: '8px 12px',
+                border: '1px solid #d9d9d9',
+                borderRadius: '6px',
+                fontSize: '14px',
+                backgroundColor: 'white'
+              }}
+            >
+              {Object.entries(placeholderConfigs).map(([key, config]) => (
+                <option key={key} value={key}>
+                  {config.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div style={{ marginBottom: '16px' }}>
+            <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+              Plugin Status:
+            </label>
+            <span style={{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              backgroundColor: isPluginVisible ? '#f6ffed' : '#f5f5f5',
+              color: isPluginVisible ? '#52c41a' : '#666',
+              border: `1px solid ${isPluginVisible ? '#b7eb8f' : '#d9d9d9'}`
+            }}>
+              {isPluginVisible ? 'Visible' : 'Hidden'}
+            </span>
+          </div>
+
+          <div style={{ marginBottom: '16px' }}>
+            <Button 
+              type="primary" 
+              block 
+              onClick={() => setIsPluginVisible(!isPluginVisible)}
+            >
+              {isPluginVisible ? 'Hide Plugin' : 'Show Plugin'}
+            </Button>
+          </div>
+
+          <div style={{ fontSize: '12px', color: '#666' }}>
+            <p><strong>Dimensions:</strong> {currentConfig.dimensions}</p>
+            <p><strong>Description:</strong> {currentConfig.description}</p>
+          </div>
+        </Card>
+
+        <Card title={`${currentConfig.name} Preview`} size="small">
+          <div style={{ 
+            padding: '24px', 
+            backgroundColor: '#fafafa', 
+            borderRadius: '4px',
+            minHeight: '500px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+            <div style={currentConfig.containerStyle}>
+              {isPluginVisible ? (
+                <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                  <div style={{
+                    position: 'absolute',
+                    top: '8px',
+                    left: '8px',
+                    right: '8px',
+                    backgroundColor: 'rgba(0,0,0,0.7)',
+                    color: 'white',
+                    padding: '4px 8px',
+                    borderRadius: '2px',
+                    fontSize: '10px',
+                    zIndex: 10
+                  }}>
+                    Plugin: {config.plugin.name} ({selectedPlaceholder})
+                  </div>
+                  <PluginLoader config={config} />
+                </div>
+              ) : (
+                <div style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '100%',
+                  color: '#999',
+                  textAlign: 'center'
+                }}>
+                  <div style={{ fontSize: '48px', marginBottom: '8px' }}>📦</div>
+                  <p style={{ margin: 0, fontSize: '14px' }}>
+                    {currentConfig.name} Placeholder
+                  </p>
+                  <p style={{ margin: '4px 0 0 0', fontSize: '12px' }}>
+                    Click "Show Plugin" to load
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Card 
+        title="Integration Notes" 
+        style={{ marginTop: '24px' }}
+        size="small"
+      >
+        <div style={{ fontSize: '14px', lineHeight: '1.5' }}>
+          <p>
+            This test environment simulates how your plugin will appear in different 
+            placeholder configurations within host applications. Each placeholder type 
+            represents a different integration scenario:
+          </p>
+          <ul>
+            <li><strong>Sidebar:</strong> Narrow vertical space, typically for navigation or quick actions</li>
+            <li><strong>Header:</strong> Horizontal space at top, usually for search or user controls</li>
+            <li><strong>Content:</strong> Main content area with full width and flexible height</li>
+            <li><strong>Modal:</strong> Overlay dialog for focused interactions</li>
+            <li><strong>Drawer:</strong> Slide-out panel for secondary content or forms</li>
+          </ul>
+        </div>
+      </Card>
+    </div>
+  );
+};