@object-ui/app-shell 4.5.0 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @object-ui/app-shell — Changelog
 
+## 4.7.0
+
+### Patch Changes
+
+- @object-ui/types@4.7.0
+- @object-ui/core@4.7.0
+- @object-ui/i18n@4.7.0
+- @object-ui/react@4.7.0
+- @object-ui/components@4.7.0
+- @object-ui/fields@4.7.0
+- @object-ui/layout@4.7.0
+- @object-ui/data-objectstack@4.7.0
+- @object-ui/auth@4.7.0
+- @object-ui/permissions@4.7.0
+- @object-ui/collaboration@4.7.0
+
+## 4.6.0
+
+### Patch Changes
+
+- Updated dependencies [3ee436d]
+  - @object-ui/components@4.6.0
+  - @object-ui/fields@4.6.0
+  - @object-ui/layout@4.6.0
+  - @object-ui/types@4.6.0
+  - @object-ui/core@4.6.0
+  - @object-ui/i18n@4.6.0
+  - @object-ui/react@4.6.0
+  - @object-ui/data-objectstack@4.6.0
+  - @object-ui/auth@4.6.0
+  - @object-ui/permissions@4.6.0
+  - @object-ui/collaboration@4.6.0
+
 ## 4.5.0
 
 ### Patch Changes

package/README.md

@@ -229,6 +229,27 @@ via the action runner, regardless of the object's `editMode`:
 See [`content/docs/guide/record-edit-modes.md`](../../content/docs/guide/record-edit-modes.md)
 for a longer walkthrough.
 
+## User-scoped state (favorites, recent items)
+
+`<ConsoleShell>` includes `FavoritesProvider` and `RecentItemsProvider` —
+shared, user-scoped state for pinned apps and recently visited entities.
+
+Both providers are **localStorage-first**: instant first paint, no flash of
+empty UI. If a `UserDataAdapter` is attached via `UserStateAdaptersProvider`,
+they additionally hydrate from and write through to a backend (debounced).
+The official ObjectStack adapter lives in `@object-ui/data-objectstack`
+(`createObjectStackUserStateAdapter`).
+
+```tsx
+import { useFavorites, useRecentItems } from '@object-ui/app-shell';
+
+const { favorites, toggleFavorite, isFavorite } = useFavorites();
+const { recentItems, addRecentItem } = useRecentItems();
+```
+
+See [User-Scoped State Persistence](../../content/docs/guide/user-state-persistence.md)
+for the adapter contract, backend schema, and how to plug in your own backend.
+
 <!-- release-metadata:v3.3.0 -->
 
 ## Compatibility

package/dist/console/AppContent.js

@@ -19,7 +19,7 @@ import { useAuth } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
 import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
-import { useRecentItems } from '../hooks/useRecentItems';
+import { useTrackRouteAsRecent } from '../hooks/useTrackRouteAsRecent';
 import { resolveRecordFormTarget, resolveNavigateCreateUrl, resolveNavigateEditUrl } from '../utils/recordFormNavigation';
 import { ExpressionEvaluator } from '@object-ui/core';
 // Components (eagerly loaded — always needed)
@@ -82,7 +82,6 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [editingRecord, setEditingRecord] = useState(null);
     const [refreshKey, setRefreshKey] = useState(0);
-    const { addRecentItem } = useRecentItems();
     const { execute: executeAction, runner } = useActionRunner();
     useGlobalUndo({
         dataSource: dataSource ?? undefined,
@@ -190,43 +189,11 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
         executeAction({ type: 'dialog_cancel' });
     }, [executeAction]);
     // Track recent items on route change.
