@stevederico/skateboard-ui 0.9.8 → 1.0.2

package/App.jsx

@@ -0,0 +1,75 @@
+import { createRoot } from 'react-dom/client';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+  useNavigate,
+  useLocation,
+} from 'react-router-dom';
+import { useEffect } from 'react';
+import Layout from './Layout.jsx';
+import LandingView from './LandingView.jsx';
+import TextView from './TextView.jsx';
+import SignUpView from './SignUpView.jsx';
+import SignInView from './SignInView.jsx';
+import SignOutView from './SignOutView.jsx';
+import PaymentView from './PaymentView.jsx';
+import SettingsView from './SettingsView.jsx';
+import NotFound from './NotFound.jsx';
+import ProtectedRoute from './ProtectedRoute.jsx';
+import { useAppSetup, initializeUtilities } from './Utilities.js';
+import { ContextProvider, getState } from './Context.jsx';
+
+function App({ constants, appRoutes, defaultRoute }) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { dispatch } = getState();
+
+  useEffect(() => {
+    document.title = constants.appName;
+  }, [constants.appName]);
+
+  useAppSetup(location, navigate, dispatch);
+
+  return (
+    <Routes>
+      <Route element={<Layout />}>
+        <Route path="/console" element={<Navigate to="/app" replace />} />
+        <Route path="/app" element={<ProtectedRoute />}>
+          <Route index element={<Navigate to={defaultRoute} replace />} />
+          {appRoutes.map(({ path, element }) => (
+            <Route key={path} path={path} element={element} />
+          ))}
+          <Route path="settings" element={<SettingsView />} />
+          <Route path="payment" element={<PaymentView />} />
+        </Route>
+      </Route>
+      <Route path="/" element={<LandingView />} />
+      <Route path="/signin" element={<SignInView />} />
+      <Route path="/signup" element={<SignUpView />} />
+      <Route path="/signout" element={<SignOutView />} />
+      <Route path="/terms" element={<TextView details={constants.termsOfService} />} />
+      <Route path="/privacy" element={<TextView details={constants.privacyPolicy} />} />
+      <Route path="/eula" element={<TextView details={constants.EULA} />} />
+      <Route path="/subs" element={<TextView details={constants.subscriptionDetails} />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}
+
+export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home' }) {
+  // Initialize utilities with constants
+  initializeUtilities(constants);
+
+  const container = document.getElementById('root');
+  const root = createRoot(container);
+
+  root.render(
+    <ContextProvider constants={constants}>
+      <Router>
+        <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
+      </Router>
+    </ContextProvider>
+  );
+}

package/CHANGELOG.md

@@ -1,4 +1,22 @@
 # CHANGELOG
+1.0.1
+
+  Remove Vite build plugins
+
+1.0.0
+
+  Add API request utilities
+  Add constants validation
+  Add React hooks
+  Export App component
+  Export Context component
+  Export styles.css
+
+0.9.9
+
+  Add optional chaining safeguards
+  Fix features rendering logic
+
 0.9.8
 
   Add ProtectedRoute component

