npm - @akinon/ui-shell-dev - Versions diffs - 1.3.5 → 1.3.6 - Mend

@akinon/ui-shell-dev 1.3.5 → 1.3.6

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 (13) hide show

package/dist/assets/{index-CDUI6TEB.js → index-CNgx52S6.js} +80 -62
package/dist/favicon.svg +3 -0
package/dist/index.html +1 -1
package/package.json +1 -1
package/public/favicon.svg +3 -0
package/src/components/Navigation.tsx +5 -3
package/src/components/PluginTestPage.tsx +4 -8
package/src/components/WelcomePage.tsx +403 -68
package/src/providers.tsx +10 -11
package/src/server/dev-server.mjs +32 -13
package/src/server/dev-server.ts +32 -13
package/src/types.ts +6 -4
package/src/utils/navigation.tsx +26 -5

package/dist/favicon.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3113 27.0107C37.5819 26.3304 36.7339 25.7864 35.7661 25.3776C34.7983 24.9698 33.7626 24.7654 32.6567 24.7654C31.5508 24.7654 30.5139 24.9698 29.5461 25.3776C28.5784 25.7864 27.7303 26.3304 27.0021 27.0107C26.2727 27.6921 25.6944 28.4762 25.2672 29.3674C24.8399 30.2586 24.6263 31.1866 24.6263 32.1514C24.6263 33.3638 24.8399 34.4767 25.2672 35.4912C25.6944 36.5068 26.2727 37.3839 27.0021 38.1269C27.7303 38.8689 28.5784 39.4508 29.5461 39.8715C30.5139 40.2922 31.5508 40.502 32.6567 40.502C33.7626 40.502 34.7983 40.2922 35.7661 39.8715C36.7339 39.4508 37.5819 38.8689 38.3113 38.1269C39.0395 37.3839 39.6178 36.5068 40.0451 35.4912C40.4723 34.4767 40.686 33.3638 40.686 32.1514C40.686 31.1866 40.4723 30.2586 40.0451 29.3674C39.6178 28.4762 39.0395 27.6921 38.3113 27.0107ZM35.4823 17.9505L26.3774 0L0 52H52.7536L46.5423 39.7547C45.8464 41.0525 44.9822 42.2109 43.9475 43.2297C42.5525 44.6033 40.8931 45.6675 38.9705 46.4213C37.0478 47.1763 34.9429 47.5537 32.6566 47.5537C30.3693 47.5537 28.2644 47.1763 26.3417 46.4213C24.4191 45.6675 22.7608 44.6033 21.3658 43.2297C19.9707 41.8561 18.8832 40.2295 18.1053 38.3497C17.3252 36.4689 16.9358 34.3912 16.9358 32.1135C16.9358 30.0109 17.3695 28.075 18.2369 26.3055C19.1033 24.5372 20.2664 23.0155 21.724 21.7403C23.1816 20.4662 24.8582 19.4766 26.7571 18.7714C28.6539 18.0663 30.6207 17.7137 32.6566 17.7137C33.6136 17.7137 34.5555 17.7948 35.4823 17.9505Z" fill="#D2282E"/>
+</svg>

package/dist/index.html CHANGED Viewed

@@ -24,7 +24,7 @@
         box-sizing: border-box;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-CDUI6TEB.js"></script>
+    <script type="module" crossorigin src="/assets/index-CNgx52S6.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BFs1gfY5.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-shell-dev",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "private": false,
   "description": "Development shell application for Akinon UI Protocol plugins",
   "type": "module",