-    useEffect(() => {
-        if (!activeApp)
-            return;
-        const parts = location.pathname.split('/').filter(Boolean);
-        let objName = parts[2];
-        if (objName === 'view' || objName === 'record' || objName === 'page' || objName === 'dashboard' || objName === 'design') {
-            objName = '';
-        }
-        const basePath = `/apps/${activeApp.name}`;
-        if (objName) {
-            const obj = allObjects.find((o) => o.name === objName);
-            if (obj) {
-                addRecentItem({
-                    id: `object:${obj.name}`,
-                    label: obj.label || obj.name,
-                    href: `${basePath}/${obj.name}`,
-                    type: 'object',
-                });
-            }
-        }
-        else if (parts[2] === 'dashboard' && parts[3]) {
-            addRecentItem({
-                id: `dashboard:${parts[3]}`,
-                label: parts[3].replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
-                href: `${basePath}/dashboard/${parts[3]}`,
-                type: 'dashboard',
-            });
-        }
-        else if (parts[2] === 'report' && parts[3]) {
-            addRecentItem({
-                id: `report:${parts[3]}`,
-                label: parts[3].replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
-                href: `${basePath}/report/${parts[3]}`,
-                type: 'report',
-            });
-        }
-    }, [location.pathname, addRecentItem]); // eslint-disable-line react-hooks/exhaustive-deps
+    useTrackRouteAsRecent({
+        pathname: location.pathname,
+        appName: activeApp?.name,
+        objects: allObjects,
+    });
     const handleEdit = (record) => {
         // Page-mode opt-in: when the object metadata declares
         // `editMode: 'page'`, route to the full-screen create/edit page instead

package/dist/console/ConsoleShell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Console building blocks — composable JSX elements that consumers assemble in
  * their own App.tsx to build the console routing tree.
@@ -10,14 +10,17 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * JSX in App.tsx. See examples/console-starter/src/App.tsx for a minimal example,
  * apps/console/src/App.tsx for one with custom system routes + CreateApp.
  */
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { AuthGuard, useAuth } from '@object-ui/auth';
 import { SchemaRendererProvider } from '@object-ui/react';
+import { createObjectStackUserStateAdapter } from '@object-ui/data-objectstack';
 import { AdapterProvider, useAdapter } from '../providers/AdapterProvider';
 import { MetadataProvider, useMetadata } from '../providers/MetadataProvider';
 import { NavigationProvider } from '../context/NavigationContext';
 import { FavoritesProvider } from '../context/FavoritesProvider';
+import { RecentItemsProvider } from '../context/RecentItemsProvider';
+import { UserStateAdaptersProvider, useAttachUserStateAdapters, } from '../context/UserStateAdapters';
 import { ThemeProvider } from '../chrome/ThemeProvider';
 export function LoadingFallback() {
     return (_jsx("div", { className: "h-screen flex items-center justify-center text-sm text-muted-foreground", children: "Loading\u2026" }));
@@ -37,7 +40,7 @@ export function LoadingFallback() {
  *   </BrowserRouter>
  */
 export function ConsoleShell({ children }) {
-    return (_jsx(ThemeProvider, { defaultTheme: "system", storageKey: "object-ui-theme", children: _jsx(NavigationProvider, { children: _jsx(FavoritesProvider, { children: _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: children }) }) }) }));
+    return (_jsx(ThemeProvider, { defaultTheme: "system", storageKey: "object-ui-theme", children: _jsx(NavigationProvider, { children: _jsx(UserStateAdaptersProvider, { children: _jsx(FavoritesProvider, { children: _jsx(RecentItemsProvider, { children: _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: children }) }) }) }) }) }));
 }
 /**
  * ConnectedShell — mounts the data layer (AdapterProvider + MetadataProvider).
@@ -53,7 +56,45 @@ function ConnectedShellInner({ children }) {
         return _jsx(LoadingFallback, {});
     // Expose the adapter via SchemaRendererContext so descendant hooks like
     // useDiscovery() (used to gate the global AI chatbot) can resolve it.
-    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(MetadataProvider, { adapter: adapter, children: children }) }));
+    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsxs(MetadataProvider, { adapter: adapter, children: [_jsx(UserStateBridge, {}), children] }) }));
+}
+/**
+ * UserStateBridge — once we have an authenticated user + a connected data
+ * adapter, plug ObjectStack-backed persistence into the favorites and
+ * recent-items providers. Renders nothing.
+ *
+ * Failure modes (object schema not configured, network errors, etc.) are
+ * absorbed by the adapter itself — the UI then transparently falls back to
+ * localStorage-only behaviour.
+ */
+function UserStateBridge() {
+    const { user } = useAuth();
+    const dataSource = useAdapter();
+    const attach = useAttachUserStateAdapters();
+    useEffect(() => {
+        if (!user?.id || !dataSource) {
+            attach('favorites', null);
+            attach('recent', null);
+            return;
+        }
+        const favorites = createObjectStackUserStateAdapter({
+            dataSource,
+            userId: user.id,
+            kind: 'favorites',
+        });
+        const recent = createObjectStackUserStateAdapter({
+            dataSource,
+            userId: user.id,
+            kind: 'recent',
+        });
+        attach('favorites', favorites);
+        attach('recent', recent);
+        return () => {
+            attach('favorites', null);
+            attach('recent', null);
+        };
+    }, [user?.id, dataSource, attach]);
+    return null;
 }
 /**
  * RequireOrganization — redirects to /organizations when the multi-tenant

package/dist/console/home/AppCard.d.ts

@@ -9,6 +9,7 @@ interface AppCardProps {
     app: any;
     onClick: () => void;
     isFavorite: boolean;
+    index?: number;
 }
-export declare function AppCard({ app, onClick, isFavorite }: AppCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppCard({ app, onClick, isFavorite, index }: AppCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/console/home/AppCard.js

@@ -6,14 +6,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module
  */