package/Context.jsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useReducer } from 'react';
+
+const context = createContext();
+
+export function ContextProvider({ children, constants }) {
+  const getStorageKey = () => {
+    const appName = constants.appName || 'skateboard';
+    return `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
+  };
+
+  const getInitialUser = () => {
+    try {
+      const storageKey = getStorageKey();
+      const storedUser = localStorage.getItem(storageKey);
+      if (!storedUser || storedUser === "undefined") return null;
+      return JSON.parse(storedUser);
+    } catch (e) {
+      return null;
+    }
+  };
+
+  const initialState = { user: getInitialUser() };
+
+  function reducer(state, action) {
+    try {
+      const storageKey = getStorageKey();
+      const appName = constants.appName || 'skateboard';
+      const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
+
+      switch (action.type) {
+        case 'SET_USER':
+          localStorage.setItem(storageKey, JSON.stringify(action.payload));
+          return { ...state, user: action.payload };
+        case 'CLEAR_USER':
+          localStorage.removeItem(storageKey);
+          localStorage.removeItem(csrfKey);
+          return { ...state, user: null };
+        default:
+          return state;
+      }
+    } catch (e) {
+      return state;
+    }
+  }
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <context.Provider value={{ state, dispatch }}>
+      {children}
+    </context.Provider>
+  );
+}
+
+export function getState() {
+  return useContext(context);
+}

package/LandingView.jsx

@@ -252,11 +252,11 @@ export default function LandingView() {
         {/* Features Section */}
         <section id="features" className="bg-slate-100 dark:bg-gray-800 py-12 md:py-20 transition-colors duration-300">
           <div className="max-w-7xl mx-auto px-6">
-            <h2 className="text-center text-4xl md:text-5xl font-bold mb-16 text-gray-900 dark:text-white">{constants.features.title}</h2>
-            
+            <h2 className="text-center text-4xl md:text-5xl font-bold mb-16 text-gray-900 dark:text-white">{constants.features?.title || 'Features'}</h2>
+
             {/* Feature Grid */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-              {constants.features.items.map((feature, index) => (
+              {(constants.features?.items || []).map((feature, index) => (
                 <div key={index} className="bg-white dark:bg-gray-700 rounded-2xl p-8 shadow-lg text-center transition-colors duration-300">
                   <div className="text-4xl mb-6">{feature.icon}</div>
                   <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">{feature.title}</h3>
@@ -296,7 +296,7 @@ export default function LandingView() {
                   >{constants.stripeProducts[0]?.price || '$5.00'}</div>
                   <p className="text-gray-600 dark:text-gray-300 mb-8">per month</p>
                   <ul className="text-left space-y-4 mb-8">
-                    {constants.features.items.map((feature, index) => (
+                    {(constants.features?.items || []).map((feature, index) => (
                       <li key={index} className="flex items-center">
                         ✅ {feature.title}
                       </li>

package/Utilities.js

@@ -1,11 +1,24 @@
-import { useEffect } from 'react';
-import constants from "@/constants.json";
+import { useEffect, useState } from 'react';
+
+// Constants will be initialized by the app shell
+let _constants = null;
+
+export function initializeUtilities(constants) {
+    _constants = constants;
+}
+
+function getConstants() {
+    if (!_constants) {
+        throw new Error('Utilities not initialized. Call initializeUtilities(constants) first.');
+    }
+    return _constants;
+}
 
 export function getCookie(name) {
     // For token cookies, use app-specific name
     let cookieName = name;
     if (name === 'token') {
-        const appName = constants.appName || 'skateboard';
+        const appName = getConstants().appName || 'skateboard';
         cookieName = `${appName.toLowerCase().replace(/\s+/g, '-')}_token`;
     }
 
@@ -16,18 +29,18 @@ export function getCookie(name) {
 }
 
 export function getCSRFToken() {
-    const appName = constants.appName || 'skateboard';
+    const appName = getConstants().appName || 'skateboard';
     const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
     return localStorage.getItem(csrfKey);
 }
 
 export function getAppKey(suffix) {
-    const appName = constants.appName || 'skateboard';
+    const appName = getConstants().appName || 'skateboard';
     return `${appName.toLowerCase().replace(/\s+/g, '-')}_${suffix}`;
 }
 
 export function isAuthenticated() {
-    if (constants.noLogin === true) {
+    if (getConstants().noLogin === true) {
         return true;
     }
     const csrfKey = getAppKey('csrf');
@@ -35,7 +48,7 @@ export function isAuthenticated() {
 }
 
 export function getBackendURL() {
-    let result = import.meta.env.DEV ? constants.devBackendURL : constants.backendURL;
+    let result = import.meta.env.DEV ? getConstants().devBackendURL : getConstants().backendURL;
     return result
 }
 
@@ -50,7 +63,7 @@ export function isAppMode() {
 
 export async function getCurrentUser() {
 
-    if (constants.noLogin == true) {
+    if (getConstants().noLogin == true) {
         return {}
     }
 
@@ -78,11 +91,11 @@ export async function getCurrentUser() {
 }
 
 export async function isSubscriber() {
-    if (constants.noLogin == true) {
+    if (getConstants().noLogin == true) {
         return false
     }
 
-    try {
+    try{
         const csrfToken = getCSRFToken();
         const response = await fetch(`${getBackendURL()}/isSubscriber`, {
             method: 'GET',
@@ -150,7 +163,7 @@ export async function showCheckout(email, productIndex = 0) {
         const csrfToken = getCSRFToken();
 
         const params = {
-            lookup_key: constants.stripeProducts[productIndex].lookup_key,
+            lookup_key: getConstants().stripeProducts[productIndex].lookup_key,
             email: email
         };
 
@@ -194,7 +207,7 @@ const FREE_LIMITS = {
 };
 
 export async function getRemainingUsage(action) {
-    if (constants.noLogin === true) {
+    if (getConstants().noLogin === true) {
         return { remaining: -1, total: -1, isSubscriber: true };
     }
 
@@ -223,7 +236,7 @@ export async function getRemainingUsage(action) {
 }
 
 export async function trackUsage(action) {
-    if (constants.noLogin === true) {
+    if (getConstants().noLogin === true) {
         return { remaining: -1, total: -1, isSubscriber: true };
     }
 
@@ -259,7 +272,7 @@ export async function trackUsage(action) {
 
 export async function showUpgradeSheet(upgradeSheetRef) {
     // Check subscription from user data in localStorage instead of API call
-    const appName = constants.appName || 'skateboard';
+    const appName = getConstants().appName || 'skateboard';
     const storageKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
     const storedUser = localStorage.getItem(storageKey);
 
@@ -384,7 +397,7 @@ export function timestampToString(input, format = "DOB") {
 
 export function useAppSetup(location) {
     useEffect(() => {
-        document.title = constants.appName;
+        document.title = getConstants().appName;
         if (!location.pathname.toLowerCase().includes('app')) {
             document.documentElement.classList.remove('dark');
             document.body.classList.remove('dark');
@@ -392,3 +405,417 @@ export function useAppSetup(location) {
     }, [location.pathname]);
 }
 
+// ===== API REQUEST UTILITIES =====
+
+/**
+ * Unified API request utility
+ * Handles credentials, CSRF tokens, 401 redirects, and error handling
+ *
+ * @param {string} endpoint - API endpoint (e.g., '/deals')
+ * @param {RequestInit} options - Fetch options (method, body, headers, etc.)
+ * @returns {Promise<any>} - Parsed JSON response
+ */
+export async function apiRequest(endpoint, options = {}) {
+    const csrfToken = getCSRFToken();
+    const needsCSRF = ['POST', 'PUT', 'DELETE', 'PATCH'].includes(
+        (options.method || 'GET').toUpperCase()
+    );
+
+    const response = await fetch(`${getBackendURL()}${endpoint}`, {
+        ...options,
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+            ...(needsCSRF && csrfToken && { 'X-CSRF-Token': csrfToken }),
+            ...options.headers
+        }
+    });
+
+    // Handle 401 (redirect to signout)
+    if (response.status === 401) {
+        window.location.href = '/signout';
+        throw new Error('Unauthorized - Redirecting to Sign Out');
+    }
+
+    // Handle other errors
+    if (!response.ok) {
+        throw new Error(`Request failed: ${response.status} ${response.statusText}`);
+    }
+
+    return response.json();
+}
+
+/**
+ * API request with query parameters
+ *
+ * @param {string} endpoint - API endpoint
+ * @param {object} params - Query parameters
+ * @param {RequestInit} options - Fetch options
+ * @returns {Promise<any>}
+ */
+export async function apiRequestWithParams(endpoint, params = {}, options = {}) {
+    const queryString = new URLSearchParams(params).toString();
+    const url = queryString ? `${endpoint}?${queryString}` : endpoint;
+    return apiRequest(url, options);
+}
+
+// ===== CONSTANTS VALIDATION =====
+
+/**
+ * Validate constants.json has all required fields
+ * @param {object} constants - Constants object to validate
+ * @returns {object} - Same constants if valid
+ * @throws {Error} - If required fields are missing
+ */
+export function validateConstants(constants) {
+    const required = [
+        'appName',
+        'appIcon',
+        'tagline',
+        'cta',
+        'backendURL',
+        'devBackendURL',
+        'features.title',
+        'features.items',
+        'companyName',
+        'companyWebsite',
+        'companyEmail',
+    ];
+
+    const missing = required.filter(key => {
+        const value = key.split('.').reduce((obj, k) => obj?.[k], constants);
+        return !value;
+    });
+
+    if (missing.length > 0) {
+        throw new Error(`Missing required constants: ${missing.join(', ')}`);
+    }
+
+    return constants;
+}
+
+
+// ===== REACT HOOKS =====
+
+/**
+ * Standard list data fetcher with optional sorting
+ * @param {string} endpoint - API endpoint to fetch from
+ * @param {function} sortFn - Optional sort function for results
+ * @returns {object} - { data, loading, error, refetch }
+ */
+export function useListData(endpoint, sortFn = null) {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            const result = await apiRequest(endpoint);
+            const sorted = sortFn ? result.sort(sortFn) : result;
+            setData(sorted);
+            setError(null);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, [endpoint]);
+
+    return { data, loading, error, refetch: fetchData };
+}
+
+/**
+ * Standard form state management
+ * @param {object} initialValues - Initial form values
+ * @param {function} onSubmit - Submit handler function
+ * @returns {object} - { values, handleChange, handleSubmit, reset, submitting, error }
+ */
+export function useForm(initialValues, onSubmit) {
+    const [values, setValues] = useState(initialValues);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+
+    const handleChange = (field) => (e) => {
+        setValues(prev => ({ ...prev, [field]: e.target.value }));
+    };
+
+    const handleSubmit = async (e) => {
+        e?.preventDefault();
+        setSubmitting(true);
+        setError(null);
+        try {
+            await onSubmit(values);
+            setValues(initialValues);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    const reset = () => setValues(initialValues);
+
+    return { values, handleChange, handleSubmit, reset, submitting, error };
+}
+
+// ===== VITE BUILD CONFIG UTILITIES =====
+
+/**
+ * Custom logger plugin for Vite
+ */
+export const customLoggerPlugin = () => {
+    return {
+        name: 'custom-logger',
+        configureServer(server) {
+            server.printUrls = () => {
+                console.log(`🖥️  React is running on http://localhost:${server.config.server.port || 5173}`);
+            };
+        }
+    };
+};
+
+/**
+ * HTML replacement plugin
+ * Replaces {{APP_NAME}}, {{TAGLINE}}, {{COMPANY_WEBSITE}} in index.html
+ */
+export const htmlReplacePlugin = () => {
+    return {
+        name: 'html-replace',
+        async transformIndexHtml(html) {
+            const { readFileSync } = await import('node:fs');
+            const constants = JSON.parse(readFileSync('src/constants.json', 'utf8'));
+
+            return html
+                .replace(/{{APP_NAME}}/g, constants.appName)
+                .replace(/{{TAGLINE}}/g, constants.tagline)
+                .replace(/{{COMPANY_WEBSITE}}/g, constants.companyWebsite);
+        }
+    };
+};
+
+/**
+ * Dynamic robots.txt plugin
+ */
+export const dynamicRobotsPlugin = () => {
+    return {
+        name: 'dynamic-robots',
+        async generateBundle() {
+            const { readFileSync } = await import('node:fs');
+            const constants = JSON.parse(readFileSync('src/constants.json', 'utf8'));
+            const website = constants.companyWebsite.startsWith('http')
+                ? constants.companyWebsite
+                : `https://${constants.companyWebsite}`;
+
+            const robotsContent = `User-agent: Googlebot
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: Bingbot
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: Applebot
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: facebookexternalhit
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: Facebot
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: Twitterbot
+Disallow: /app/
+Disallow: /console/
+Disallow: /signin/
+Disallow: /signup/
+
+User-agent: *
+Disallow: /
+
+Sitemap: ${website}/sitemap.xml
+`;
+
+            this.emitFile({
+                type: 'asset',
+                fileName: 'robots.txt',
+                source: robotsContent
+            });
+        }
+    };
+};
+
+/**
+ * Dynamic sitemap.xml plugin
+ */
+export const dynamicSitemapPlugin = () => {
+    return {
+        name: 'dynamic-sitemap',
+        async generateBundle() {
+            const { readFileSync } = await import('node:fs');
+            const constants = JSON.parse(readFileSync('src/constants.json', 'utf8'));
+            const website = constants.companyWebsite.startsWith('http')
+                ? constants.companyWebsite
+                : `https://${constants.companyWebsite}`;
+
+            const currentDate = new Date().toISOString().split('T')[0];
+
+            const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>${website}/</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>${website}/terms</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>${website}/privacy</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>${website}/subs</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>${website}/eula</loc>
+    <lastmod>${currentDate}</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>`;
+
+            this.emitFile({
+                type: 'asset',
+                fileName: 'sitemap.xml',
+                source: sitemapContent
+            });
+        }
+    };
+};
+
+/**
+ * Dynamic manifest.json plugin
+ */
+export const dynamicManifestPlugin = () => {
+    return {
+        name: 'dynamic-manifest',
+        async generateBundle() {
+            const { readFileSync } = await import('node:fs');
+            const constants = JSON.parse(readFileSync('src/constants.json', 'utf8'));
+
+            const manifestContent = {
+                short_name: constants.appName,
+                name: constants.appName,
+                description: constants.tagline,
+                icons: [
+                    {
+                        src: "/icons/icon.svg",
+                        sizes: "192x192",
+                        type: "image/svg+xml"
+                    }
+                ],
+                start_url: "./app",
+                display: "standalone",
+                theme_color: "#000000",
+                background_color: "#ffffff"
+            };
+
+            this.emitFile({
+                type: 'asset',
+                fileName: 'manifest.json',
+                source: JSON.stringify(manifestContent, null, 2)
+            });
+        }
+    };
+};
+
+/**
+ * Complete Vite config generator
+ * Returns standard skateboard config with optional overrides
+ */
+export async function getSkateboardViteConfig(customConfig = {}) {
+    const [react, tailwindcss, { resolve }, path] = await Promise.all([
+        import('@vitejs/plugin-react-swc').then(m => m.default),
+        import('@tailwindcss/vite').then(m => m.default),
+        import('node:path'),
+        import('node:path')
+    ]);
+
+    return {
+        plugins: [
+            react(),
+            tailwindcss(),
+            customLoggerPlugin(),
+            htmlReplacePlugin(),
+            dynamicRobotsPlugin(),
+            dynamicSitemapPlugin(),
+            dynamicManifestPlugin(),
+            ...(customConfig.plugins || [])
+        ],
+        esbuild: {
+            drop: []
+        },
+        resolve: {
+            alias: {
+                '@': resolve(process.cwd(), './src'),
+                '@package': path.resolve(process.cwd(), 'package.json'),
+                '@root': path.resolve(process.cwd()),
+                'react/jsx-runtime': path.resolve(process.cwd(), 'node_modules/react/jsx-runtime.js'),
+                ...(customConfig.resolve?.alias || {})
+            }
+        },
+        optimizeDeps: {
+            include: ['react-dom', '@radix-ui/react-slot'],
+            esbuildOptions: {
+                define: {
+                    global: 'globalThis',
+                },
+            },
+        },
+        server: {
+            host: 'localhost',
+            open: false,
+            port: 5173,
+            strictPort: false,
+            hmr: {
+                port: 5173,
+                overlay: false,
+            },
+            watch: {
+                usePolling: false,
+                ignored: ['**/node_modules/**', '**/.git/**']
+            },
+            ...(customConfig.server || {})
+        },
+        logLevel: 'error',
+        ...customConfig
+    };
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "0.9.8",
+  "version": "1.0.2",
   "type": "module",
   "exports": {
     "./AppSidebar": {
@@ -76,6 +76,18 @@
       "import": "./ProtectedRoute.jsx",
       "default": "./ProtectedRoute.jsx"
     },
+    "./styles.css": {
+      "import": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./Context": {
+      "import": "./Context.jsx",
+      "default": "./Context.jsx"
+    },
+    "./App": {
+      "import": "./App.jsx",
+      "default": "./App.jsx"
+    },
     "./shadcn/ui/*": "./shadcn/ui/*.jsx",
     "./shadcn/lib/utils": {
       "import": "./shadcn/lib/utils.js",

package/styles.css

@@ -0,0 +1,174 @@
+@import "tailwindcss";
+
+@source '../';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-app: var(--color-blue-500);
+}
+
+:root {
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.985 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.96 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.96 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.205 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.28 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-white dark:bg-black text-foreground;
+  }
+}
+
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}