@object-ui/app-shell 5.1.1 → 5.2.1

package/dist/console/marketplace/PackageIcon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * PackageIcon — square icon tile for marketplace packages.
+ *
+ * Renders the package's `icon_url` when present, falling back to the
+ * first letter of the display name (or manifest id) on missing-URL,
+ * load-error, or empty URL. The fallback also covers the common
+ * case where cloud rows point at icon assets that don't yet exist
+ * on the configured CDN.
+ */
+export interface PackageIconProps {
+    iconUrl?: string | null;
+    displayName?: string | null;
+    manifestId?: string | null;
+    /** Tailwind size classes — caller controls outer dimensions. */
+    className?: string;
+    /** Text size for the initial-letter fallback. */
+    initialClassName?: string;
+}
+export declare function PackageIcon({ iconUrl, displayName, manifestId, className, initialClassName, }: PackageIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/PackageIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PackageIcon — square icon tile for marketplace packages.
+ *
+ * Renders the package's `icon_url` when present, falling back to the
+ * first letter of the display name (or manifest id) on missing-URL,
+ * load-error, or empty URL. The fallback also covers the common
+ * case where cloud rows point at icon assets that don't yet exist
+ * on the configured CDN.
+ */
+import { useState } from 'react';
+export function PackageIcon({ iconUrl, displayName, manifestId, className = 'h-10 w-10', initialClassName = 'text-base font-semibold', }) {
+    const [broken, setBroken] = useState(false);
+    const initial = ((displayName ?? manifestId ?? '?').trim()[0] ?? '?').toUpperCase();
+    const showImg = !!iconUrl && !broken;
+    return (_jsx("div", { className: `flex shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary overflow-hidden ${className}`, children: showImg ? (_jsx("img", { src: iconUrl, alt: "", className: `${className} object-cover`, onError: () => setBroken(true), loading: "lazy" })) : (_jsx("span", { className: initialClassName, children: initial })) }));
+}

package/dist/console/marketplace/marketplaceApi.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Marketplace REST helper.
+ *
+ * Thin fetch wrapper around the tenant runtime's marketplace proxy
+ * (`/api/v1/marketplace/*`). The proxy forwards to the configured
+ * cloud control plane (`OS_CLOUD_URL`) — only browse endpoints are
+ * exposed. Install is performed against the cloud action endpoint
+ * directly (via `installPackage()` below), which requires the user
+ * to have a cloud session.
+ *
+ * See:
+ *   cloud/packages/service-cloud/src/routes/marketplace.ts
+ *   framework/packages/runtime/src/cloud/marketplace-proxy-plugin.ts
+ */
+export interface MarketplacePackageSummary {
+    id: string;
+    manifest_id: string;
+    display_name: string;
+    description?: string | null;
+    category?: string | null;
+    tags?: string | null;
+    icon_url?: string | null;
+    homepage_url?: string | null;
+    license?: string | null;
+    publisher?: string | null;
+    is_starter?: boolean;
+    created_at?: string;
+    updated_at?: string;
+    latest_version: MarketplacePackageVersion | null;
+}
+export interface MarketplacePackageDetail extends MarketplacePackageSummary {
+    readme?: string | null;
+}
+export interface MarketplacePackageVersion {
+    id: string;
+    version: string;
+    status?: string;
+    is_prerelease?: boolean;
+    published_at?: string | null;
+    listing_status?: string;
+    reviewed_at?: string | null;
+}
+export interface MarketplaceListResponse {
+    items: MarketplacePackageSummary[];
+    total: number;
+    limit: number;
+    offset: number;
+}
+export interface MarketplaceDetailResponse {
+    package: MarketplacePackageDetail;
+    versions: MarketplacePackageVersion[];
+}
+export declare function listMarketplacePackages(params?: {
+    q?: string;
+    category?: string;
+    limit?: number;
+    offset?: number;
+}): Promise<MarketplaceListResponse>;
+export declare function getMarketplacePackage(id: string): Promise<MarketplaceDetailResponse>;
+export interface InstallResponse {
+    installation?: {
+        id: string;
+        environment_id: string;
+        package_id: string;
+        version: string;
+    };
+    message?: string;
+    [k: string]: any;
+}
+export declare function installPackage(input: {
+    packageId: string;
+    environmentId: string;
+    seedSampleData?: boolean;
+}): Promise<InstallResponse>;
+/**
+ * Helper: list environments visible to the current cloud user (active
+ * organisation). Used to populate the install dialog's environment picker.
+ * Calls cloud directly — same auth model as `installPackage`.
+ */
+export interface CloudEnvironment {
+    id: string;
+    display_name?: string;
+    hostname?: string;
+    organization_id?: string;
+    plan?: string;
+    status?: string;
+}
+export declare function listCloudEnvironments(): Promise<CloudEnvironment[]>;
+/**
+ * List orgs in which the current cloud user has an `owner` or `admin`
+ * role on `sys_member`. Used to filter the install dialog's env picker
+ * — only envs whose `organization_id` is in this set are installable
+ * (the backend enforces the same gate; this is the UX mirror).
+ *
+ * Returns an empty set on 401 / network failure so the install dialog
+ * can render a clean "no installable environments" state.
+ */
+export declare function listInstallableOrgIds(): Promise<Set<string>>;
+export declare function cloudInstallDeepLink(packageId: string): string;
+export interface LocalInstallEntry {
+    packageId: string;
+    versionId: string;
+    manifestId: string;
+    version: string;
+    installedAt: string;
+    installedBy: string | null;
+}
+export interface LocalInstallResult {
+    manifestId: string;
+    version: string;
+    versionId: string;
+    installedAt: string;
+    hotLoaded: boolean;
+    upgradedFrom: string | null;
+    note?: string;
+}
+export declare function installLocal(input: {
+    packageId: string;
+    versionId?: string;
+}): Promise<LocalInstallResult>;
+export declare function listLocalInstalls(): Promise<LocalInstallEntry[]>;
+export declare function uninstallLocal(manifestId: string): Promise<void>;

package/dist/console/marketplace/marketplaceApi.js

@@ -0,0 +1,207 @@
+/**
+ * Marketplace REST helper.
+ *
+ * Thin fetch wrapper around the tenant runtime's marketplace proxy
+ * (`/api/v1/marketplace/*`). The proxy forwards to the configured
+ * cloud control plane (`OS_CLOUD_URL`) — only browse endpoints are
+ * exposed. Install is performed against the cloud action endpoint
+ * directly (via `installPackage()` below), which requires the user
+ * to have a cloud session.
+ *
+ * See:
+ *   cloud/packages/service-cloud/src/routes/marketplace.ts
+ *   framework/packages/runtime/src/cloud/marketplace-proxy-plugin.ts
+ */
+const SERVER_URL = (import.meta.env.VITE_SERVER_URL || '').replace(/\/$/, '');
+const API_BASE = `${SERVER_URL}/api/v1/marketplace`;
+async function call(path, init) {
+    const res = await fetch(`${API_BASE}${path}`, {
+        credentials: 'omit',
+        headers: { 'Accept': 'application/json', ...(init?.headers || {}) },
+        ...init,
+    });
+    let payload = null;
+    try {
+        payload = await res.json();
+    }
+    catch { /* empty body */ }
+    if (!res.ok) {
+        const code = payload?.error?.code ?? payload?.code ?? `HTTP_${res.status}`;
+        const message = payload?.error?.message ?? payload?.error ?? res.statusText;
+        const err = new Error(typeof message === 'string' ? message : `${code}`);
+        err.code = code;
+        err.status = res.status;
+        throw err;
+    }
+    // Cloud helpers return `{ success: true, data: ... }`; unwrap when present.
+    return (payload?.data ?? payload);
+}
+export async function listMarketplacePackages(params = {}) {
+    const usp = new URLSearchParams();
+    if (params.q)
+        usp.set('q', params.q);
+    if (params.category)
+        usp.set('category', params.category);
+    if (params.limit != null)
+        usp.set('limit', String(params.limit));
+    if (params.offset != null)
+        usp.set('offset', String(params.offset));
+    const qs = usp.toString();
+    return call(`/packages${qs ? `?${qs}` : ''}`);
+}
+export async function getMarketplacePackage(id) {
+    return call(`/packages/${encodeURIComponent(id)}`);
+}
+/**
+ * Install a package into an environment by calling the cloud's
+ * `install_package` action **directly** (not via the proxy). Requires the
+ * caller's browser to have a valid cloud session cookie — typically
+ * because the user has signed into cloud at least once and the cookie
+ * domain covers this origin. When that's not the case the call fails
+ * with 401; the UI can then surface a "Sign in on cloud" link.
+ *
+ * `cloudBaseUrl` is read from `VITE_CLOUD_URL` if set; otherwise we fall
+ * back to relative (assumes same-origin, which is true for cloud-hosted
+ * consoles but generally not for tenant runtimes).
+ */
+const CLOUD_BASE = (import.meta.env.VITE_CLOUD_URL || '').replace(/\/$/, '');
+export async function installPackage(input) {
+    const base = CLOUD_BASE || SERVER_URL;
+    const res = await fetch(`${base}/api/v1/actions/sys_package/install_package`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            recordId: input.packageId,
+            params: {
+                environment_id: input.environmentId,
+                seed_sample_data: !!input.seedSampleData,
+            },
+        }),
+    });
+    let payload = null;
+    try {
+        payload = await res.json();
+    }
+    catch { /* empty */ }
+    if (!res.ok) {
+        const code = payload?.code ?? payload?.error?.code ?? `HTTP_${res.status}`;
+        const message = payload?.error ?? payload?.message ?? res.statusText;
+        const err = new Error(typeof message === 'string' ? message : `${code}`);
+        err.code = code;
+        err.status = res.status;
+        throw err;
+    }
+    return (payload?.data ?? payload);
+}
+export async function listCloudEnvironments() {
+    const base = CLOUD_BASE || SERVER_URL;
+    const res = await fetch(`${base}/api/v1/data/sys_environment?limit=200`, {
+        credentials: 'include',
+        headers: { 'Accept': 'application/json' },
+    });
+    if (!res.ok) {
+        const err = new Error(`HTTP_${res.status}`);
+        err.status = res.status;
+        throw err;
+    }
+    const payload = await res.json().catch(() => ({}));
+    const rows = payload?.data ?? payload?.items ?? payload ?? [];
+    return Array.isArray(rows) ? rows : [];
+}
+/**
+ * List orgs in which the current cloud user has an `owner` or `admin`
+ * role on `sys_member`. Used to filter the install dialog's env picker
+ * — only envs whose `organization_id` is in this set are installable
+ * (the backend enforces the same gate; this is the UX mirror).
+ *
+ * Returns an empty set on 401 / network failure so the install dialog
+ * can render a clean "no installable environments" state.
+ */
+export async function listInstallableOrgIds() {
+    const base = CLOUD_BASE || SERVER_URL;
+    // sys_member rows are scoped to the caller; better-auth-managed table.
+    const url = `${base}/api/v1/data/sys_member?limit=200`;
+    let payload = null;
+    try {
+        const res = await fetch(url, {
+            credentials: 'include',
+            headers: { 'Accept': 'application/json' },
+        });
+        if (!res.ok)
+            return new Set();
+        payload = await res.json().catch(() => ({}));
+    }
+    catch {
+        return new Set();
+    }
+    const rows = payload?.data ?? payload?.items ?? payload ?? [];
+    if (!Array.isArray(rows))
+        return new Set();
+    const ids = new Set();
+    for (const row of rows) {
+        const role = String(row?.role ?? '').toLowerCase();
+        const orgId = row?.organization_id ?? row?.organizationId;
+        if (orgId && (role === 'owner' || role === 'admin')) {
+            ids.add(String(orgId));
+        }
+    }
+    return ids;
+}
+export function cloudInstallDeepLink(packageId) {
+    const base = CLOUD_BASE || 'https://cloud.objectos.app';
+    return `${base}/apps/cloud-control/sys_package/${encodeURIComponent(packageId)}`;
+}
+export async function installLocal(input) {
+    const res = await fetch(`${API_BASE}/install-local`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            packageId: input.packageId,
+            ...(input.versionId ? { versionId: input.versionId } : {}),
+        }),
+    });
+    let payload = null;
+    try {
+        payload = await res.json();
+    }
+    catch { /* empty */ }
+    if (!res.ok) {
+        const code = payload?.error?.code ?? `HTTP_${res.status}`;
+        const message = payload?.error?.message ?? res.statusText;
+        const err = new Error(typeof message === 'string' ? message : `${code}`);
+        err.code = code;
+        err.status = res.status;
+        throw err;
+    }
+    return (payload?.data ?? payload);
+}
+export async function listLocalInstalls() {
+    try {
+        const res = await fetch(`${API_BASE}/install-local`, {
+            credentials: 'include',
+            headers: { 'Accept': 'application/json' },
+        });
+        if (!res.ok)
+            return [];
+        const payload = await res.json().catch(() => ({}));
+        const items = payload?.data?.items ?? payload?.items ?? [];
+        return Array.isArray(items) ? items : [];
+    }
+    catch {
+        return [];
+    }
+}
+export async function uninstallLocal(manifestId) {
+    const res = await fetch(`${API_BASE}/install-local/${encodeURIComponent(manifestId)}`, {
+        method: 'DELETE',
+        credentials: 'include',
+        headers: { 'Accept': 'application/json' },
+    });
+    if (!res.ok) {
+        const payload = await res.json().catch(() => ({}));
+        const message = payload?.error?.message ?? res.statusText;
+        throw new Error(typeof message === 'string' ? message : `HTTP_${res.status}`);
+    }
+}