-import { Star, StarOff } from 'lucide-react';
+import { Star, StarOff, ArrowUpRight } from 'lucide-react';
 import { Card, CardContent, Button, Badge } from '@object-ui/components';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { resolveI18nLabel } from '../../utils';
 import { useFavorites } from '../../hooks/useFavorites';
 import { getIcon } from '../../utils/getIcon';
 import { cn } from '@object-ui/components';
-export function AppCard({ app, onClick, isFavorite }) {
+// Deterministic accent palette for apps that don't declare a brand color.
+const ACCENTS = [
+    { from: 'from-blue-500/15', to: 'to-indigo-500/10', text: 'text-blue-600 dark:text-blue-400', ring: 'group-hover:border-blue-500/40', solid: 'bg-blue-500' },
+    { from: 'from-emerald-500/15', to: 'to-teal-500/10', text: 'text-emerald-600 dark:text-emerald-400', ring: 'group-hover:border-emerald-500/40', solid: 'bg-emerald-500' },
+    { from: 'from-fuchsia-500/15', to: 'to-pink-500/10', text: 'text-fuchsia-600 dark:text-fuchsia-400', ring: 'group-hover:border-fuchsia-500/40', solid: 'bg-fuchsia-500' },
+    { from: 'from-amber-500/15', to: 'to-orange-500/10', text: 'text-amber-600 dark:text-amber-400', ring: 'group-hover:border-amber-500/40', solid: 'bg-amber-500' },
+    { from: 'from-sky-500/15', to: 'to-cyan-500/10', text: 'text-sky-600 dark:text-sky-400', ring: 'group-hover:border-sky-500/40', solid: 'bg-sky-500' },
+    { from: 'from-violet-500/15', to: 'to-purple-500/10', text: 'text-violet-600 dark:text-violet-400', ring: 'group-hover:border-violet-500/40', solid: 'bg-violet-500' },
+    { from: 'from-rose-500/15', to: 'to-red-500/10', text: 'text-rose-600 dark:text-rose-400', ring: 'group-hover:border-rose-500/40', solid: 'bg-rose-500' },
+];
+function hashStr(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) | 0;
+    return Math.abs(h);
+}
+export function AppCard({ app, onClick, isFavorite, index = 0 }) {
     const { t } = useObjectTranslation();
     const { appLabel, appDescription } = useObjectLabel();
     const { toggleFavorite } = useFavorites();
@@ -21,6 +37,7 @@ export function AppCard({ app, onClick, isFavorite }) {
     const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
     const description = appDescription({ name: app.name, description: resolveI18nLabel(app.description, t) });
     const primaryColor = app.branding?.primaryColor;
+    const accent = ACCENTS[(hashStr(app.name) + index) % ACCENTS.length];
     const handleToggleFavorite = (e) => {
         e.stopPropagation();
         toggleFavorite({
@@ -30,7 +47,9 @@ export function AppCard({ app, onClick, isFavorite }) {
             type: 'object',
         });
     };
-    return (_jsx(Card, { className: "cursor-pointer hover:shadow-lg transition-all group relative", onClick: onClick, "data-testid": `app-card-${app.name}`, children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity", onClick: handleToggleFavorite, "aria-label": isFavorite
-                        ? t('common.removeFromFavorites', { defaultValue: 'Remove from favorites' }) + ` — ${label}`
-                        : t('common.addToFavorites', { defaultValue: 'Add to favorites' }) + ` — ${label}`, "aria-pressed": isFavorite, "data-testid": `favorite-btn-${app.name}`, children: isFavorite ? (_jsx(Star, { className: "h-4 w-4 fill-yellow-400 text-yellow-400" })) : (_jsx(StarOff, { className: "h-4 w-4" })) }), _jsx("div", { className: cn('inline-flex p-3 rounded-lg mb-4', primaryColor ? '' : 'bg-primary/10'), style: primaryColor ? { backgroundColor: `${primaryColor}20` } : {}, children: _jsx(Icon, { className: "h-8 w-8", style: primaryColor ? { color: primaryColor } : {} }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg mb-1", children: label }), description && (_jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: description })), !description && (_jsx("p", { className: "text-sm text-muted-foreground", children: t('home.appCard.noDescription', { defaultValue: 'No description' }) }))] }), app.isDefault && (_jsx("div", { className: "mt-3", children: _jsx(Badge, { variant: "secondary", children: t('home.appCard.default', { defaultValue: 'Default' }) }) }))] }) }));
+    return (_jsxs(Card, { className: cn('group relative cursor-pointer overflow-hidden border border-border/70 bg-card/80 backdrop-blur-sm', 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg', !primaryColor && accent.ring), onClick: onClick, "data-testid": `app-card-${app.name}`, style: primaryColor ? { borderColor: undefined } : undefined, children: [_jsx("div", { "aria-hidden": true, className: cn('absolute inset-x-0 top-0 h-1', primaryColor ? '' : accent.solid), style: primaryColor ? { backgroundColor: primaryColor } : undefined }), !primaryColor && (_jsx("div", { "aria-hidden": true, className: cn('absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100', accent.from, accent.to) })), _jsxs(CardContent, { className: "relative p-5", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity", onClick: handleToggleFavorite, "aria-label": isFavorite
+                            ? t('common.removeFromFavorites', { defaultValue: 'Remove from favorites' }) + ` — ${label}`
+                            : t('common.addToFavorites', { defaultValue: 'Add to favorites' }) + ` — ${label}`, "aria-pressed": isFavorite, "data-testid": `favorite-btn-${app.name}`, children: isFavorite ? (_jsx(Star, { className: "h-4 w-4 fill-amber-400 text-amber-400" })) : (_jsx(StarOff, { className: "h-4 w-4" })) }), _jsx("div", { className: cn('inline-flex h-14 w-14 items-center justify-center rounded-xl mb-4 ring-1 ring-inset', primaryColor ? '' : cn('bg-gradient-to-br', accent.from, accent.to, 'ring-border/40')), style: primaryColor
+                            ? { backgroundColor: `${primaryColor}1f`, boxShadow: `inset 0 0 0 1px ${primaryColor}33` }
+                            : undefined, children: _jsx(Icon, { className: cn('h-7 w-7', primaryColor ? '' : accent.text), style: primaryColor ? { color: primaryColor } : undefined }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-base sm:text-lg leading-tight truncate", children: label }), app.isDefault && (_jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px] px-1.5 py-0", children: t('home.appCard.default', { defaultValue: 'Default' }) }))] }), _jsx("p", { className: cn('text-sm text-muted-foreground mt-1.5 line-clamp-2 min-h-[2.5rem]', !description && 'italic'), children: description || t('home.appCard.noDescription', { defaultValue: 'No description' }) })] }), _jsx("div", { className: "mt-4 flex items-center justify-between text-xs font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground transition-colors group-hover:text-foreground", children: [t('home.open', { defaultValue: 'Open' }), _jsx(ArrowUpRight, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })] }) })] })] }));
 }