package/public/favicon.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3113 27.0107C37.5819 26.3304 36.7339 25.7864 35.7661 25.3776C34.7983 24.9698 33.7626 24.7654 32.6567 24.7654C31.5508 24.7654 30.5139 24.9698 29.5461 25.3776C28.5784 25.7864 27.7303 26.3304 27.0021 27.0107C26.2727 27.6921 25.6944 28.4762 25.2672 29.3674C24.8399 30.2586 24.6263 31.1866 24.6263 32.1514C24.6263 33.3638 24.8399 34.4767 25.2672 35.4912C25.6944 36.5068 26.2727 37.3839 27.0021 38.1269C27.7303 38.8689 28.5784 39.4508 29.5461 39.8715C30.5139 40.2922 31.5508 40.502 32.6567 40.502C33.7626 40.502 34.7983 40.2922 35.7661 39.8715C36.7339 39.4508 37.5819 38.8689 38.3113 38.1269C39.0395 37.3839 39.6178 36.5068 40.0451 35.4912C40.4723 34.4767 40.686 33.3638 40.686 32.1514C40.686 31.1866 40.4723 30.2586 40.0451 29.3674C39.6178 28.4762 39.0395 27.6921 38.3113 27.0107ZM35.4823 17.9505L26.3774 0L0 52H52.7536L46.5423 39.7547C45.8464 41.0525 44.9822 42.2109 43.9475 43.2297C42.5525 44.6033 40.8931 45.6675 38.9705 46.4213C37.0478 47.1763 34.9429 47.5537 32.6566 47.5537C30.3693 47.5537 28.2644 47.1763 26.3417 46.4213C24.4191 45.6675 22.7608 44.6033 21.3658 43.2297C19.9707 41.8561 18.8832 40.2295 18.1053 38.3497C17.3252 36.4689 16.9358 34.3912 16.9358 32.1135C16.9358 30.0109 17.3695 28.075 18.2369 26.3055C19.1033 24.5372 20.2664 23.0155 21.724 21.7403C23.1816 20.4662 24.8582 19.4766 26.7571 18.7714C28.6539 18.0663 30.6207 17.7137 32.6566 17.7137C33.6136 17.7137 34.5555 17.7948 35.4823 17.9505Z" fill="#D2282E"/>
+</svg>

package/src/components/Navigation.tsx CHANGED Viewed

