npm - @object-ui/runner - Versions diffs - 0.3.0 - Mend

@object-ui/runner 0.3.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/CHANGELOG.md +33 -0
package/LICENSE +21 -0
package/dist/assets/AdvancedChartImpl-DZ0-Siqu.js +11 -0
package/dist/assets/BarChart-C_mJtBYc.js +69 -0
package/dist/assets/ChartImpl-BcbiBEtK.js +1 -0
package/dist/assets/KanbanImpl-APLTSaom.js +5 -0
package/dist/assets/index-BAf0tooB.css +1 -0
package/dist/assets/index-CW0j9o4j.js +16235 -0
package/dist/index.html +14 -0
package/index.html +13 -0
package/package.json +37 -0
package/postcss.config.js +6 -0
package/src/App.tsx +149 -0
package/src/LayoutRenderer.tsx +312 -0
package/src/index.css +76 -0
package/src/lib/MetadataLoader.ts +95 -0
package/src/lib/mockDataSource.ts +34 -0
package/src/main.tsx +10 -0
package/tailwind.config.js +63 -0
package/vite.config.ts +29 -0

package/dist/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object UI React Example</title>
+    <script type="module" crossorigin src="/assets/index-CW0j9o4j.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BAf0tooB.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Object UI React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "@object-ui/runner",
+  "private": false,
+  "version": "0.3.0",
+  "description": "Universal Object UI Application Runner",
+  "type": "module",
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.562.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0",
+    "@object-ui/plugin-kanban": "0.3.0",
+    "@object-ui/plugin-charts": "0.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+// Ensure this file is treated as a module
+export {};
+import { SchemaRenderer } from '@object-ui/react';
+import '@object-ui/components';
+import '@object-ui/plugin-kanban';
+import '@object-ui/plugin-charts';
+import { PageSchema, AppSchema } from '@object-ui/types';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { LayoutRenderer } from './LayoutRenderer';
+import { LocalBundleLoader, NetworkLoader, MetadataLoader } from './lib/MetadataLoader';
+export default function App() {
+  const [appConfig, setAppConfig] = useState<AppSchema | null>(null);
+  const [pageSchema, setPageSchema] = useState<PageSchema | null>(null);
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  // Initialize Loader Strategy
+  const loader = useMemo<MetadataLoader>(() => {
+    const params = new URLSearchParams(window.location.search);
+    const apiUrl = params.get('api');
+    // IF ?api=... is present, use Network Loader
+    if (apiUrl) {
+      console.log('🔌 Using Network Loader:', apiUrl);
+      return new NetworkLoader(apiUrl);
+    }
+    // ELSE use bundled files (Local Development)
+    console.log('📦 Using Local Bundle Loader');
+    return new LocalBundleLoader();
+  }, []);
+  // --- 1. Load Global Config (once) ---
+  useEffect(() => {
+    const loadApp = async () => {
+      try {
+        const config = await loader.loadAppConfig();
+        if (config) setAppConfig(config);
+      } catch (e) {
+        console.error("Error loading app config", e);
+      }
+    };
+    loadApp();
+  }, [loader]);
+  // --- 2. Route Handling ---
+  const handleNavigate = useCallback((to: string) => {
+    window.history.pushState({}, '', to);
+    setCurrentPath(to);
+    window.scrollTo(0, 0);
+  }, []);
+  useEffect(() => {
+    const onPopState = () => setCurrentPath(window.location.pathname);
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+  // --- 3. Page Loading Logic ---
+  useEffect(() => {
+    const loadPage = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const schema = await loader.loadPage(currentPath);
+        if (schema) {
+          setPageSchema(schema);
+        } else {
+          // If 404
+          setError(`Page not found: ${currentPath}`);
+          if (currentPath === '/') {
+             setPageSchema({
+               type: 'page',
+               title: 'Welcome to Object UI',
+               body: [{ type: 'div', className: "p-10 text-center text-muted-foreground", body: 'No index page found.' }]
+             } as any);
+          } else {
+             setPageSchema(null);
+          }
+        }
+      } catch (err) {
+        console.error(err);
+        setError("Failed to load page.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadPage();
+  }, [currentPath, loader]);
+  // --- Render ---
+  // 1. Initial App Boot: Show Full Loader (only if app config isn't ready)
+  if (!appConfig && loading) {
+    return (
+      <div className="flex h-screen items-center justify-center text-slate-400">
+         <div className="h-6 w-6 animate-spin rounded-full border-2 border-slate-200 border-t-slate-600 mr-2" />
+         Loading App...
+      </div>
+    );
+  }
+  // 2. Prepare Main Content (Page)
+  let mainContent;
+  if (loading) {
+     // Page transition loading - shows INSIDE layout
+     mainContent = (
+      <div className="flex flex-col items-center justify-center h-full text-slate-400 min-h-[50vh]">
+         <div className="h-6 w-6 animate-spin rounded-full border-2 border-slate-200 border-t-slate-600 mr-2" />
+         Loading Page...
+      </div>
+     );
+  } else if (error || !pageSchema) {
+     // Error State
+     mainContent = (
+      <div className="flex flex-col items-center justify-center h-full p-12 text-red-600">
+        <h1 className="text-2xl font-bold">404</h1>
+        <p className="mt-2 text-slate-600">{error || 'Page not found'}</p>
+        <button onClick={() => handleNavigate('/')} className="mt-4 text-blue-600 hover:underline">
+          Go Home
+        </button>
+      </div>
+     );
+  } else {
+     // Success State
+     mainContent = <SchemaRenderer schema={pageSchema} />;
+  }
+  // 3. Render Wrapper
+  if (appConfig) {
+    return (
+      <LayoutRenderer app={appConfig} currentPath={currentPath} onNavigate={handleNavigate}>
+        {mainContent}
+      </LayoutRenderer>
+    );
+  }
+  // Fallback if no appConfig but somehow done loading (e.g. error loading app.json)
+  return (
+    <div className="object-ui-app">
+      {mainContent}
+    </div>
+  );
+}

package/src/LayoutRenderer.tsx ADDED Viewed

@@ -0,0 +1,312 @@
+import React from 'react';
+import type { AppSchema } from '@object-ui/types';
+import * as LucideIcons from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuShortcut,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@object-ui/components';
+interface LayoutRendererProps {
+  app: AppSchema;
+  children: React.ReactNode;
+  currentPath?: string;
+  onNavigate?: (path: string) => void;
+}
+// Helper to resolve icon from string name (e.g. "bar-chart" -> "BarChart")
+const getIcon = (name?: string) => {
+  if (!name) return null;
+  // 1. Try direct match (e.g. "Home")
+  if ((LucideIcons as any)[name]) return (LucideIcons as any)[name];
+  // 2. Try PascalCase (e.g. "bar-chart" -> "BarChart")
+  const pascalName = name.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
+  if ((LucideIcons as any)[pascalName]) return (LucideIcons as any)[pascalName];
+  return LucideIcons.Circle; // Fallback
+};
+const NavItem = ({ item, currentPath, isSidebarOpen, onNavigate, level = 0 }: any) => {
+  const isActive = currentPath === item.path;
+  const hasActiveChild = item.children?.some((child: any) => child.path === currentPath);
+  const [isOpen, setIsOpen] = React.useState(hasActiveChild);
+  const Icon = getIcon(item.icon);
+  // Auto-expand if child is active
+  React.useEffect(() => {
+    if (hasActiveChild) setIsOpen(true);
+  }, [hasActiveChild]);
+  if (item.children && item.children.length > 0) {
+     return (
+        <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
+            <CollapsibleTrigger className={`flex w-full items-center justify-between py-2 text-sm font-medium rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground ${isSidebarOpen ? 'px-3' : 'justify-center px-2 cursor-pointer'}`}>
+                 <div className="flex items-center overflow-hidden">
+                    {Icon && <Icon className={`h-4 w-4 flex-shrink-0 ${isSidebarOpen ? 'mr-3' : ''}`} />}
+                    <span className={`whitespace-nowrap overflow-hidden transition-all duration-300 ${isSidebarOpen ? 'opacity-100 w-auto' : 'opacity-0 w-0 hidden'}`}>
+                        {item.label}
+                    </span>
+                 </div>
+                 {isSidebarOpen && (
+                     <LucideIcons.ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+                 )}
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-1 overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+                 {isSidebarOpen && item.children.map((child: any, idx: number) => (
+                     <NavItem
+                        key={idx}
+                        item={child}
+                        currentPath={currentPath}
+                        isSidebarOpen={isSidebarOpen}
+                        onNavigate={onNavigate}
+                        level={level + 1}
+                     />
+                 ))}
+            </CollapsibleContent>
+        </Collapsible>
+     );
+  }
+  return (
+    <a
+      href={item.path || '#'}
+      onClick={(e) => item.path && onNavigate(e, item.path)}
+      title={!isSidebarOpen ? item.label : undefined}
+      className={`flex items-center py-2 text-sm font-medium rounded-md transition-colors ${
+        isActive
+          ? 'bg-primary text-primary-foreground'
+          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+      } ${isSidebarOpen ? 'px-3' : 'justify-center px-2'} ${level > 0 && isSidebarOpen ? 'pl-10' : ''}`}
+    >
+      {Icon && <Icon className={`h-4 w-4 flex-shrink-0 ${isSidebarOpen ? 'mr-3' : ''} ${isActive ? 'text-primary-foreground' : 'text-muted-foreground group-hover:text-foreground'}`} />}
+      <span className={`whitespace-nowrap overflow-hidden transition-all duration-300 ${isSidebarOpen ? 'opacity-100 w-auto' : 'opacity-0 w-0 hidden'}`}>
+        {item.label}
+      </span>
+    </a>
+  );
+};
+export const LayoutRenderer = ({ app, children, currentPath, onNavigate }: LayoutRendererProps) => {
+  const layout = app.layout || 'sidebar';
+  const [isSidbarOpen, setSidebarOpen] = React.useState(true);
+  // Theme management
+  const [theme, setTheme] = React.useState<"light" | "dark">("light");
+  React.useEffect(() => {
+      const isDark = localStorage.getItem('theme') === 'dark' ||
+          (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      setTheme(isDark ? 'dark' : 'light');
+  }, []);
+  React.useEffect(() => {
+      if (theme === 'dark') {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('theme', 'dark');
+      } else {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('theme', 'light');
+      }
+  }, [theme]);
+  const toggleTheme = () => {
+      setTheme(prev => prev === 'dark' ? 'light' : 'dark');
+  };
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, path: string) => {
+    e.preventDefault();
+    if (onNavigate) {
+      onNavigate(path);
+    } else {
+      window.location.href = path;
+    }
+  };
+  if (layout === 'empty') {
+    return <main className={app.className}>{children}</main>;
+  }
+  const LogoIcon = app.logo && !app.logo.includes('/') && !app.logo.includes('.') ? getIcon(app.logo) : null;
+  return (
+    <div className={`flex min-h-screen w-full bg-slate-50/50 dark:bg-zinc-950 ${app.className || ''}`}>
+      {/* Sidebar - Only if configured */}
+      {layout === 'sidebar' && (
+        <aside
+            className={`
+                flex-shrink-0 border-r bg-background hidden md:flex flex-col h-screen sticky top-0 z-30 transition-all duration-300 ease-in-out
+                ${isSidbarOpen ? 'w-64' : 'w-[70px]'}
+            `}
+        >
+          <div className={`h-14 flex items-center border-b font-semibold text-lg tracking-tight transition-all ${isSidbarOpen ? 'px-6' : 'justify-center px-0'}`}>
+            {LogoIcon ? (
+              <LogoIcon className="h-6 w-6" />
+            ) : app.logo ? (
+              <img src={app.logo} alt={app.title} className="h-6 w-auto" />
+            ) : <LucideIcons.Box className="h-6 w-6" />}
+            <span className={`ml-2 whitespace-nowrap overflow-hidden transition-all duration-300 ${isSidbarOpen ? 'opacity-100 w-auto' : 'opacity-0 w-0 hidden'}`}>
+                {app.title || app.name || 'Object UI'}
+            </span>
+          </div>
+          <nav className="flex-1 p-2 space-y-1 overflow-y-auto overflow-x-hidden">
+            {app.menu?.map((item, index) => (
+              <NavItem
+                key={index}
+                item={item}
+                currentPath={currentPath}
+                isSidebarOpen={isSidbarOpen}
+                onNavigate={handleNavClick}
+              />
+            ))}
+          </nav>
+          {app.version && isSidbarOpen && (
+            <div className="p-4 border-t text-xs text-muted-foreground">
+              v{app.version}
+            </div>
+          )}
+        </aside>
+      )}
+      {/* Main Content Area */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        {/* Header - Always shown in sidebar/header layouts */}
+        <header className="h-14 flex items-center justify-between px-4 md:px-6 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b z-20 sticky top-0">
+           <div className="flex items-center gap-4">
+             {/* Toggle Sidebar Button */}
+             <button
+                onClick={() => setSidebarOpen(!isSidbarOpen)}
+                className="p-2 -ml-2 text-muted-foreground hover:bg-muted hover:text-foreground rounded-md transition-colors"
+             >
+                <LucideIcons.Menu className="h-5 w-5" />
+             </button>
+             {/* Breadcrumbs placeholder or Search */}
+             <div className="relative hidden md:block w-96">
+                <LucideIcons.Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  className="w-full h-9 pl-9 pr-4 rounded-md border border-input bg-background text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                />
+             </div>
+           </div>
+           <div className="flex items-center gap-2">
+             {/* Theme Toggle */}
+             <button
+               onClick={toggleTheme}
+               className="p-2 text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-muted"
+               title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+             >
+               {theme === 'dark' ? <LucideIcons.Sun className="h-5 w-5" /> : <LucideIcons.Moon className="h-5 w-5" />}
+             </button>
+             {/* Global Actions */}
+             {app.actions?.filter(a => a.type === 'button').map((action, i) => {
+                 const Icon = action.icon ? getIcon(action.icon) : null;
+                 return (
+                    <button
+                        key={i}
+                        className={action.variant === 'ghost' ? "relative p-2 text-muted-foreground hover:text-foreground transition-colors hover:bg-muted rounded-md" : "p-2"}
+                        title={action.label}
+                    >
+                        {Icon && <Icon className="h-5 w-5" />}
+                        {action.label && !action.icon && <span>{action.label}</span>}
+                    </button>
+                 );
+             })}
+             {/* Fallback Bell if no actions defined, or keep it as specific logic?
+                 The original code hardcoded a Bell button.
+                 The app.json defines a 'Bell' button action.
+                 So I should iterate app.actions for buttons as well.
+             */}
+             {/* Original Bell Logic (Hardcoded in user request? No, it was hardcoded in my previous edit, but app.json has it too)
+                 Let's check app.json. It has:
+                 { "type": "button", "variant": "ghost", "size": "icon", "icon": "Bell" }
+                 If I render actions generically, I don't need the hardcoded Bell.
+             */}
+             {(!app.actions || !app.actions.some(a => a.type === 'button')) && (
+                 <button className="relative p-2 text-muted-foreground hover:text-foreground transition-colors">
+                    <LucideIcons.Bell className="h-5 w-5" />
+                    <span className="absolute top-1.5 right-1.5 h-2 w-2 bg-red-600 rounded-full border-2 border-background"></span>
+                 </button>
+             )}
+             {app.actions?.filter(a => a.type === 'user').map((userAction, i) => (
+                 <DropdownMenu key={i}>
+                    <DropdownMenuTrigger asChild>
+                        <button className="relative h-8 w-8 rounded-full border bg-muted overflow-hidden focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:opacity-90 transition-opacity">
+                            <Avatar className="h-full w-full">
+                                <AvatarImage
+                                    src={userAction.avatar}
+                                    alt={userAction.label || 'User'}
+                                />
+                                <AvatarFallback>
+                                    {userAction.label?.substring(0, 2).toUpperCase() || 'JD'}
+                                </AvatarFallback>
+                            </Avatar>
+                        </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-56" align="end" forceMount>
+                        <DropdownMenuLabel className="font-normal">
+                            <div className="flex flex-col space-y-1">
+                                <p className="text-sm font-medium leading-none">{userAction.label || 'User'}</p>
+                                <p className="text-xs leading-none text-muted-foreground">
+                                    {userAction.description || 'user@example.com'}
+                                </p>
+                            </div>
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuGroup>
+                            {userAction.items?.map((item, idx) => {
+                                if (item.type === 'separator') {
+                                    return <DropdownMenuSeparator key={idx} />;
+                                }
+                                return (
+                                    <DropdownMenuItem key={idx} onSelect={() => {
+                                        if ((item as any).onClick) {
+                                            // Handle click logic
+                                            console.log('Clicked', item.label);
+                                        }
+                                    }}>
+                                        {item.label}
+                                        {(item as any).shortcut && (
+                                            <DropdownMenuShortcut>{(item as any).shortcut}</DropdownMenuShortcut>
+                                        )}
+                                    </DropdownMenuItem>
+                                );
+                            })}
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                 </DropdownMenu>
+             ))}
+           </div>
+        </header>
+        {/* Page Content */}
+        <main className="flex-1 overflow-auto p-4 md:p-8 scroll-smooth">
+          <div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500">
+             {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};

package/src/index.css ADDED Viewed

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}