package/dist/console/home/HomePage.js

@@ -16,40 +16,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module
  */
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMetadata } from '../../providers/MetadataProvider';
 import { useRecentItems } from '../../hooks/useRecentItems';
 import { useFavorites } from '../../hooks/useFavorites';
 import { useObjectTranslation } from '@object-ui/i18n';
+import { useAuth } from '@object-ui/auth';
 import { AppCard } from './AppCard';
 import { RecentApps } from './RecentApps';
 import { StarredApps } from './StarredApps';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
-import { Plus, Settings } from 'lucide-react';
+import { Plus, Settings, Sparkles, Star, Clock, ArrowDown } from 'lucide-react';
+function pickGreetingKey(hour) {
+    if (hour < 5)
+        return 'home.greetingNight';
+    if (hour < 12)
+        return 'home.greetingMorning';
+    if (hour < 18)
+        return 'home.greetingAfternoon';
+    if (hour < 23)
+        return 'home.greetingEvening';
+    return 'home.greetingNight';
+}
+/**
+ * Friendly onboarding hint shown above the All Apps grid when the user has
+ * no starred or recent items yet. Replaces per-section empty states (which
+ * would flicker as the backend adapter hydrates).
+ */
+function GettingStartedHint({ t }) {
+    return (_jsxs("section", { "data-testid": "home-getting-started", className: "relative overflow-hidden rounded-2xl border border-border/60 bg-card/70 backdrop-blur-sm p-6 sm:p-8", children: [_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-fuchsia-500/5" }), _jsxs("div", { className: "relative flex flex-col sm:flex-row sm:items-center gap-5", children: [_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx("span", { className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 ring-1 ring-amber-500/20 text-amber-600 dark:text-amber-400", children: _jsx(Star, { className: "h-5 w-5" }) }), _jsx("span", { className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 ring-1 ring-emerald-500/20 text-emerald-600 dark:text-emerald-400", children: _jsx(Clock, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: t('home.gettingStarted.title', { defaultValue: 'Make this home yours' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1 max-w-xl", children: t('home.gettingStarted.description', {
+                                    defaultValue: 'Star an app to pin it here for one-click access. Anything you open will show up under Recently Accessed automatically.',
+                                }) })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: t('home.gettingStarted.cta', { defaultValue: 'Browse all applications' }) }), _jsx(ArrowDown, { className: "h-3.5 w-3.5" })] })] })] }));
+}
 export function HomePage() {
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
     const { apps, loading } = useMetadata();
     const { recentItems } = useRecentItems();
     const { favorites } = useFavorites();
-    // Filter active apps
+    const { user } = useAuth();
     const activeApps = apps.filter((a) => a.active !== false);
-    // Get recent apps (only apps, not objects/dashboards)
     const recentApps = recentItems
         .filter(item => item.type === 'object' || item.type === 'dashboard' || item.type === 'page')
         .slice(0, 6);
-    // Get starred apps
     const starredApps = favorites
         .filter(item => item.type === 'object' || item.type === 'dashboard' || item.type === 'page')
         .slice(0, 8);
+    const greeting = useMemo(() => t(pickGreetingKey(new Date().getHours()), { defaultValue: 'Welcome' }), [t]);
+    const displayName = (user?.name?.trim() || user?.email?.split('@')[0] || '').trim();
     if (loading) {
-        return (_jsx("div", { className: "flex flex-1 items-center justify-center py-20", children: _jsx("div", { className: "text-muted-foreground", children: "Loading workspace..." }) }));
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center py-20", children: _jsx("div", { className: "text-muted-foreground", children: t('home.loading', { defaultValue: 'Loading workspace...' }) }) }));
     }
-    // Empty state - no apps configured
     if (activeApps.length === 0) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center p-6", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('home.welcome', { defaultValue: 'Welcome to ObjectUI' }) }), _jsx(EmptyDescription, { children: t('home.welcomeDescription', {
                             defaultValue: 'Get started by creating your first application or configure your system settings.',
                         }) }), _jsxs("div", { className: "mt-6 flex flex-col sm:flex-row items-center gap-3", children: [_jsxs(Button, { onClick: () => navigate('/create-app'), "data-testid": "create-first-app-btn", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('home.createFirstApp', { defaultValue: 'Create Your First App' })] }), _jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup'), "data-testid": "go-to-settings-btn", children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('home.systemSettings', { defaultValue: 'System Settings' })] })] })] }) }));
     }
-    return (_jsxs("div", { className: "bg-background", children: [_jsxs("div", { className: "px-4 sm:px-6 pt-6 pb-4", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight", children: t('home.title', { defaultValue: 'Home' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t('home.subtitle', { defaultValue: 'Your workspace dashboard' }) })] }), _jsxs("div", { className: "px-4 sm:px-6 py-4 space-y-8", children: [starredApps.length > 0 && (_jsx(StarredApps, { items: starredApps })), recentApps.length > 0 && (_jsx(RecentApps, { items: recentApps })), _jsxs("section", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight mb-4", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app) => (_jsx(AppCard, { app: app, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] })] }));
+    return (_jsxs("div", { className: "relative isolate min-h-full bg-gradient-to-b from-background via-background to-muted/40", children: [_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 -z-10 h-[28rem] overflow-hidden", children: [_jsx("div", { className: "absolute -top-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl opacity-70 dark:opacity-40" }), _jsx("div", { className: "absolute -top-20 right-[-6rem] h-[26rem] w-[36rem] rounded-full bg-sky-400/30 blur-3xl opacity-70 dark:opacity-35" }), _jsx("div", { className: "absolute top-32 left-1/3 h-[18rem] w-[24rem] rounded-full bg-fuchsia-400/25 blur-3xl opacity-60 dark:opacity-25" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-background/40 to-background" })] }), _jsx("section", { className: "px-4 sm:px-6 lg:px-8 pt-10 pb-6", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground mb-3", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-primary" }), _jsx("span", { className: "uppercase tracking-wider", children: t('home.title', { defaultValue: 'Home' }) })] }), _jsxs("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight", children: [_jsxs("span", { className: "bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent", children: [greeting, displayName ? `, ${displayName}` : ''] }), _jsx("span", { className: "text-foreground/40", children: "." })] }), _jsx("p", { className: "text-base sm:text-lg text-muted-foreground mt-2 max-w-2xl", children: t('home.heroTagline', { defaultValue: 'Pick up where you left off, or explore something new.' }) })] }) }), _jsx("div", { className: "px-4 sm:px-6 lg:px-8 pb-16", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-10", children: [starredApps.length === 0 && recentApps.length === 0 && (_jsx(GettingStartedHint, { t: t })), starredApps.length > 0 && _jsx(StarredApps, { items: starredApps }), recentApps.length > 0 && _jsx(RecentApps, { items: recentApps }), _jsxs("section", { children: [_jsx("div", { className: "flex items-end justify-between mb-5", children: _jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [activeApps.length, ' · ', t('home.stats.apps', { defaultValue: 'Applications' })] })] }) }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app, idx) => (_jsx(AppCard, { app: app, index: idx, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] }) })] }));
 }

package/dist/console/home/QuickActions.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useNavigate } from 'react-router-dom';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { Card, CardContent } from '@object-ui/components';
-import { Plus, Settings, Database } from 'lucide-react';
+import { Plus, Settings, Database, ArrowUpRight } from 'lucide-react';
 import { cn } from '@object-ui/components';
 export function QuickActions() {
     const navigate = useNavigate();
@@ -22,7 +22,9 @@ export function QuickActions() {
             description: t('home.quickActions.createAppDesc', { defaultValue: 'Start with a new application' }),
             icon: Plus,
             href: '/create-app',
-            color: 'text-blue-600 dark:text-blue-400',
+            iconBg: 'bg-gradient-to-br from-blue-500/15 to-indigo-500/10 ring-blue-500/20',
+            iconText: 'text-blue-600 dark:text-blue-400',
+            hoverBorder: 'hover:border-blue-500/40',
         },
         {
             id: 'manage-objects',
@@ -30,7 +32,9 @@ export function QuickActions() {
             description: t('home.quickActions.manageObjectsDesc', { defaultValue: 'Configure data models' }),
             icon: Database,
             href: '/apps/setup/system/metadata/object',
-            color: 'text-purple-600 dark:text-purple-400',
+            iconBg: 'bg-gradient-to-br from-violet-500/15 to-purple-500/10 ring-violet-500/20',
+            iconText: 'text-violet-600 dark:text-violet-400',
+            hoverBorder: 'hover:border-violet-500/40',
         },
         {
             id: 'system-settings',
@@ -38,16 +42,18 @@ export function QuickActions() {
             description: t('home.quickActions.systemSettingsDesc', { defaultValue: 'Configure your workspace' }),
             icon: Settings,
             href: '/apps/setup',
-            color: 'text-gray-600 dark:text-gray-400',
+            iconBg: 'bg-gradient-to-br from-emerald-500/15 to-teal-500/10 ring-emerald-500/20',
+            iconText: 'text-emerald-600 dark:text-emerald-400',
+            hoverBorder: 'hover:border-emerald-500/40',
         },
     ];
-    return (_jsxs("section", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight mb-4", children: t('home.quickActions.title', { defaultValue: 'Quick Actions' }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: actions.map((action) => {
+    return (_jsxs("section", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight mb-5", children: t('home.quickActions.title', { defaultValue: 'Quick Actions' }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: actions.map((action) => {
                     const Icon = action.icon;
-                    return (_jsx(Card, { className: "cursor-pointer hover:shadow-md transition-shadow", onClick: () => navigate(action.href), "data-testid": `quick-action-${action.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
+                    return (_jsx(Card, { className: cn('group cursor-pointer border border-border/70 bg-card/80 backdrop-blur-sm', 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md', action.hoverBorder), onClick: () => navigate(action.href), "data-testid": `quick-action-${action.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 navigate(action.href);
                             }
-                        }, "aria-label": action.label, children: _jsx(CardContent, { className: "p-6", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: cn('p-3 rounded-lg bg-muted', action.color), children: _jsx(Icon, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-base mb-1", children: action.label }), _jsx("p", { className: "text-sm text-muted-foreground", children: action.description })] })] }) }) }, action.id));
+                        }, "aria-label": action.label, children: _jsx(CardContent, { className: "p-5", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: cn('inline-flex h-11 w-11 items-center justify-center rounded-xl ring-1 ring-inset shrink-0', action.iconBg), children: _jsx(Icon, { className: cn('h-5 w-5', action.iconText) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("h3", { className: "font-semibold text-base leading-tight", children: action.label }), _jsx(ArrowUpRight, { className: "h-4 w-4 text-muted-foreground opacity-0 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" })] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: action.description })] })] }) }) }, action.id));
                 }) })] }));
 }