package/dist/index.d.ts

@@ -5,23 +5,19 @@
  * Framework-agnostic rendering engine for third-party integration
  */
 export { AppShell } from './components/AppShell';
-export { ObjectRenderer } from './components/ObjectRenderer';
-export { DashboardRenderer } from './components/DashboardRenderer';
-export { PageRenderer } from './components/PageRenderer';
-export { FormRenderer } from './components/FormRenderer';
 export { AdapterProvider, useAdapter } from './providers/AdapterProvider';
 export { MetadataProvider, useMetadata, useMetadataItem } from './providers/MetadataProvider';
 export { ExpressionProvider, useExpressionContext, evaluateVisibility } from './providers/ExpressionProvider';
 export { useObjectActions } from './hooks/useObjectActions';
 export { useRecentItems } from './hooks/useRecentItems';
-export type { AppShellProps, ObjectRendererProps, DashboardRendererProps, PageRendererProps, FormRendererProps, } from './types';
+export type { AppShellProps, } from './types';
 export type { MetadataState, MetadataContextValue, MetadataTypeStatus, } from './providers/MetadataProvider';
 export type { ExpressionContextValue, } from './providers/ExpressionProvider';
 export type { RecentItem, } from './hooks/useRecentItems';
 export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute, RootRedirect, SystemRedirect, LoadingFallback, } from './console/ConsoleShell';
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 export type { ActivityItem } from './layout';
-export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, RouteFader, toastWithUndo, type ToastWithUndoOptions, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
 export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 export type { RecordFormPageProps } from './views';
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
@@ -29,6 +25,9 @@ export type { FavoriteItem } from './hooks';
 export { NavigationProvider, useNavigationContext, FavoritesProvider, RecentItemsProvider, UserStateAdaptersProvider, useUserStateAdapter, useAttachUserStateAdapters, } from './context';
 export type { UserDataAdapter, UserStateKind } from './context';
 export { AppContent as DefaultAppContent } from './console/AppContent';
