refactor(sdk,plugins): use context-driven layout slots and CSS variables

BREAKING CHANGE: Layout slots (AppHeader, AppSidebar, AppDashboard) no longer accept props
- Layout slots now use context hooks (useAppContext, useAppLayout) directly
- Add getRoutes() method to RouterService interface for accessing plugin routes
- Navigation uses router.navigate() instead of React Router Link components
- Remove prop dependencies from PageLayout, Shell, SettingsPage components

feat(plugins): full theme support with CSS variables
- Update all plugins to use CSS variables (--text-primary, --card-bg, etc.)
- Plugins now properly respond to theme changes
- Custom page plugin fully themed
- User greeting, hello, and settings shortcut plugins use CSS variables

Benefits:
- Simpler component API - no prop drilling
- Better separation of concerns
- Plugins automatically respect active theme
- More flexible for theme plugin implementations

Author: binyamin555

examples/app/src/App.tsx

@@ -161,8 +161,8 @@ function AppWithRouter() {
 
                 {/* Routes */}
                 <Routes key={routeVersion}>
-                  <Route path="/" element={<Shell host={host} pluginRoutes={pluginRoutes} />} />
-                  <Route path="/settings" element={<SettingsPage host={host} pluginRoutes={pluginRoutes} />} />
+                  <Route path="/" element={<Shell host={host} />} />
+                  <Route path="/settings" element={<SettingsPage host={host} />} />
                   {/* Dynamic plugin routes */}
                   {Array.from(pluginRoutes.values()).map((route) => (
                     <Route key={route.path} path={route.path} element={<route.component />} />

examples/app/src/components/PageLayout.tsx

@@ -1,35 +1,32 @@
 import type { PluginHost } from '@react-pkl/core';
-import type { AppContext, PluginRoute } from 'example-sdk';
-import { useAppLayout, AppHeader, AppSidebar } from 'example-sdk';
-import { Link } from 'react-router-dom';
+import type { AppContext } from 'example-sdk';
+import { AppHeader, AppSidebar } from 'example-sdk';
 
 /**
  * PageLayout - Shared layout wrapper for all pages
  * 
  * Provides consistent header and sidebar layout with themeable components.
  * Used by both the home page (Shell) and settings page.
+ * 
+ * Layout slots use context directly - no need to pass props!
  */
 export function PageLayout({ 
   host, 
-  pluginRoutes, 
   currentPath, 
   children 
 }: { 
-  host: PluginHost<AppContext>; 
-  pluginRoutes: Map<string, PluginRoute>; 
+  host: PluginHost<AppContext>;
   currentPath: string;
   children: React.ReactNode;
 }) {
-  const layout = useAppLayout();
-
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', padding: 24 }}>
-      {/* Toolbar - themeable layout slot */}
-      <AppHeader toolbar={layout.toolbar} />
+      {/* Toolbar - themeable layout slot (uses context) */}
+      <AppHeader />
 
       <div style={{ display: 'flex', gap: 24 }}>
-        {/* Sidebar - themeable layout slot */}
-        <AppSidebar pluginRoutes={pluginRoutes} sidebarItems={layout.sidebar} Link={Link} />
+        {/* Sidebar - themeable layout slot (uses context) */}
+        <AppSidebar />
 
         {/* Main content */}
         <main style={{ flex: 1 }}>

examples/app/src/mock-context.ts

@@ -56,6 +56,9 @@ export function createMockAppContext(
         routes?.delete(path);
         onRouteChange?.();
       },
+      getRoutes() {
+        return routes || new Map();
+      },
     },
 
     user: {

examples/app/src/pages/SettingsPage.tsx

@@ -1,5 +1,5 @@
 import type { PluginHost } from '@react-pkl/core';
-import type { AppContext, PluginRoute } from 'example-sdk';
+import type { AppContext } from 'example-sdk';
 import { useAppLayout } from 'example-sdk';
 import { PageLayout } from '../components/PageLayout.js';
 import { ThemeSelector } from '../components/ThemeSelector.js';
@@ -10,15 +10,13 @@ import { ThemeSelector } from '../components/ThemeSelector.js';
  * Displays application settings including theme selection and any plugin-contributed
  * settings sections.
  */
-export function SettingsPage({ host, pluginRoutes }: { host: PluginHost<AppContext>; pluginRoutes: Map<string, PluginRoute> }) {
+export function SettingsPage({ host }: { host: PluginHost<AppContext> }) {
   const layout = useAppLayout();
 
   return (
-    <PageLayout host={host} pluginRoutes={pluginRoutes} currentPath="/settings">
+    <PageLayout host={host} currentPath="/settings">
       <h2 style={{ marginTop: 0, color: 'var(--text-primary, inherit)' }}>Application Settings</h2>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        {/* Theme Selection */}
-        <ThemeSelector host={host} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n        {/* Theme Selection */}\n        <ThemeSelector host={host} />
 
         <section style={{ padding: 16, background: 'var(--card-bg, #f8fafc)', borderRadius: 8 }}>
           <h3 style={{ marginTop: 0, fontSize: 16, color: 'var(--text-primary, inherit)' }}>General</h3>

examples/plugins/src/custom-page-plugin.tsx

@@ -48,41 +48,40 @@ export default definePlugin({
 
 function CustomPage() {
   const { router, notifications } = useAppContext();
-  const layout = useAppLayout();
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', padding: 24 }}>
       {/* Toolbar - includes plugin components from other plugins! */}
-      <AppHeader toolbar={layout.toolbar}/>
+      <AppHeader />
 
-      <div style={{ padding: '16px 0', marginBottom: 24, borderBottom: '2px solid #e2e8f0' }}>
-        <h1 style={{ margin: 0, fontSize: 28, color: '#1e293b' }}>
+      <div style={{ padding: '16px 0', marginBottom: 24, borderBottom: '2px solid var(--border-color, #e2e8f0)' }}>
+        <h1 style={{ margin: 0, fontSize: 28, color: 'var(--text-primary, #1e293b)' }}>
           📄 My Custom Page
         </h1>
-        <p style={{ margin: '8px 0 0', color: '#64748b' }}>
+        <p style={{ margin: '8px 0 0', color: 'var(--text-secondary, #64748b)' }}>
           This page was added by a plugin!
         </p>
       </div>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-        <section style={{ padding: 24, background: '#f8fafc', borderRadius: 12 }}>
-          <h2 style={{ marginTop: 0, fontSize: 20 }}>Welcome to the Custom Page</h2>
-          <p style={{ color: '#475569', lineHeight: 1.6 }}>
+        <section style={{ padding: 24, background: 'var(--card-bg, #f8fafc)', borderRadius: 12 }}>
+          <h2 style={{ marginTop: 0, fontSize: 20, color: 'var(--text-primary, inherit)' }}>Welcome to the Custom Page</h2>
+          <p style={{ color: 'var(--text-secondary, #475569)', lineHeight: 1.6 }}>
             This entire page was registered by the <strong>Custom Page Plugin</strong>.
             The plugin used the <code>context.router.registerRoute()</code> API during
             its activation phase.
           </p>
-          <p style={{ color: '#475569', lineHeight: 1.6 }}>
+          <p style={{ color: 'var(--text-secondary, #475569)', lineHeight: 1.6 }}>
             When the plugin is deactivated or removed, this route is automatically
             cleaned up and the page becomes inaccessible.
           </p>
         </section>
 
-        <section style={{ padding: 24, background: '#eff6ff', borderRadius: 12, border: '1px solid #bfdbfe' }}>
-          <h3 style={{ marginTop: 0, fontSize: 18, color: '#1e40af' }}>
+        <section style={{ padding: 24, background: 'var(--card-bg-secondary, #eff6ff)', borderRadius: 12, border: '1px solid var(--border-accent, #bfdbfe)' }}>
+          <h3 style={{ marginTop: 0, fontSize: 18, color: 'var(--text-accent, #1e40af)' }}>
             🎯 Plugin Capabilities Demo
           </h3>
-          <ul style={{ color: '#1e40af', lineHeight: 1.8 }}>
+          <ul style={{ color: 'var(--text-accent, #1e40af)', lineHeight: 1.8 }}>
             <li>Custom routes with full React components</li>
             <li>Access to the application context (router, notifications, etc.)</li>
             <li>Proper lifecycle management (activate/deactivate)</li>
@@ -91,8 +90,8 @@ function CustomPage() {
           </ul>
         </section>
 
-        <section style={{ padding: 24, background: '#fff', borderRadius: 12, border: '1px solid #e2e8f0' }}>
-          <h3 style={{ marginTop: 0, fontSize: 18 }}>Try These Actions</h3>
+        <section style={{ padding: 24, background: 'var(--bg-primary, #fff)', borderRadius: 12, border: '1px solid var(--border-color, #e2e8f0)' }}>
+          <h3 style={{ marginTop: 0, fontSize: 18, color: 'var(--text-primary, inherit)' }}>Try These Actions</h3>
           <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
             <button
               onClick={() => {
@@ -102,11 +101,11 @@ function CustomPage() {
               style={{
                 padding: '10px 20px',
                 borderRadius: 6,
-                border: '1px solid #cbd5e1',
-                background: '#f8fafc',
+                border: '1px solid var(--border-color, #cbd5e1)',
+                background: 'var(--card-bg, #f8fafc)',
                 cursor: 'pointer',
                 fontSize: 14,
-                color: '#334155',
+                color: 'var(--text-primary, #334155)',
               }}
             >
               🏠 Go to Home
@@ -119,11 +118,11 @@ function CustomPage() {
               style={{
                 padding: '10px 20px',
                 borderRadius: 6,
-                border: '1px solid #cbd5e1',
-                background: '#f8fafc',
+                border: '1px solid var(--border-color, #cbd5e1)',
+                background: 'var(--card-bg, #f8fafc)',
                 cursor: 'pointer',
                 fontSize: 14,
-                color: '#334155',
+                color: 'var(--text-primary, #334155)',
               }}
             >
               ⚙ Go to Settings
@@ -135,11 +134,11 @@ function CustomPage() {
               style={{
                 padding: '10px 20px',
                 borderRadius: 6,
-                border: '1px solid #3b82f6',
-                background: '#eff6ff',
+                border: '1px solid var(--border-accent, #3b82f6)',
+                background: 'var(--card-bg-secondary, #eff6ff)',
                 cursor: 'pointer',
                 fontSize: 14,
-                color: '#1e40af',
+                color: 'var(--text-accent, #1e40af)',
               }}
             >
               💬 Show Notification
@@ -182,21 +181,21 @@ function CustomPageSettings() {
   const { router } = useAppContext();
 
   return (
-    <section style={{ padding: 16, background: '#f8fafc', borderRadius: 8 }}>
-      <h3 style={{ marginTop: 0, fontSize: 16 }}>Custom Page Plugin</h3>
-      <p style={{ color: '#64748b', fontSize: 14, marginBottom: 12 }}>
+    <section style={{ padding: 16, background: 'var(--card-bg, #f8fafc)', borderRadius: 8 }}>
+      <h3 style={{ marginTop: 0, fontSize: 16, color: 'var(--text-primary, inherit)' }}>Custom Page Plugin</h3>
+      <p style={{ color: 'var(--text-secondary, #64748b)', fontSize: 14, marginBottom: 12 }}>
         This plugin adds a custom page to the application.
       </p>
       <button
         onClick={() => router.navigate('/my-custom-page')}
         style={{
           padding: '8px 16px',
           borderRadius: 6,
-          border: '1px solid #3b82f6',
-          background: '#eff6ff',
+          border: '1px solid var(--border-accent, #3b82f6)',
+          background: 'var(--card-bg-secondary, #eff6ff)',
           cursor: 'pointer',
           fontSize: 13,
-          color: '#1e40af',
+          color: 'var(--text-accent, #1e40af)',
         }}
       >
         📄 Visit Custom Page

examples/plugins/src/hello-plugin.tsx

@@ -40,10 +40,10 @@ function HelloToolbarItem() {
     <span
       style={{
         padding: '4px 10px',
-        background: '#e0f2fe',
+        background: 'var(--card-bg-secondary, #e0f2fe)',
         borderRadius: 4,
         fontSize: 13,
-        color: '#0369a1',
+        color: 'var(--link-color, #0369a1)',
       }}
     >
       👋 Hello Plugin

examples/plugins/src/theme-toggle-plugin.tsx

@@ -72,11 +72,11 @@ function SettingsToolbarButton() {
       style={{
         padding: '4px 10px',
         borderRadius: 4,
-        border: '1px solid #cbd5e1',
-        background: '#f8fafc',
+        border: '1px solid var(--border-color, #cbd5e1)',
+        background: 'var(--card-bg, #f8fafc)',
         cursor: 'pointer',
         fontSize: 13,
-        color: '#334155',
+        color: 'var(--text-primary, #334155)',
       }}
       title="Open Settings (Alt+,)"
     >

examples/plugins/src/user-greeting-plugin.tsx

@@ -34,7 +34,7 @@ function UserGreetingWidget() {
   if (!user) {
     return (
       <div style={cardStyle}>
-        <p style={{ margin: 0, color: '#64748b' }}>
+        <p style={{ margin: 0, color: 'var(--text-secondary, #64748b)' }}>
           Sign in to see your personalised greeting.
         </p>
       </div>
@@ -43,10 +43,10 @@ function UserGreetingWidget() {
 
   return (
     <div style={cardStyle}>
-      <h3 style={{ margin: '0 0 4px', fontSize: 16 }}>
+      <h3 style={{ margin: '0 0 4px', fontSize: 16, color: 'var(--text-primary, inherit)' }}>
         Welcome back, {user.name}!
       </h3>
-      <p style={{ margin: 0, fontSize: 13, color: '#64748b' }}>
+      <p style={{ margin: 0, fontSize: 13, color: 'var(--text-secondary, #64748b)' }}>
         {user.email} · {user.role}
       </p>
     </div>
@@ -56,6 +56,6 @@ function UserGreetingWidget() {
 const cardStyle: React.CSSProperties = {
   padding: '16px',
   borderRadius: 8,
-  border: '1px solid #e2e8f0',
-  background: '#fff',
+  border: '1px solid var(--border-color, #e2e8f0)',
+  background: 'var(--bg-primary, #fff)',
 };

examples/sdk/src/app-context.ts

@@ -38,6 +38,10 @@ export interface RouterService {
    * Unregister a route by path (rarely needed - auto-cleanup handles this).
    */
   unregisterRoute(path: string): void;
+  /**
+   * Get all registered plugin routes.
+   */
+  getRoutes(): Map<string, PluginRoute>;
 }
 
 export interface UserInfo {