package/dist/console/home/RecentApps.js

@@ -8,25 +8,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useNavigate } from 'react-router-dom';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { Card, CardContent } from '@object-ui/components';
-import { Clock } from 'lucide-react';
+import { Card, CardContent, cn } from '@object-ui/components';
+import { Clock, ArrowUpRight } from 'lucide-react';
 import { getIcon } from '../../utils/getIcon';
 import { capitalizeFirst } from '../../utils';
+const TYPE_TONES = {
+    object: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-blue-500/20',
+    dashboard: 'bg-violet-500/10 text-violet-600 dark:text-violet-400 ring-violet-500/20',
+    page: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20',
+    record: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20',
+};
 export function RecentApps({ items }) {
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
     if (items.length === 0)
         return null;
-    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(Clock, { className: "h-5 w-5 text-muted-foreground" }), _jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.recentApps.title', { defaultValue: 'Recently Accessed' }) })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: items.map((item) => {
+    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-5", children: [_jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-lg bg-sky-500/10 ring-1 ring-sky-500/20 text-sky-600 dark:text-sky-400", children: _jsx(Clock, { className: "h-4 w-4" }) }), _jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.recentApps.title', { defaultValue: 'Recently Accessed' }) })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3", children: items.map((item) => {
                     const Icon = getIcon(item.type);
                     const typeLabel = t(`home.recentApps.itemType.${item.type}`, {
                         defaultValue: capitalizeFirst(item.type),
                     });