+export { MarketplacePage } from './console/marketplace/MarketplacePage';
+export { MarketplacePackagePage } from './console/marketplace/MarketplacePackagePage';
+export { MarketplaceInstalledPage } from './console/marketplace/MarketplaceInstalledPage';
 export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';
 export { RegisterPage as DefaultRegisterPage } from './console/auth/RegisterPage';
 export { ForgotPasswordPage as DefaultForgotPasswordPage } from './console/auth/ForgotPasswordPage';

package/dist/index.js

@@ -6,10 +6,6 @@
  */
 // Components
 export { AppShell } from './components/AppShell';
-export { ObjectRenderer } from './components/ObjectRenderer';
-export { DashboardRenderer } from './components/DashboardRenderer';
-export { PageRenderer } from './components/PageRenderer';
-export { FormRenderer } from './components/FormRenderer';
 // Providers
 export { AdapterProvider, useAdapter } from './providers/AdapterProvider';
 export { MetadataProvider, useMetadata, useMetadataItem } from './providers/MetadataProvider';
@@ -23,7 +19,7 @@ export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute,
 // Layout chrome
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 // Top-level chrome (dialogs, providers, error boundaries)
-export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, RouteFader, toastWithUndo, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
 // Standard inner-SPA views
 export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 // Hooks
