@ramme-io/create-app 1.2.1 → 1.2.2

package/template/src/templates/docs/DocsLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Outlet, NavLink } from 'react-router-dom';
 import { docsSitemap } from './docs.sitemap';
-import { SitemapProvider } from '../../contexts/SitemapContext';
+import { SitemapProvider } from '../../engine/runtime/SitemapContext';
 import AppHeader from '../../components/AppHeader';
 import AppFooter from '../../components/AppFooter';
 import { Icon } from '@ramme-io/ui';
@@ -9,44 +9,55 @@ import PageTitleUpdater from '../../components/PageTitleUpdater';
 
 const DocsLayout: React.FC = () => {
   return (
-    // Add a wrapper div with the correct theme classes
-    <div className="bg-background text-foreground">
-      <div className="flex flex-col min-h-screen">
-        <AppHeader />
-        <main className="flex-grow">
-          <div className="bg-background border-b border-border sticky top-16 z-30">
-            <nav className="container mx-auto px-4">
-              <ul className="flex items-center gap-4 h-12">
-                {docsSitemap.map((item) => (
-                  <li key={item.id}>
-                    <NavLink
-                      to={item.path || ''}
-                      end={!item.children || item.children.length === 0}
-                      className={({ isActive }) =>
-                        `flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
-                          isActive
-                            ? 'bg-primary text-primary-foreground'
-                            : 'text-muted-foreground hover:bg-muted'
-                        }`
-                      }
-                    >
-                      {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-                      <span>{item.title}</span>
-                    </NavLink>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          </div>
-          <div className="container mx-auto p-4 md:p-8">
-            <SitemapProvider value={docsSitemap}>
-              <PageTitleUpdater />
+    <div className="bg-background text-foreground min-h-screen flex flex-col font-sans">
+      <AppHeader />
+      
+      <main className="flex-grow flex flex-col">
+        {/* --- TOP NAVIGATION BAR --- */}
+        <div className="bg-card border-b border-border sticky top-16 z-30 w-full">
+          <nav className="w-full px-6">
+            <ul className="flex items-center gap-6 h-12">
+              {docsSitemap.map((item) => (
+                <li key={item.id}>
+                  <NavLink
+                    to={item.path || ''}
+                    end={!item.children || item.children.length === 0}
+                    className={({ isActive }) =>
+                      `flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                        isActive
+                          ? 'bg-primary/10 text-primary'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                      }`
+                    }
+                  >
+                    {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
+                    <span>{item.title}</span>
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+
+        {/* --- MAIN CONTENT WRAPPER --- */}
+        <div className="w-full flex-1 flex flex-col">
+          <SitemapProvider value={docsSitemap}>
+            <PageTitleUpdater />
+            
+            {/* Page Content */}
+            <div className="flex-1">
               <Outlet />
-            </SitemapProvider>
-          </div>
-        </main>
-        <AppFooter />
-      </div>
+            </div>
+
+            {/* Footer - Now part of the content flow */}
+            <div className="border-t border-border mt-auto w-full bg-background">
+              <div className="max-w-7xl mx-auto px-6">
+                 <AppFooter />
+              </div>
+            </div>
+          </SitemapProvider>
+        </div>
+      </main>
     </div>
   );
 };

package/template/src/templates/docs/docs.sitemap.ts

@@ -1,34 +1,33 @@
-import { type SitemapEntry } from '../../core/sitemap-entry';
+import { type SitemapEntry } from '../../engine/types/sitemap-entry';
 
-// Component Imports from the main /pages directory
-import Dashboard from '../../pages/Dashboard';
-import AiChat from '../../pages/AiChat';
-import DataGridPage from '../../pages/DataGridPage';
-import AccountingLedgerPage from '../../pages/AccountingLedgerPage';
-import Styleguide from '../../pages/styleguide/Styleguide';
-import DataLayout from '../../layouts/DataLayout';
+// --- PAGE IMPORTS ---
+// ✅ Corrected: Kept named import for OverviewPage based on your index.ts export
+import { OverviewPage } from '../../features/overview'; 
+import AiChat from '../../features/ai/pages/AiChat';
 
-// Style Guide Section Imports
-import TemplatesSection from '../../pages/styleguide/sections/templates/TemplatesSection';
-import LayoutSection from '../../pages/styleguide/sections/layout/LayoutSection';
-import ThemingSection from '../../pages/styleguide/sections/theming/ThemingSection';
-import NavigationSection from '../../pages/styleguide/sections/navigation/NavigationSection';
-import TablesSection from '../../pages/styleguide/sections/tables/TablesSection';
-import ChartsSection from '../../pages/styleguide/sections/charts/ChartsSection';
-import ElementsSection from '../../pages/styleguide/sections/elements/ElementsSection';
-import FormsSection from '../../pages/styleguide/sections/forms/FormsSection';
-import FeedbackSection from '../../pages/styleguide/sections/feedback/FeedbackSection';
-import UtilitiesSection from '../../pages/styleguide/sections/utilities/UtilitiesSection';
-import ColorsSection from '../../pages/styleguide/sections/colors/ColorsSection';
-import IconsSection from '../../pages/styleguide/sections/icons/IconsSection';
+import Styleguide from '../../features/styleguide/Styleguide';
+
+// --- SECTION IMPORTS ---
+import TemplatesSection from '../../features/styleguide/sections/templates/TemplatesSection';
+import LayoutSection from '../../features/styleguide/sections/layout/LayoutSection';
+import ThemingSection from '../../features/styleguide/sections/theming/ThemingSection';
+import NavigationSection from '../../features/styleguide/sections/navigation/NavigationSection';
+import TablesSection from '../../features/styleguide/sections/tables/TablesSection';
+import ChartsSection from '../../features/styleguide/sections/charts/ChartsSection';
+import ElementsSection from '../../features/styleguide/sections/elements/ElementsSection';
+import FormsSection from '../../features/styleguide/sections/forms/FormsSection';
+import FeedbackSection from '../../features/styleguide/sections/feedback/FeedbackSection';
+import UtilitiesSection from '../../features/styleguide/sections/utilities/UtilitiesSection';
+import ColorsSection from '../../features/styleguide/sections/colors/ColorsSection';
+import IconsSection from '../../features/styleguide/sections/icons/IconsSection';
 
 export const docsSitemap: SitemapEntry[] = [
   {
     id: 'dashboard',
-    path: '', // Index route for the /docs/ layout
+    path: '', // Index route
     title: 'Dashboard',
     icon: 'home',
-    component: Dashboard,
+    component: OverviewPage,
   },
   {
     id: 'ai-chat',
@@ -37,17 +36,6 @@ export const docsSitemap: SitemapEntry[] = [
     icon: 'bot',
     component: AiChat,
   },
-  {
-    id: 'data',
-    path: 'data',
-    title: 'Data',
-    icon: 'database',
-    component: DataLayout,
-    children: [
-      { id: 'grid', path: 'grid', title: 'Data Grid', component: DataGridPage, icon: 'table' },
-      { id: 'ledger', path: 'ledger', title: 'Ledger', component: AccountingLedgerPage, icon: 'book-open' },
-    ],
-  },
   {
     id: 'styleguide',
     path: 'styleguide',

package/template/src/templates/settings/SettingsLayout.tsx

@@ -1,170 +1,110 @@
-/**
- * @file SettingsLayout.tsx
- * @repository ramme-app-starter
- * @description
- * Sidebar-Only layout. Moved TemplateSwitcher to SidebarContent.
- * Includes all previous fixes (href, icons, conditional branding, providers, etc.).
- * Confirmed handleResetData is included.
- */
-import React from 'react';
-import { Outlet, NavLink, Link } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
   Sidebar,
-  SidebarProvider,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarMenu,
-  SidebarMenuItem,
-  useSidebar,
-  Button,
-  Icon,
-  Avatar,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  useTheme,
-  type ThemeName,
+  type SidebarItem,
+  type IconName,
 } from '@ramme-io/ui';
 import { settingsSitemap } from './settings.sitemap';
 import rammeLogo from '../../assets/orange.png';
-import { useAuth } from '../../contexts/AuthContext';
-import { appManifest } from '../../config/navigation';
-import type { ManifestLink } from '../../core/manifest-types';
-import { SitemapProvider } from '../../contexts/SitemapContext';
+import { useAuth } from '../../features/auth/AuthContext';
+import { SitemapProvider } from '../../engine/runtime/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
-// --- Import TemplateSwitcher ---
 import TemplateSwitcher from '../../components/TemplateSwitcher';
 
-// NavLink wrapper - Correctly maps href to 'to'
-const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
-  ({ end, href, ...props }, ref) => {
-    return <NavLink ref={ref} to={href || ''} {...props} end={end} />;
-  },
-);
-SidebarNavLink.displayName = 'SidebarNavLink';
-
-// Sidebar Content Component
-const AppSidebarContent: React.FC = () => {
-  const { isOpen, toggle } = useSidebar();
-  const { theme, availableThemes, setTheme } = useTheme();
+const SettingsLayout: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const { user, logout } = useAuth();
-  const userNavLinks = appManifest.userMenu;
 
-  // --- handleResetData function remains here ---
+  // --- Actions ---
   const handleResetData = () => {
-    if (
-      window.confirm(
-        'Are you sure you want to reset all user data? This cannot be undone.',
-      )
-    ) {
+    if (window.confirm('Are you sure you want to reset all user data? This cannot be undone.')) {
       localStorage.removeItem('users');
       window.location.reload();
     }
   };
 
-  return (
-    <>
-      <SidebarHeader>
-        {/* Header now only contains Branding and Toggle */}
-        <div className={`flex items-center w-full h-full ${isOpen ? 'justify-between' : 'justify-end'}`}>
-          {/* Branding Link */}
-          <Link
-            to="/settings"
-            className={`flex items-center gap-2 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}
-            aria-hidden={!isOpen} tabIndex={!isOpen ? -1 : undefined}
-          >
-            <img src={rammeLogo} alt="Ramme Logo" className="h-7 w-auto" />
-            <span className="text-xl font-bold text-text">Ramme</span>
-          </Link>
-
-          {/* TemplateSwitcher REMOVED from here */}
+  // --- Data Mapping ---
+  // We combine the Sitemap navigation with the System Actions (Reset/Logout)
+  // so they all live harmoniously in the new "Zero Jank" sidebar list.
+  const sidebarItems: SidebarItem[] = useMemo(() => {
+    // 1. Navigation Items
+    const navItems: SidebarItem[] = settingsSitemap.map((item) => ({
+      id: item.id,
+      label: item.title,
+      icon: (item.icon as IconName) || 'settings',
+      href: item.path ? `/settings/${item.path}` : '/settings',
+    }));
 
-          {/* Toggle Button */}
-          <Button
-            variant="ghost" size="icon" onClick={toggle}
-            className="hidden md:flex"
-            aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-          >
-            <Icon name={isOpen ? 'panel-left-close' : 'panel-left-open'} />
-          </Button>
-        </div>
-      </SidebarHeader>
+    // 2. System Actions (Appended to bottom)
+    const actionItems: SidebarItem[] = [
+      {
+        id: 'action-reset',
+        label: 'Reset Data',
+        icon: 'refresh-cw' as IconName,
+        onClick: handleResetData,
+      },
+      {
+        id: 'action-logout',
+        label: 'Logout',
+        icon: 'log-out' as IconName,
+        onClick: logout,
+      }
+    ];
 
-      <SidebarContent>
-        {/* --- MOVED TemplateSwitcher HERE --- */}
-        {/* Only visible when sidebar is open */}
-        <div className={`mb-4 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}>
-             <TemplateSwitcher />
-        </div>
+    return [...navItems, ...actionItems];
+  }, [logout]);
 
-        {/* --- Sitemap Menu --- */}
-        <SidebarMenu>
-          {settingsSitemap.map((item) => (
-            <SidebarMenuItem
-              key={item.id} as={SidebarNavLink}
-              href={item.path ? `/settings/${item.path}` : '/settings'} end
-              icon={item.icon ? <Icon name={item.icon} /> : undefined}
-              tooltip={item.title}
-            >
-              {item.title}
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarContent>
+  // Determine active item (only for nav items, actions don't stay active)
+  const activeItemId = useMemo(() => {
+    const active = sidebarItems.find(item => 
+      item.href && item.href !== '/settings' && location.pathname.startsWith(item.href)
+    );
+    return active?.id || (location.pathname === '/settings' ? sidebarItems[0]?.id : undefined);
+  }, [location.pathname, sidebarItems]);
 
-      <SidebarFooter>
-         {user && (
-           <Menu position="top-right" trigger={
-             <button className="flex items-center gap-3 w-full text-left rounded-md p-2 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary">
-               <Avatar name={user.name} size="sm" />
-               <div className={`flex-1 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}>
-                 <p className="font-semibold text-sm text-text">{user.name}</p>
-                 <p className="text-xs text-muted-foreground">{user.email}</p>
-               </div>
-             </button>
-           }>
-            {/* User Menu Content */}
-            {userNavLinks.map((link: ManifestLink) => (
-              <MenuItem key={link.id} asChild icon={link.icon ? <Icon name={link.icon} /> : undefined}>
-                <Link to={link.path}>{link.title}</Link>
-              </MenuItem>
-            ))}
-            <MenuDivider />
-            {availableThemes.map((themeName: string) => (
-              <MenuItem key={themeName} onClick={() => setTheme(themeName as ThemeName)}>
-                {themeName.charAt(0).toUpperCase() + themeName.slice(1)}
-              </MenuItem>
-            ))}
-            <MenuDivider />
-            {/* Calls handleResetData */}
-            <MenuItem onClick={handleResetData} icon={<Icon name="refresh-cw" />}> Reset Data </MenuItem>
-            {/* Calls logout */}
-            <MenuItem onClick={logout} icon={<Icon name="log-out" />}> Logout </MenuItem>
-          </Menu>
-         )}
-      </SidebarFooter>
-    </>
-  );
-};
-
-// Main layout component
-const SettingsLayout: React.FC = () => {
   return (
     <SitemapProvider value={settingsSitemap}>
       <PageTitleUpdater />
-      <SidebarProvider>
-        <div className="flex h-screen bg-background text-foreground">
-          <Sidebar>
-            <AppSidebarContent />
-          </Sidebar>
-          <div className="flex flex-col flex-1 overflow-y-auto">
-            <main className="p-8">
-              <Outlet />
-            </main>
-          </div>
+      
+      <div className="flex h-screen bg-background text-foreground">
+        <Sidebar
+          className="relative border-border"
+          items={sidebarItems}
+          activeItemId={activeItemId}
+          // Handle both Navigation (href) and Actions (onClick)
+          onNavigate={(item) => {
+            if (item.href) {
+              navigate(item.href);
+            }
+            // item.onClick is handled automatically by the Sidebar component if present
+          }}
+          user={user ? {
+            name: user.name,
+            email: user.email,
+            avatarUrl: undefined // Add avatar URL if available in user object
+          } : undefined}
+          logo={
+            <div className="flex items-center gap-2 px-2">
+              <img src={rammeLogo} alt="Ramme" className="h-7 w-auto" />
+              <span className="text-xl font-bold">Ramme</span>
+            </div>
+          }
+          // Inject the TemplateSwitcher into the footer slot (above the user profile)
+          footerSlot={
+            <div className="mb-2">
+              <TemplateSwitcher />
+            </div>
+          }
+        />
+
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <main className="flex-1 overflow-y-auto p-8 bg-muted/20">
+            <Outlet />
+          </main>
         </div>
-      </SidebarProvider>
+      </div>
     </SitemapProvider>
   );
 };

package/template/src/templates/settings/settings.sitemap.ts

@@ -5,19 +5,19 @@
  * Defines the Information Architecture (IA) for the "Settings" layout.
  * Imports components from the /pages/settings/ directory.
  */
-import type { SitemapEntry } from '../../core/sitemap-entry';
+import type { SitemapEntry } from '../../engine/types/sitemap-entry';
 
 // --- 1. Import from the new /pages/settings/ directory ---
-import ProfilePage from '../../pages/settings/ProfilePage';
-import BillingPage from '../../pages/settings/BillingPage';
-import TeamPage from '../../pages/settings/TeamPage';
+import ProfilePage from '../../features/settings/pages/ProfilePage';
+import BillingPage from '../../features/settings/pages/BillingPage';
+import TeamPage from '../../features/settings/pages/TeamPage';
 
 // --- 2. Export with the correct name ---
 export const settingsSitemap: SitemapEntry[] = [
   {
-    id: 'settings.profile',
+    id: 'profile',
     path: 'profile',
-    title: 'Profile',
+    title: 'My Profile',
     icon: 'user',
     component: ProfilePage,
   },

package/template/vite.config.ts

@@ -2,22 +2,25 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
+      
+      // ✅ FIX: Go up 2 levels to find the sibling 'ramme-ui' folder
+      '@ramme-io/ui': path.resolve(__dirname, '../../ramme-ui/src'),
     },
   },
-  // ADD THIS SECTION to ensure the linked dependency is correctly
-  // processed and watched for changes by the Vite dev server.
-  optimizeDeps: {
-    include: ['@ramme-io/ui'],
-  },
-  build: {
-    commonjsOptions: {
-      include: [/@ramme\/ui/, /node_modules/],
+  // ✅ CRITICAL: Allow Vite to serve files outside the current project folder
+  server: {
+    fs: {
+      allow: [
+        // Allow serving files from the project root
+        '.',
+        // Allow serving files from the sibling UI library
+        '../../ramme-ui', 
+      ],
     },
   },
 });

package/template/src/components/LocalSideNav.tsx

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { Icon, type IconName } from '@ramme-io/ui';
-import { motion, AnimatePresence } from 'framer-motion';
-
-export interface NavItem {
-  label: string;
-  href: string;
-  icon?: IconName;
-  children?: NavItem[];
-}
-
-interface LocalSideNavProps {
-  navItems: NavItem[];
-  className?: string;
-  onLinkClick?: () => void; // 1. Add the optional prop
-}
-
-const LocalSideNav: React.FC<LocalSideNavProps> = ({ navItems, className, onLinkClick }) => { // 2. Destructure prop
-  const location = useLocation();
-  const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
-
-  useEffect(() => {
-    const currentParent = navItems.find(item => 
-      item.children?.some(child => location.pathname === child.href)
-    );
-    if (currentParent) {
-      setExpandedItems(prev => ({ ...prev, [currentParent.href]: true }));
-    }
-  }, [location.pathname, navItems]);
-
-  const handleToggle = (href: string) => {
-    setExpandedItems(prev => ({ ...prev, [href]: !prev[href] }));
-  };
-  
-  const childNavLinkClasses = ({ isActive }: { isActive: boolean }) =>
-    `flex items-center gap-2 text-sm transition-colors duration-200 py-1 ${
-      isActive
-        ? 'text-primary font-medium'
-        : 'text-muted-foreground hover:text-text'
-    }`;
-  
-  const renderNavLinks = (items: NavItem[]) => {
-    return items.map(item => {
-      const isExpanded = !!expandedItems[item.href];
-
-      if (item.children) {
-        return (
-          //Section link
-          <li key={item.href}>
-            <button
-              onClick={() => handleToggle(item.href)}
-              className="flex w-full items-center justify-between gap-2 py-1 font-normal text-text transition-colors duration-200 hover:text-primary"
-            >
-              <span className="flex items-center gap-2">
-                {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-                <span className="text-md">{item.label}</span>
-              </span>
-              <Icon
-                name="chevron-right"
-                className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
-              />
-            </button>
-            <AnimatePresence initial={false}>
-              {isExpanded && (
-                <motion.ul
-                  key="content"
-                  initial="collapsed"
-                  animate="open"
-                  exit="collapsed"
-                  variants={{
-                    open: { opacity: 1, height: 'auto' },
-                    collapsed: { opacity: 0, height: 0 },
-                  }}
-                  transition={{ duration: 0.3, ease: 'easeInOut' }}
-                  className="space-y-1 overflow-hidden border-l border-border pl-5 mt-1 ml-1"
-                >
-                  {item.children.map(child => (
-                    <li key={child.href}>
-                      <NavLink
-                        to={child.href}
-                        className={childNavLinkClasses}
-                        onClick={onLinkClick} // 3. Add onClick to child NavLink
-                      >
-                        {child.label}
-                      </NavLink>
-                    </li>
-                  ))}
-                </motion.ul>
-              )}
-            </AnimatePresence>
-          </li>
-        );
-      }
-      
-      return (
-        <li key={item.href}>
-          <NavLink
-            to={item.href}
-            className="flex items-center gap-2 py-1 text-lg font-semibold"
-            onClick={onLinkClick} // 3. Add onClick to top-level NavLink
-          >
-            {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-            {item.label}
-          </NavLink>
-        </li>
-      );
-    });
-  };
-
-  return (
-    <nav className={`w-full ${className || ''}`}>
-      <ul className="space-y-1">
-        {renderNavLinks(navItems)}
-      </ul>
-    </nav>
-  );
-};
-
-export default LocalSideNav;