-                    return (_jsx(Card, { className: "cursor-pointer hover:shadow-md transition-shadow", onClick: () => navigate(item.href), "data-testid": `recent-item-${item.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
+                    const tone = TYPE_TONES[item.type] || TYPE_TONES.object;
+                    return (_jsx(Card, { className: "group cursor-pointer border border-border/70 bg-card/80 backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-foreground/20", onClick: () => navigate(item.href), "data-testid": `recent-item-${item.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 navigate(item.href);
                             }
-                        }, children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 rounded-lg bg-muted shrink-0", children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-medium text-sm truncate", children: item.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: typeLabel })] })] }) }) }, item.id));
+                        }, children: _jsx(CardContent, { className: "p-3.5", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('inline-flex h-10 w-10 items-center justify-center rounded-lg ring-1 shrink-0', tone), children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-medium text-sm truncate", children: item.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: typeLabel })] }), _jsx(ArrowUpRight, { className: "h-4 w-4 text-muted-foreground opacity-0 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" })] }) }) }, item.id));
                 }) })] }));
 }

package/dist/console/home/StarredApps.js

@@ -8,22 +8,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useNavigate } from 'react-router-dom';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { Card, CardContent } from '@object-ui/components';
-import { Star } from 'lucide-react';
+import { Card, CardContent, cn } from '@object-ui/components';
+import { Star, ArrowUpRight } from 'lucide-react';
 import { getIcon } from '../../utils/getIcon';
 import { capitalizeFirst } from '../../utils';