@@ -32,6 +28,9 @@ export { useFavorites, useMetadataService, useNavPins, useNavigationSync, Naviga
 export { NavigationProvider, useNavigationContext, FavoritesProvider, RecentItemsProvider, UserStateAdaptersProvider, useUserStateAdapter, useAttachUserStateAdapters, } from './context';
 // Default page implementations (consumers can partial-override slots)
 export { AppContent as DefaultAppContent } from './console/AppContent';
+export { MarketplacePage } from './console/marketplace/MarketplacePage';
+export { MarketplacePackagePage } from './console/marketplace/MarketplacePackagePage';
+export { MarketplaceInstalledPage } from './console/marketplace/MarketplaceInstalledPage';
 export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';
 export { RegisterPage as DefaultRegisterPage } from './console/auth/RegisterPage';
 export { ForgotPasswordPage as DefaultForgotPasswordPage } from './console/auth/ForgotPasswordPage';

package/dist/layout/AppHeader.js

@@ -22,7 +22,7 @@ import { SidebarTrigger, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenu
 import { Search, HelpCircle, ChevronDown, Check, Lock, Settings, LogOut, User as UserIcon, Boxes, } from 'lucide-react';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useOffline } from '@object-ui/react';
-import { PresenceAvatars } from '@object-ui/collaboration';
+import { PresenceAvatars, useTenantPresence } from '@object-ui/collaboration';
 import { ModeToggle } from './ModeToggle';
 import { LocaleSwitcher } from './LocaleSwitcher';
 import { ConnectionStatus } from './ConnectionStatus';
@@ -265,9 +265,23 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         if (!dataSource)
             return;
         const now = new Date().toISOString();
+        const ids = unread.map(n => n.id);
+        // Prefer the bulk endpoint — one HTTP/auth/RLS round-trip instead of
+        // N parallel PATCHes, which previously caused noticeable hitching
+        // (Slack-style "mark all read" jank) on inboxes with 50+ unread.
+        // Fall back to the per-id loop on adapters that don't implement it.
+        const ds = dataSource;
+        if (typeof ds.bulkUpdate === 'function') {
+            try {
+                await ds.bulkUpdate('sys_notification', ids, { is_read: true, read_at: now });
+                return;
+            }
+            catch { /* fall through to per-id loop */ }
+        }
         await Promise.all(unread.map(n => dataSource.update('sys_notification', n.id, { is_read: true, read_at: now }).catch(() => { })));
     }, [dataSource, notifications]);