@@ -7,7 +7,8 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import {
   getFullpageNavigationItems,
   getPluginNavigationItems,
-  getStaticNavigationItems
+  getStaticNavigationItems,
+  getStaticNavigationItemsBottom
 } from '../utils/navigation';
 export const Navigation: React.FC = () => {
@@ -17,11 +18,12 @@ export const Navigation: React.FC = () => {
   const [selectedKey, setSelectedKey] = useState('/');
   const [openKeys, setOpenKeys] = useState<string[]>([]);
   const items = getStaticNavigationItems();
+  const itemsBottom = getStaticNavigationItemsBottom();
   const fullpageItems = getFullpageNavigationItems(
     apps,
     configs as Map<number, any>
   );
-  const pluginItems = getPluginNavigationItems();
+  const pluginItems = getPluginNavigationItems(apps);
   useEffect(() => {
     setSelectedKey(location.pathname);
@@ -44,7 +46,7 @@ export const Navigation: React.FC = () => {
       <Menu
         mode="inline"
         selectedKeys={[selectedKey]}
-        items={[...items, ...fullpageItems, ...pluginItems]}
+        items={[...items, ...fullpageItems, ...pluginItems, ...itemsBottom]}
         onClick={onClick}
         theme="dark"
         openKeys={openKeys}

package/src/components/PluginTestPage.tsx CHANGED Viewed

@@ -83,18 +83,14 @@ export const PluginTestPage: React.FC = () => {
                 textAlign: 'center',
                 padding: '48px',
                 border: '1px dashed #d9d9d9',
-                borderRadius: '8px',
-                backgroundColor: '#fafafa'
+                borderRadius: '8px'
               }}
             >
-              <h3>No Plugin Configurations Found</h3>
+              <h2>No Plugin Configurations Found</h2>
               <p>
                 No plugin applications with placeholder configurations were
-                found.
-              </p>
-              <p>
-                Make sure your shell configuration includes plugin apps with
-                placeholder IDs.
+                found. <br /> Make sure your shell configuration includes plugin
+                apps with placeholder IDs.
               </p>
             </div>
           )}

package/src/components/WelcomePage.tsx CHANGED Viewed

@@ -1,86 +1,136 @@
 import { useAppShell } from '@akinon/app-shell';
-import { Button, Card, Divider, Tag } from '@akinon/ui-react';
+import { Card, Divider, Tag } from '@akinon/ui-react';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { ShellConfig } from '@/types';
+// Component to display shared data from shell config
+const SharedDataDisplay: React.FC<{ data: Record<string, unknown> }> = ({
+  data
+}) => {
+  // Filter out default fields to show only custom data from config
+  const customData = { ...data };
+  delete customData.lng;
+  delete customData.username;
+  delete customData.searchParams;
+  return (
+    <pre
+      style={{
+        backgroundColor: '#1e1e1e',
+        color: '#d4d4d4',
+        padding: '16px',
+        borderRadius: '6px',
+        border: '1px solid #424b6b',
+        fontSize: '13px',
+        fontFamily:
+          '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+        lineHeight: '1.5',
+        overflow: 'auto',
+        margin: 0,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+      }}
+    >
+      {Object.keys(customData).length > 0
+        ? JSON.stringify(customData, null, 2)
+        : '// No custom data configured in shell.config.js\n// Add data to the "data" field to share it with your application'}
+    </pre>
+  );
+};
 export const WelcomePage: React.FC = () => {
-  const navigate = useNavigate();
   const { apps } = useAppShell();
-  const app = apps[0]; // Get the first (and likely only) app
+  const config: ShellConfig = (
+    window as unknown as { __SHELL_CONFIG__?: ShellConfig }
+  ).__SHELL_CONFIG__ as ShellConfig;
+  const data = config.data;
   return (
     <div>
-      <Card title="Application Configuration" style={{ marginBottom: '24px' }}>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: '16px'
-          }}
-        >
-          <div>
-            <strong>Application Name:</strong>
-            <p style={{ margin: '12px 0 4px 0' }}>
-              {app?.name || 'Development App'}
-            </p>
-          </div>
-          <div>
-            <strong>Application Type:</strong>
-            <p style={{ margin: '12px 0 4px 0' }}>
-              <Tag color={app?.type === 'full_page' ? 'blue' : 'green'}>
-                {app?.type === 'full_page' ? 'fullpage' : 'plugin'}
-              </Tag>
-            </p>
-          </div>
-          <div>
-            <strong>Development URL:</strong>
-            <p
-              style={{
-                margin: '12px 0 4px 0',
-                color: '#999',
-                fontFamily: 'monospace',
-                fontSize: '13px'
-              }}
-            >
-              {app?.url || 'http://localhost:4001'}
-            </p>
+      <Card title="Applications Configuration" className="mb-8">
+        {apps.length === 0 ? (
+          <p style={{ color: '#999' }}>No applications configured</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            {apps.map((app, index) => (
+              <div key={app.id} style={{
+                borderBottom: index < apps.length - 1 ? '1px solid #e0e0e0' : 'none',
+                paddingBottom: index < apps.length - 1 ? '20px' : '0'
+              }}>
+                <h4 style={{ margin: '0 0 16px 0' }}>
+                  {app.name} {apps.length > 1 && `(App ${index + 1})`}
+                </h4>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '16px'
+                  }}
+                >
+                  <div>
+                    <strong>Application Type:</strong>
+                    <p style={{ margin: '12px 0 4px 0' }}>
+                      <Tag color={app.type === 'full_page' ? 'blue' : 'green'}>
+                        {app.type === 'full_page' ? 'Full Page' : 'Plugin'}
+                      </Tag>
+                    </p>
+                  </div>
+                  <div>
+                    <strong>Development URL:</strong>
+                    <p
+                      style={{
+                        margin: '12px 0 4px 0',
+                        color: '#999',
+                        fontFamily: 'monospace',
+                        fontSize: '13px'
+                      }}
+                    >
+                      {app.url}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+            <div style={{ marginTop: '10px' }}>
+              <strong>Shell Theme:</strong>
+              <p style={{ margin: '12px 0 4px 0', color: '#999' }}>
+                {config.shell.theme}
+              </p>
+            </div>
           </div>
-          <div>
-            <strong>Shell Theme:</strong>
-            <p style={{ margin: '12px 0 4px 0', color: '#999' }}>omnitron</p>
-          </div>
-        </div>
+        )}
       </Card>
-      <Card title="Quick Actions" style={{ marginBottom: '24px' }}>
-        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-          <Button
-            type="primary"
-            onClick={() => navigate(`/external/${app?.slug}`)}
-          >
-            Launch Application
-          </Button>
-          {app?.type === 'plugin' && (
-            <Button onClick={() => navigate('/plugin-test')}>
-              Test Plugin Integration
-            </Button>
-          )}
-        </div>
+      <Card title="Shared Data" className="mb-8">
+        {data && <SharedDataDisplay data={data} />}
       </Card>
-      <Card title="Development Instructions">
+      <Card title="Development Instructions" className="mb-8">
         <div style={{ lineHeight: '1.6' }}>
           <h4 style={{ margin: '0 0 8px 0' }}>Getting Started:</h4>
           <ol style={{ paddingLeft: '20px' }}>
             <li>
-              Make sure your application is running at{' '}
-              <code>{app?.url || 'http://localhost:4001'}</code>
+              Make sure your application{apps.length > 1 ? 's are' : ' is'} running at{' '}
+              <code>{apps.length > 0 ? apps[0].url : 'http://localhost:4001'}</code>
+              {apps.length > 1 && (
+                <>
+                  {' and '}
+                  {apps.slice(1).map((a, i) => (
+                    <span key={a.id}>
+                      {i > 0 && ', '}
+                      <code>{a.url}</code>
+                    </span>
+                  ))}
+                </>
+              )}
             </li>
             <li>
               Click &quot;Launch Application&quot; to load your app in the shell
               environment
             </li>
-            {app?.type === 'plugin' && (
+            {apps.some(a => a.type === 'plugin') && (
               <li>
                 Use &quot;Test Plugin Integration&quot; to test your plugin in
                 different placeholder configurations
@@ -94,24 +144,309 @@ export const WelcomePage: React.FC = () => {
           <Divider />
           <h4 style={{ margin: '16px 0 8px 0' }}>
-            Application Type:{' '}
-            {app?.type === 'full_page' ? 'fullpage' : 'plugin'}
+            Application Types:{' '}
+            {apps.map((a, i) => (
+              <span key={a.id}>
+                {i > 0 && ', '}
+                {a.type === 'full_page' ? 'Full Page' : 'Plugin'}
+              </span>
+            ))}
           </h4>
-          {app?.type === 'full_page' ? (
+          {apps.some(a => a.type === 'full_page') && (
             <p style={{ margin: 0, color: '#666' }}>
-              Your fullpage application will render as complete pages within the
+              Full page applications render as complete pages within the
               shell environment, providing full control over the content area
               and routing.
             </p>
-          ) : (
-            <p style={{ margin: 0, color: '#666' }}>
-              Your plugin application will render within designated placeholders
+          )}
+          {apps.some(a => a.type === 'plugin') && (
+            <p style={{ margin: '8px 0 0 0', color: '#666' }}>
+              Plugin applications render within designated placeholders
               in the host application, providing component-level integration
               capabilities.
             </p>
           )}
         </div>
       </Card>
+      <Card title="Component Usage">
+        <div style={{ lineHeight: '1.6' }}>
+          <h4 style={{ margin: '0 0 8px 0' }}>@akinon/ui-* Components:</h4>
+          <p style={{ margin: '0 0 16px 0', color: '#999' }}>
+            This shell environment includes all Akinon UI components. You can
+            use them in your application by importing from the respective
+            packages.
+          </p>
+          <pre
+            style={{
+              backgroundColor: '#1e1e1e',
+              color: '#d4d4d4',
+              padding: '16px',
+              borderRadius: '6px',
+              border: '1px solid #424b6b',
+              fontSize: '13px',
+              fontFamily:
+                '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+              lineHeight: '1.5',
+              overflow: 'auto',
+              margin: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word'
+            }}
+          >
+            {`// Import components from @akinon/ui-react (main package)
+import { Button, Card, Input, Modal } from '@akinon/ui-react';
+// Or import from specific packages
+import { Button } from '@akinon/ui-button';
+import { Card } from '@akinon/ui-card';
+import { Input } from '@akinon/ui-input';
+import { Modal } from '@akinon/ui-modal';
+// Usage in your component
+function MyComponent() {
+  return (
+    <Card title="Example Card">
+      <Input placeholder="Enter text here" />
+      <Button type="primary">Submit</Button>
+    </Card>
+  );
+}`}
+          </pre>
+          <h3 style={{ margin: '16px 0 8px 0' }}>Available Components:</h3>
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Data Display
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Avatar', pkg: '@akinon/ui-avatar' },
+              { name: 'Badge', pkg: '@akinon/ui-badge' },
+              { name: 'Carousel', pkg: '@akinon/ui-carousel' },
+              { name: 'Image', pkg: '@akinon/ui-image' },
+              { name: 'List', pkg: '@akinon/ui-list' },
+              { name: 'Popover', pkg: '@akinon/ui-popover' },
+              { name: 'Table', pkg: '@akinon/ui-table' },
+              { name: 'Tag', pkg: '@akinon/ui-tag' },
+              { name: 'Tooltip', pkg: '@akinon/ui-tooltip' },
+              { name: 'Tree', pkg: '@akinon/ui-tree' },
+              { name: 'Typography', pkg: '@akinon/ui-typography' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Feedback
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Alert', pkg: '@akinon/ui-alert' },
+              { name: 'Drawer', pkg: '@akinon/ui-drawer' },
+              { name: 'Message', pkg: '@akinon/ui-message' },
+              { name: 'Modal', pkg: '@akinon/ui-modal' },
+              { name: 'Notification', pkg: '@akinon/ui-notification' },
+              { name: 'Progress', pkg: '@akinon/ui-progress' },
+              { name: 'Result', pkg: '@akinon/ui-result' },
+              { name: 'Skeleton', pkg: '@akinon/ui-skeleton' },
+              { name: 'Spin', pkg: '@akinon/ui-spin' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>Form</h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'AutoComplete', pkg: '@akinon/ui-auto-complete' },
+              { name: 'Button', pkg: '@akinon/ui-button' },
+              { name: 'Checkbox', pkg: '@akinon/ui-checkbox' },
+              { name: 'ColorPicker', pkg: '@akinon/ui-color-picker' },
+              { name: 'DatePicker', pkg: '@akinon/ui-date-picker' },
+              { name: 'Input', pkg: '@akinon/ui-input' },
+              { name: 'InputNumber', pkg: '@akinon/ui-input-number' },
+              { name: 'Radio', pkg: '@akinon/ui-radio' },
+              { name: 'Select', pkg: '@akinon/ui-select' },
+              { name: 'Slider', pkg: '@akinon/ui-slider' },
+              { name: 'Switch', pkg: '@akinon/ui-switch' },
+              { name: 'TimePicker', pkg: '@akinon/ui-time-picker' },
+              { name: 'Transfer', pkg: '@akinon/ui-transfer' },
+              { name: 'TreeSelect', pkg: '@akinon/ui-tree-select' },
+              { name: 'Upload', pkg: '@akinon/ui-upload' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>Layout</h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Card', pkg: '@akinon/ui-card' },
+              { name: 'Collapse', pkg: '@akinon/ui-collapse' },
+              { name: 'Divider', pkg: '@akinon/ui-divider' },
+              { name: 'Layout', pkg: '@akinon/ui-layout' },
+              { name: 'Space', pkg: '@akinon/ui-space' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+          <h4 style={{ margin: '24px 0 12px 0', fontSize: '16px' }}>
+            Navigation
+          </h4>
+          <div style={{ marginBottom: '20px' }}>
+            {[
+              { name: 'Breadcrumb', pkg: '@akinon/ui-breadcrumb' },
+              { name: 'Dropdown', pkg: '@akinon/ui-dropdown' },
+              { name: 'Menu', pkg: '@akinon/ui-menu' },
+              { name: 'Pagination', pkg: '@akinon/ui-pagination' },
+              { name: 'Segmented', pkg: '@akinon/ui-segmented' },
+              { name: 'Steps', pkg: '@akinon/ui-steps' },
+              { name: 'Tour', pkg: '@akinon/ui-tour' }
+            ].map((component, index, array) => (
+              <div
+                key={component.name}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  padding: '8px 0',
+                  borderBottom:
+                    index < array.length - 1 ? '1px solid #4c5679' : 'none'
+                }}
+              >
+                <span>{component.name}</span>
+                <code
+                  style={{
+                    backgroundColor: '#1e1e1e',
+                    color: '#d4d4d4',
+                    padding: '4px 8px',
+                    borderRadius: '4px',
+                    border: '1px solid #424b6b',
+                    fontSize: '12px',
+                    fontFamily:
+                      '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace'
+                  }}
+                >
+                  {component.pkg}
+                </code>
+              </div>
+            ))}
+          </div>
+          <p style={{ margin: '0', color: '#999', fontSize: '14px' }}>
+            <strong>Note:</strong> All components follow Ant Design API
+            conventions with Akinon-specific styling and theming. Check the
+            Storybook documentation for detailed usage examples and props.
+          </p>
+        </div>
+      </Card>
     </div>
   );
 };

package/src/providers.tsx CHANGED Viewed

@@ -17,16 +17,14 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
   const navigate = useNavigate();
   // Convert shell config to apps format for AppShellProvider
-  const apps: RegisteredApp[] = [
-    {
-      id: 1,
-      url: config.plugin.url,
-      slug: config.plugin.name.toLowerCase().replace(/\s+/g, '-'),
-      path: '', // Empty path for development like playground
-      type: config.plugin.type === 'fullpage' ? 'full_page' : 'plugin',
-      name: config.plugin.name
-    }
-  ];
+  const apps: RegisteredApp[] = config.apps.map((app, index) => ({
+    id: index + 1,
+    url: app.url,
+    slug: app.name.toLowerCase().replace(/\s+/g, '-'),
+    path: '', // Empty path for development like playground
+    type: app.type,
+    name: app.navTitle || app.name // Use navTitle if provided, otherwise use name
+  }));
   const navigation: ShellNavigation = {
     navigate: ({ id, path, external }: any) => {
@@ -41,7 +39,8 @@ export const Providers: React.FC<ProvidersProps> = ({ config, children }) => {
   const data = {
     lng: 'en',
     username: 'Developer',
-    searchParams: Object.fromEntries([...searchParams])
+    searchParams: Object.fromEntries([...searchParams]),
+    ...(config.data || {})
   };
   const defaultActions = {