+const TYPE_TONES = {
+    object: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-blue-500/20',
+    dashboard: 'bg-violet-500/10 text-violet-600 dark:text-violet-400 ring-violet-500/20',
+    page: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20',
+    record: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20',
+};
 export function StarredApps({ items }) {
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
     if (items.length === 0)
         return null;
-    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx(Star, { className: "h-5 w-5 text-yellow-500 fill-yellow-500" }), _jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.starredApps.title', { defaultValue: 'Starred' }) })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: items.map((item) => {
+    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-5", children: [_jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10 ring-1 ring-amber-500/20 text-amber-600 dark:text-amber-400", children: _jsx(Star, { className: "h-4 w-4 fill-current" }) }), _jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.starredApps.title', { defaultValue: 'Starred' }) })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3", children: items.map((item) => {
                     const Icon = getIcon(item.type);
-                    return (_jsx(Card, { className: "cursor-pointer hover:shadow-md transition-shadow", onClick: () => navigate(item.href), "data-testid": `starred-item-${item.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
+                    const tone = TYPE_TONES[item.type] || TYPE_TONES.object;
+                    return (_jsx(Card, { className: "group cursor-pointer border border-border/70 bg-card/80 backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-foreground/20", onClick: () => navigate(item.href), "data-testid": `starred-item-${item.id}`, role: "link", tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 navigate(item.href);
                             }
-                        }, children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 rounded-lg bg-muted shrink-0", children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-medium text-sm truncate", children: item.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: capitalizeFirst(item.type) })] })] }) }) }, item.id));
+                        }, children: _jsx(CardContent, { className: "p-3.5", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('inline-flex h-10 w-10 items-center justify-center rounded-lg ring-1 shrink-0', tone), children: _jsx(Icon, { className: "h-5 w-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-medium text-sm truncate", children: item.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: capitalizeFirst(item.type) })] }), _jsx(ArrowUpRight, { className: "h-4 w-4 text-muted-foreground opacity-0 -translate-x-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" })] }) }) }, item.id));
                 }) })] }));
 }

package/dist/context/FavoritesProvider.d.ts

@@ -4,18 +4,15 @@
  * React Context + Provider for shared favorites state across all consumers
  * (HomePage, AppCard, AppSidebar, UnifiedSidebar, StarredApps).
  *
- * Replaces the standalone `useFavorites` hook pattern — all callers now share
- * a single state instance so that toggling a star in AppCard immediately
- * reflects in HomePage's Starred section and sidebar.
- *
- * Persistence: localStorage (key: "objectui-favorites", max 20 items).
- *
- * TODO: Migrate persistence to server-side storage via the adapter/API layer
- * (e.g. PUT /api/user/preferences) so favorites sync across devices and browsers.
- * The provider should accept an optional `persistenceAdapter` prop that implements
- * `load(): Promise<FavoriteItem[]>` and `save(items: FavoriteItem[]): Promise<void>`.
- * When the adapter is provided, localStorage should be used only as a fallback
- * during the initial load while the server response is in-flight.
+ * Persistence is **localStorage-first** with optional backend hydration:
+ * - On mount we render synchronously from localStorage (no flash of empty UI).
+ * - If a `UserDataAdapter<FavoriteItem>` is attached via `UserStateAdaptersProvider`
+ *   (see `./UserStateAdapters`), the provider hydrates from the backend and
+ *   writes-through every mutation through a debounced `adapter.save()`.
+ * - localStorage stays in sync so offline / pre-auth sessions still work and
+ *   gives an instant first paint after sign-in.
+ * - The local key is scoped per `user.id` so different accounts on the same
+ *   browser don't cross-contaminate.
  *
  * @module
  */