-    const activeUsers = presenceUsers ?? EMPTY_PRESENCE_USERS;
+    const tenantPresence = useTenantPresence();
+    const activeUsers = presenceUsers ?? (tenantPresence.length > 0 ? tenantPresence : EMPTY_PRESENCE_USERS);
     const activeActivities = activities ?? apiActivities ?? [];
     const orgList = organizations ?? [];
     const hasOrgSection = isOrganizationsLoading || orgList.length > 0 || !!activeOrganization;

package/dist/layout/AppSidebar.js

@@ -18,7 +18,7 @@ import { ChevronsUpDown, Plus, Settings, LogOut, Database, Clock, Star, StarOff,
 import { NavigationRenderer } from '@object-ui/layout';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
-import { useAuth, getUserInitials } from '@object-ui/auth';
+import { useAuth, useIsWorkspaceAdmin, getUserInitials } from '@object-ui/auth';
 import { usePermissions } from '@object-ui/permissions';
 import { useRecentItems } from '../hooks/useRecentItems';
 import { useFavorites } from '../hooks/useFavorites';
@@ -92,6 +92,7 @@ const getIcon = resolveIcon;
 export function AppSidebar({ activeAppName, onAppChange }) {
     const { isMobile } = useSidebar();
     const { user, signOut, isAuthEnabled } = useAuth();
+    const isWorkspaceAdmin = useIsWorkspaceAdmin();
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
     const { objectLabel: resolveNavObjectLabel, viewLabel: resolveNavViewLabel } = useObjectLabel();
@@ -186,16 +187,19 @@ export function AppSidebar({ activeAppName, onAppChange }) {
     }, [registeredObjectNames]);
     const basePath = activeApp ? `/apps/${activeAppName}` : '';
     // Fallback system navigation when no active app exists — routes into the Setup app.
-    const systemFallbackNavigation = React.useMemo(() => [
-        { id: 'sys-settings', label: 'System Settings', type: 'url', url: '/apps/setup', icon: 'settings' },
-        { id: 'sys-apps', label: 'Applications', type: 'url', url: '/apps/setup/system/apps', icon: 'layout-grid' },
-        { id: 'sys-objects', label: 'Object Manager', type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' },
-        { id: 'sys-users', label: 'Users', type: 'url', url: '/apps/setup/system/users', icon: 'users' },
-        { id: 'sys-orgs', label: 'Organizations', type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' },
-        { id: 'sys-roles', label: 'Roles', type: 'url', url: '/apps/setup/system/roles', icon: 'shield' },
-        { id: 'sys-config', label: 'Configuration', type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' },
-        { id: 'sys-create-app', label: 'Create App', type: 'url', url: '/create-app', icon: 'plus' },
-    ], []);
+    // The marketplace entry is hidden from non-admin members (install is gated to
+    // owner/admin on the server, so non-admins have no reason to see it).
+    const systemFallbackNavigation = React.useMemo(() => {
+        const items = [
+            { id: 'sys-settings', label: 'System Settings', type: 'url', url: '/apps/setup', icon: 'settings' },
+            { id: 'sys-apps', label: 'Applications', type: 'url', url: '/apps/setup/system/apps', icon: 'layout-grid' },
+        ];
+        if (isWorkspaceAdmin) {
+            items.push({ id: 'sys-marketplace', label: 'App Marketplace', type: 'url', url: '/apps/setup/system/marketplace', icon: 'store' });
+        }
+        items.push({ id: 'sys-objects', label: 'Object Manager', type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' }, { id: 'sys-users', label: 'Users', type: 'url', url: '/apps/setup/system/users', icon: 'users' }, { id: 'sys-orgs', label: 'Organizations', type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' }, { id: 'sys-roles', label: 'Roles', type: 'url', url: '/apps/setup/system/roles', icon: 'shield' }, { id: 'sys-config', label: 'Configuration', type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' }, { id: 'sys-create-app', label: 'Create App', type: 'url', url: '/create-app', icon: 'plus' });
+        return items;
+    }, [isWorkspaceAdmin]);
     return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || `${activeApps.length} Apps Available` })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Switch Application" }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.home') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.addApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), "Area"] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
                                                     const AreaIcon = getIcon(area.icon);
                                                     const isActiveArea = area.id === activeAreaId;

package/dist/layout/InboxPopover.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module
  */
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button, Popover, PopoverContent, PopoverTrigger, Tabs, TabsList, TabsTrigger, TabsContent, } from '@object-ui/components';
 import { Bell, CheckSquare, Activity as ActivityIcon } from 'lucide-react';
@@ -42,8 +42,34 @@ export function InboxPopover({ notifications, unreadCount, pendingApprovalsCount
     const { currentAppName } = useNavigationContext();
     const [open, setOpen] = useState(false);
     const [tab, setTab] = useState('notifications');
+    // Sub-filter inside Notifications: default to Unread so users see what
+    // actually needs their attention first. The popover caps at 20 rows from
+    // the server (`?view=mine` already scopes to current user), so we filter
+    // client-side — switching tabs never re-fetches.
+    const [notifFilter, setNotifFilter] = useState('unread');
     const totalBadge = unreadCount + pendingApprovalsCount;
     const ariaLabel = t('sidebar.inboxAriaLabel', { defaultValue: 'Open inbox' });
+    // Pulse the bell once whenever the unread/approval pressure increases.
+    // We track the previous total in a ref so the very first render (when
+    // the counts arrive from the server) doesn't trigger a spurious pulse.
+    const prevTotalRef = useRef(null);
+    const [pulse, setPulse] = useState(false);
+    useEffect(() => {
+        const prev = prevTotalRef.current;
+        if (prev !== null && totalBadge > prev) {
+            setPulse(true);
+            const timeout = window.setTimeout(() => setPulse(false), 1200);
+            return () => window.clearTimeout(timeout);
+        }
+        prevTotalRef.current = totalBadge;
+        return undefined;
+    }, [totalBadge]);
+    // Keep prev in sync after the pulse window so a subsequent increase
+    // (e.g. 3 → 5 right after 5 settled) re-triggers the animation.
+    useEffect(() => {
+        if (!pulse)
+            prevTotalRef.current = totalBadge;
+    }, [pulse, totalBadge]);
     const goToApprovals = () => {
         setOpen(false);
         const app = currentAppName ?? params.appName;
@@ -75,10 +101,24 @@ export function InboxPopover({ notifications, unreadCount, pendingApprovalsCount
             navigate(target);
         }
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 relative shrink-0", "aria-label": ariaLabel, title: t('sidebar.inbox', { defaultValue: 'Inbox' }), children: [_jsx(Bell, { className: "h-4 w-4" }), totalBadge > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-4 min-w-[16px] rounded-full bg-red-500 text-[10px] leading-4 text-white text-center px-1", children: totalBadge > 9 ? '9+' : totalBadge }))] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-96 p-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 pt-3 pb-1", children: [_jsx("div", { className: "text-sm font-semibold", children: t('sidebar.inbox', { defaultValue: 'Inbox' }) }), tab === 'notifications' && unreadCount > 0 && (_jsx("button", { type: "button", onClick: onMarkAllRead, className: "text-xs text-muted-foreground hover:text-foreground", children: t('notifications.markAllRead', { defaultValue: 'Mark all read' }) }))] }), _jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "w-full", children: [_jsxs(TabsList, { className: "w-full justify-start rounded-none border-b bg-transparent px-1 h-9", children: [_jsxs(TabsTrigger, { value: "notifications", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(Bell, { className: "h-3.5 w-3.5" }), t('sidebar.notifications', { defaultValue: 'Notifications' }), unreadCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] text-white", children: unreadCount > 9 ? '9+' : unreadCount }))] }), _jsxs(TabsTrigger, { value: "approvals", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(CheckSquare, { className: "h-3.5 w-3.5" }), t('sidebar.approvals', { defaultValue: 'Approvals' }), pendingApprovalsCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] text-white", children: pendingApprovalsCount > 9 ? '9+' : pendingApprovalsCount }))] }), _jsxs(TabsTrigger, { value: "activity", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(ActivityIcon, { className: "h-3.5 w-3.5" }), t('sidebar.activityFeed', { defaultValue: 'Activity' })] })] }), _jsxs(TabsContent, { value: "notifications", className: "m-0 max-h-80 overflow-auto", children: [notifications.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center", children: t('notifications.empty', { defaultValue: 'No notifications' }) })) : (_jsx("ul", { className: "divide-y", children: notifications.map((n) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => handleNotificationClick(n), className: `w-full text-left px-3 py-2.5 hover:bg-accent transition-colors ${n.is_read ? '' : 'bg-accent/40'}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [!n.is_read && (_jsx("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary", "aria-hidden": true })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium leading-tight truncate", children: n.title }), n.body && (_jsx("div", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: n.body })), _jsx("div", { className: "text-[10px] text-muted-foreground mt-1", children: timeAgo(n.created_at) })] })] }) }) }, n.id))) })), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllNotifications, className: "text-xs text-primary hover:underline", children: t('notifications.viewAll', { defaultValue: 'View all notifications' }) }) })] }), _jsx(TabsContent, { value: "approvals", className: "m-0 max-h-80 overflow-auto", children: _jsx("div", { className: "px-3 py-6 text-center", children: pendingApprovalsCount > 0 ? (_jsxs(_Fragment, { children: [_jsx(CheckSquare, { className: "mx-auto h-6 w-6 text-amber-500" }), _jsx("div", { className: "mt-2 text-sm font-medium", children: t('notifications.approvalsPending', {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: `h-8 w-8 relative shrink-0 ${pulse ? 'motion-safe:animate-bounce' : ''}`, "aria-label": ariaLabel, title: t('sidebar.inbox', { defaultValue: 'Inbox' }), children: [_jsx(Bell, { className: "h-4 w-4" }), totalBadge > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-4 min-w-[16px] rounded-full bg-red-500 text-[10px] leading-4 text-white text-center px-1 motion-safe:animate-in motion-safe:zoom-in-50 motion-safe:fade-in-0 motion-safe:duration-200", children: totalBadge > 9 ? '9+' : totalBadge }, totalBadge))] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-96 p-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 pt-3 pb-1", children: [_jsx("div", { className: "text-sm font-semibold", children: t('sidebar.inbox', { defaultValue: 'Inbox' }) }), tab === 'notifications' && unreadCount > 0 && (_jsx("button", { type: "button", onClick: onMarkAllRead, className: "text-xs text-muted-foreground hover:text-foreground", children: t('notifications.markAllRead', { defaultValue: 'Mark all read' }) }))] }), _jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "w-full", children: [_jsxs(TabsList, { className: "w-full justify-start rounded-none border-b bg-transparent px-1 h-9", children: [_jsxs(TabsTrigger, { value: "notifications", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(Bell, { className: "h-3.5 w-3.5" }), t('sidebar.notifications', { defaultValue: 'Notifications' }), unreadCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] text-white motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-200", children: unreadCount > 9 ? '9+' : unreadCount }, `notif-${unreadCount}`))] }), _jsxs(TabsTrigger, { value: "approvals", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(CheckSquare, { className: "h-3.5 w-3.5" }), t('sidebar.approvals', { defaultValue: 'Approvals' }), pendingApprovalsCount > 0 && (_jsx("span", { className: "ml-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] text-white motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-200", children: pendingApprovalsCount > 9 ? '9+' : pendingApprovalsCount }, `appr-${pendingApprovalsCount}`))] }), _jsxs(TabsTrigger, { value: "activity", className: "text-xs gap-1.5 data-[state=active]:bg-transparent", children: [_jsx(ActivityIcon, { className: "h-3.5 w-3.5" }), t('sidebar.activityFeed', { defaultValue: 'Activity' })] })] }), _jsxs(TabsContent, { value: "notifications", className: "m-0 max-h-80 overflow-auto", children: [_jsxs("div", { className: "flex items-center gap-1 border-b px-2 py-1.5", children: [_jsxs("button", { type: "button", onClick: () => setNotifFilter('unread'), className: `text-xs px-2 py-1 rounded-md transition-colors ${notifFilter === 'unread'
+                                                    ? 'bg-accent text-foreground font-medium'
+                                                    : 'text-muted-foreground hover:text-foreground'}`, children: [t('notifications.filterUnread', { defaultValue: 'Unread' }), unreadCount > 0 && (_jsx("span", { className: "ml-1 text-[10px] opacity-70", children: unreadCount }))] }), _jsx("button", { type: "button", onClick: () => setNotifFilter('all'), className: `text-xs px-2 py-1 rounded-md transition-colors ${notifFilter === 'all'
+                                                    ? 'bg-accent text-foreground font-medium'
+                                                    : 'text-muted-foreground hover:text-foreground'}`, children: t('notifications.filterAll', { defaultValue: 'All' }) })] }), (() => {
+                                        const visible = notifFilter === 'unread'
+                                            ? notifications.filter((n) => !n.is_read)
+                                            : notifications;
+                                        if (visible.length === 0) {
+                                            return (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300", children: notifFilter === 'unread'
+                                                    ? t('notifications.emptyUnread', { defaultValue: "You're all caught up" })
+                                                    : t('notifications.empty', { defaultValue: 'No notifications' }) }));
+                                        }
+                                        return (_jsx("ul", { className: "divide-y", children: visible.map((n, idx) => (_jsx("li", { className: "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200", style: { animationDelay: `${Math.min(idx, 6) * 20}ms` }, children: _jsx("button", { type: "button", onClick: () => handleNotificationClick(n), className: `w-full text-left px-3 py-2.5 hover:bg-accent transition-colors duration-150 ${n.is_read ? '' : 'bg-accent/40'}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: `mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary transition-opacity duration-200 ${n.is_read ? 'opacity-0' : 'opacity-100'}`, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium leading-tight truncate", children: n.title }), n.body && (_jsx("div", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: n.body })), _jsx("div", { className: "text-[10px] text-muted-foreground mt-1", children: timeAgo(n.created_at) })] })] }) }) }, n.id))) }));
+                                    })(), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllNotifications, className: "text-xs text-primary hover:underline", children: t('notifications.viewAll', { defaultValue: 'View all notifications' }) }) })] }), _jsx(TabsContent, { value: "approvals", className: "m-0 max-h-80 overflow-auto", children: _jsx("div", { className: "px-3 py-6 text-center motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300", children: pendingApprovalsCount > 0 ? (_jsxs(_Fragment, { children: [_jsx(CheckSquare, { className: "mx-auto h-6 w-6 text-amber-500 motion-safe:animate-in motion-safe:zoom-in-50 motion-safe:duration-300" }), _jsx("div", { className: "mt-2 text-sm font-medium", children: t('notifications.approvalsPending', {
                                                     defaultValue: '{{count}} pending approvals',
                                                     count: pendingApprovalsCount,
                                                 }) }), _jsx(Button, { size: "sm", className: "mt-3", onClick: goToApprovals, children: t('notifications.viewApprovals', { defaultValue: 'View approvals' }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm text-muted-foreground", children: t('notifications.noPendingApprovals', {
                                                     defaultValue: 'No pending approvals',
-                                                }) }), _jsx("button", { type: "button", onClick: goToApprovals, className: "mt-2 text-xs text-primary hover:underline", children: t('notifications.openApprovalsInbox', { defaultValue: 'Open Approvals Inbox' }) })] })) }) }), _jsxs(TabsContent, { value: "activity", className: "m-0 max-h-80 overflow-auto", children: [activities.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center", children: t('layout.activityFeed.empty', { defaultValue: 'No recent activity' }) })) : (_jsx("ul", { className: "divide-y", children: activities.slice(0, 20).map((a) => (_jsxs("li", { className: "px-3 py-2.5", children: [_jsxs("div", { className: "text-sm leading-tight truncate", children: [_jsx("span", { className: "font-medium", children: a.user }), ' ', _jsx("span", { className: "text-muted-foreground", children: a.description })] }), _jsxs("div", { className: "text-[10px] text-muted-foreground mt-0.5", children: [timeAgo(a.timestamp), " \u00B7 ", a.objectName] })] }, a.id))) })), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllActivity, className: "text-xs text-primary hover:underline", children: t('layout.activityFeed.viewAll', { defaultValue: 'View all activity' }) }) })] })] })] })] }));
+                                                }) }), _jsx("button", { type: "button", onClick: goToApprovals, className: "mt-2 text-xs text-primary hover:underline", children: t('notifications.openApprovalsInbox', { defaultValue: 'Open Approvals Inbox' }) })] })) }) }), _jsxs(TabsContent, { value: "activity", className: "m-0 max-h-80 overflow-auto", children: [activities.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-sm text-muted-foreground text-center motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300", children: t('layout.activityFeed.empty', { defaultValue: 'No recent activity' }) })) : (_jsx("ul", { className: "divide-y", children: activities.slice(0, 20).map((a, idx) => (_jsxs("li", { className: "px-3 py-2.5 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200", style: { animationDelay: `${Math.min(idx, 6) * 20}ms` }, children: [_jsxs("div", { className: "text-sm leading-tight truncate", children: [_jsx("span", { className: "font-medium", children: a.user }), ' ', _jsx("span", { className: "text-muted-foreground", children: a.description })] }), _jsxs("div", { className: "text-[10px] text-muted-foreground mt-0.5", children: [timeAgo(a.timestamp), " \u00B7 ", a.objectName] })] }, a.id))) })), _jsx("div", { className: "border-t px-3 py-2 text-center", children: _jsx("button", { type: "button", onClick: goToAllActivity, className: "text-xs text-primary hover:underline", children: t('layout.activityFeed.viewAll', { defaultValue: 'View all activity' }) }) })] })] })] })] }));
 }