@object-ui/app-shell 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+# @object-ui/app-shell — Changelog
+
+## 3.3.1
+
+### Patch Changes
+
+- b429568: chore(examples): relocate console templates under `examples/`
+
+  The fork-ready ObjectStack console template moved from `apps/console-starter`
+  to `examples/console-starter`, so `apps/` only contains real deployable
+  products (`console`, `site`). The third-party integration demo
+  `examples/minimal-console` was renamed to `examples/byo-backend-console`
+  to make its "bring-your-own backend" purpose explicit and to remove the
+  naming collision with the starter template. Source comments and READMEs in
+  `@object-ui/app-shell` and `@object-ui/components` have been updated to
+  point at the new paths; no runtime behaviour changed. A new
+  `examples/README.md` provides a "which example should I use?" selector.
+
+- Updated dependencies [b429568]
+  - @object-ui/components@3.3.1
+  - @object-ui/fields@3.3.1
+  - @object-ui/layout@3.3.1
+  - @object-ui/plugin-calendar@3.3.1
+  - @object-ui/plugin-charts@3.3.1
+  - @object-ui/plugin-chatbot@3.3.1
+  - @object-ui/plugin-dashboard@3.3.1
+  - @object-ui/plugin-designer@3.3.1
+  - @object-ui/plugin-detail@3.3.1
+  - @object-ui/plugin-form@3.3.1
+  - @object-ui/plugin-grid@3.3.1
+  - @object-ui/plugin-kanban@3.3.1
+  - @object-ui/plugin-list@3.3.1
+  - @object-ui/plugin-report@3.3.1
+  - @object-ui/plugin-view@3.3.1
+  - @object-ui/types@3.3.1
+  - @object-ui/core@3.3.1
+  - @object-ui/i18n@3.3.1
+  - @object-ui/react@3.3.1
+  - @object-ui/data-objectstack@3.3.1
+  - @object-ui/auth@3.3.1
+  - @object-ui/permissions@3.3.1
+  - @object-ui/collaboration@3.3.1
+
+All notable changes to this package will be documented in this file.
+See the [monorepo CHANGELOG](../../CHANGELOG.md) for cross-package release notes.

package/README.md

@@ -168,13 +168,33 @@ Third-Party App
 
 ## Examples
 
-See `examples/minimal-console` for a complete working example that demonstrates:
+See `examples/byo-backend-console` for a complete working example that demonstrates:
 - Custom routing with React Router
 - Custom data adapter (not ObjectStack)
 - Custom authentication
 - Cherry-picking only needed components
 - Building a console in ~100 lines of code
 
+<!-- release-metadata:v3.3.0 -->
+
+## Compatibility
+
+- **React:** 18.x or 19.x
+- **Node.js:** ≥ 18
+- **TypeScript:** ≥ 5.0 (strict mode)
+- **`@objectstack/spec`:** ^3.3.0
+- **`@objectstack/client`:** ^3.3.0
+- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+
+## Links
+
+- 📚 [Documentation](https://www.objectui.org/docs/layout/app-shell)
+- 📦 [npm package](https://www.npmjs.com/package/@object-ui/app-shell)
+- 📝 [Changelog](./CHANGELOG.md)
+- 🐛 [Report an issue](https://github.com/objectstack-ai/objectui/issues)
+- 🤝 [Contributing Guide](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md)
+- 🗺️ [Roadmap](https://github.com/objectstack-ai/objectui/blob/main/ROADMAP.md)
+
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).

package/dist/chrome/CommandPalette.d.ts

@@ -0,0 +1,16 @@
+/**
+ * CommandPalette
+ *
+ * A ⌘+K (Ctrl+K) command palette for quick navigation across apps, objects,
+ * dashboards, pages, reports, and global actions.
+ *
+ * Uses Shadcn's Command (cmdk) component — keyboard-accessible, fuzzy search.
+ */
+interface CommandPaletteProps {
+    apps: any[];
+    activeApp: any;
+    objects: any[];
+    onAppChange: (name: string) => void;
+}
+export declare function CommandPalette({ apps, activeApp, objects: _objects, onAppChange }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chrome/CommandPalette.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * CommandPalette
+ *
+ * A ⌘+K (Ctrl+K) command palette for quick navigation across apps, objects,
+ * dashboards, pages, reports, and global actions.
+ *
+ * Uses Shadcn's Command (cmdk) component — keyboard-accessible, fuzzy search.
+ */
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import * as LucideIcons from 'lucide-react';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from '@object-ui/components';
+import { LayoutDashboard, FileText, BarChart3, Database, Moon, Sun, Monitor, Search, Plus, } from 'lucide-react';
+import { useTheme } from './ThemeProvider';
+import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { resolveI18nLabel } from '../utils';
+/** Resolve a Lucide icon by name (kebab-case or PascalCase) */
+function getIcon(name) {
+    if (!name)
+        return Database;
+    if (LucideIcons[name])
+        return LucideIcons[name];
+    const pascal = name
+        .split('-')
+        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
+        .join('');
+    if (LucideIcons[pascal])
+        return LucideIcons[pascal];
+    return Database;
+}
+export function CommandPalette({ apps, activeApp, objects: _objects, onAppChange }) {
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+    const { appName } = useParams();
+    const { setTheme } = useTheme();
+    const { evaluator } = useExpressionContext();
+    const { t } = useObjectTranslation();
+    // ⌘+K / Ctrl+K shortcut
+    useEffect(() => {
+        const down = (e) => {
+            if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                setOpen(prev => !prev);
+            }
+        };
+        document.addEventListener('keydown', down);
+        return () => document.removeEventListener('keydown', down);
+    }, []);
+    const baseUrl = `/apps/${appName || activeApp?.name}`;
+    const runCommand = useCallback((command) => {
+        setOpen(false);
+        command();
+    }, []);
+    // Extract navigation items from active app, filtering by visibility expressions
+    const navItems = flattenNavigation(activeApp?.navigation || []).filter((item) => evaluateVisibility(item.visible ?? item.visibleOn, evaluator));
+    return (_jsxs(CommandDialog, { open: open, onOpenChange: setOpen, children: [_jsx(CommandInput, { placeholder: t('console.commandPalette.placeholder') }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: t('console.commandPalette.noResults') }), navItems.filter(i => i.type === 'object').length > 0 && (_jsx(CommandGroup, { heading: t('console.commandPalette.objects'), children: navItems
+                            .filter(i => i.type === 'object')
+                            .map(item => {
+                            const Icon = getIcon(item.icon);
+                            return (_jsxs(CommandItem, { value: `object ${resolveI18nLabel(item.label, t)} ${item.objectName}`, onSelect: () => runCommand(() => navigate(`${baseUrl}/${item.objectName}`)), children: [_jsx(Icon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: resolveI18nLabel(item.label, t) })] }, item.id));
+                        }) })), navItems.filter(i => i.type === 'dashboard').length > 0 && (_jsx(CommandGroup, { heading: t('console.commandPalette.dashboards'), children: navItems
+                            .filter(i => i.type === 'dashboard')
+                            .map(item => (_jsxs(CommandItem, { value: `dashboard ${resolveI18nLabel(item.label, t)} ${item.dashboardName}`, onSelect: () => runCommand(() => navigate(`${baseUrl}/dashboard/${item.dashboardName}`)), children: [_jsx(LayoutDashboard, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: resolveI18nLabel(item.label, t) })] }, item.id))) })), navItems.filter(i => i.type === 'page').length > 0 && (_jsx(CommandGroup, { heading: t('console.commandPalette.pages'), children: navItems
+                            .filter(i => i.type === 'page')
+                            .map(item => (_jsxs(CommandItem, { value: `page ${resolveI18nLabel(item.label, t)} ${item.pageName}`, onSelect: () => runCommand(() => navigate(`${baseUrl}/page/${item.pageName}`)), children: [_jsx(FileText, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: resolveI18nLabel(item.label, t) })] }, item.id))) })), navItems.filter(i => i.type === 'report').length > 0 && (_jsx(CommandGroup, { heading: t('console.commandPalette.reports'), children: navItems
+                            .filter(i => i.type === 'report')
+                            .map(item => (_jsxs(CommandItem, { value: `report ${resolveI18nLabel(item.label, t)} ${item.reportName}`, onSelect: () => runCommand(() => navigate(`${baseUrl}/report/${item.reportName}`)), children: [_jsx(BarChart3, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: resolveI18nLabel(item.label, t) })] }, item.id))) })), apps.filter(a => a.active !== false).length > 1 && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { heading: t('console.commandPalette.switchApp'), children: apps
+                                    .filter(a => a.active !== false)
+                                    .map(app => {
+                                    const Icon = getIcon(app.icon);
+                                    return (_jsxs(CommandItem, { value: `app ${resolveI18nLabel(app.label, t)} ${app.name}`, onSelect: () => runCommand(() => onAppChange(app.name)), children: [_jsx(Icon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: resolveI18nLabel(app.label, t) }), app.name === activeApp?.name && (_jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: t('console.commandPalette.current') }))] }, app.name));
+                                }) })] })), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: t('console.commandPalette.preferences'), children: [_jsxs(CommandItem, { value: "theme light", onSelect: () => runCommand(() => setTheme('light')), children: [_jsx(Sun, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('console.commandPalette.lightTheme') })] }), _jsxs(CommandItem, { value: "theme dark", onSelect: () => runCommand(() => setTheme('dark')), children: [_jsx(Moon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('console.commandPalette.darkTheme') })] }), _jsxs(CommandItem, { value: "theme system", onSelect: () => runCommand(() => setTheme('system')), children: [_jsx(Monitor, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('console.commandPalette.systemTheme') })] })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: t('console.commandPalette.actions'), children: [_jsxs(CommandItem, { value: "create new app application", onSelect: () => runCommand(() => navigate(`${baseUrl}/create-app`)), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('console.commandPalette.createApp') })] }), _jsxs(CommandItem, { value: "search all results full page", onSelect: () => runCommand(() => navigate(`${baseUrl}/search`)), children: [_jsx(Search, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: t('console.commandPalette.openFullSearch') })] })] })] })] }));
+}
+/** Flatten nested navigation groups into a flat list of leaf items */
+function flattenNavigation(items) {
+    const result = [];
+    for (const item of items) {
+        if (item.type === 'group' && item.children) {
+            result.push(...flattenNavigation(item.children));
+        }
+        else {
+            result.push(item);
+        }
+    }
+    return result;
+}

package/dist/chrome/ConditionalAuthWrapper.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ObjectUI Console - Conditional Auth Wrapper
+ *
+ * This component fetches discovery information from the server and conditionally
+ * enables/disables authentication based on the server's auth service status.
+ * Also detects preview mode from the server and configures the auth provider accordingly.
+ */
+import { ReactNode } from 'react';
+interface ConditionalAuthWrapperProps {
+    children: ReactNode;
+    authUrl: string;
+}
+/**
+ * Wrapper component that conditionally enables authentication based on server discovery.
+ *
+ * On startup it:
+ * 1. Calls `/api/v1/discovery` (with a 10s AbortController timeout)
+ * 2. Detects preview mode + auth.enabled from the response
+ * 3. On failure, shows the LoadingScreen in error mode with a Retry button
+ *    (no silent fallback to "auth enabled" — the user is told the server is unreachable)
+ */
+export declare function ConditionalAuthWrapper({ children, authUrl }: ConditionalAuthWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chrome/ConditionalAuthWrapper.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ObjectUI Console - Conditional Auth Wrapper
+ *
+ * This component fetches discovery information from the server and conditionally
+ * enables/disables authentication based on the server's auth service status.
+ * Also detects preview mode from the server and configures the auth provider accordingly.
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { getSharedDiscovery } from '@object-ui/data-objectstack';
+import { AuthProvider } from '@object-ui/auth';
+import { LoadingScreen } from './LoadingScreen';
+const DISCOVERY_TIMEOUT_MS = 10000;
+// Bootstrap-critical UI: must render before i18n is loaded (especially when the
+// server is unreachable, which is also when i18n can't load translations).
+// We deliberately do NOT use useObjectTranslation here — it suspends on first
+// render and would prevent the discovery fetch from ever running.
+const STRINGS = {
+    timeout: 'Connection timed out after 10 seconds.',
+    serverUnreachable: (url) => `The server at ${url} is unreachable.`,
+};
+/**
+ * Wrapper component that conditionally enables authentication based on server discovery.
+ *
+ * On startup it:
+ * 1. Calls `/api/v1/discovery` (with a 10s AbortController timeout)
+ * 2. Detects preview mode + auth.enabled from the response
+ * 3. On failure, shows the LoadingScreen in error mode with a Retry button
+ *    (no silent fallback to "auth enabled" — the user is told the server is unreachable)
+ */
+export function ConditionalAuthWrapper({ children, authUrl }) {
+    const [authEnabled, setAuthEnabled] = useState(null);
+    const [previewMode, setPreviewMode] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [retrying, setRetrying] = useState(false);
+    const runDiscovery = useCallback(async (isRetry = false) => {
+        if (isRetry)
+            setRetrying(true);
+        setError(null);
+        const baseUrl = import.meta.env.VITE_SERVER_URL || '';
+        const discoveryUrl = baseUrl
+            ? `${baseUrl.replace(/\/$/, '')}/api/v1/discovery`
+            : '/api/v1/discovery';
+        try {
+            const discovery = (await getSharedDiscovery(baseUrl, async () => {
+                const ctrl = new AbortController();
+                const timeoutId = setTimeout(() => ctrl.abort(), DISCOVERY_TIMEOUT_MS);
+                try {
+                    const res = await fetch(discoveryUrl, {
+                        credentials: 'include',
+                        signal: ctrl.signal,
+                    });
+                    if (!res.ok) {
+                        throw new Error(`HTTP ${res.status}`);
+                    }
+                    const body = await res.json();
+                    if (body && typeof body.success === 'boolean' && 'data' in body) {
+                        return body.data;
+                    }
+                    return body;
+                }
+                catch (e) {
+                    if (e.name === 'AbortError') {
+                        throw new Error('timeout');
+                    }
+                    throw e;
+                }
+                finally {
+                    clearTimeout(timeoutId);
+                }
+            }));
+            // Defensive: an empty/undefined discovery means the server didn't actually
+            // respond with usable data (e.g. a cached rejection that resolved as null,
+            // or an upstream adapter swallowed the error). Treat it as a connectivity
+            // failure so the user sees the error UI instead of being silently dropped
+            // onto a "auth enabled" code path against a non-existent server.
+            if (!discovery) {
+                throw new Error('empty discovery response');
+            }
+            if (discovery?.mode === 'preview') {
+                setPreviewMode({
+                    autoLogin: discovery.previewMode?.autoLogin ?? true,
+                    simulatedRole: discovery.previewMode?.simulatedRole ?? 'admin',
+                    simulatedUserName: discovery.previewMode?.simulatedUserName ?? 'Preview User',
+                    readOnly: discovery.previewMode?.readOnly ?? false,
+                    expiresInSeconds: discovery.previewMode?.expiresInSeconds ?? 0,
+                    bannerMessage: discovery.previewMode?.bannerMessage,
+                });
+                setAuthEnabled(false);
+            }
+            else {
+                const isAuthEnabled = discovery?.services?.auth?.enabled ?? true;
+                setAuthEnabled(isAuthEnabled);
+            }
+            setIsLoading(false);
+        }
+        catch (e) {
+            const err = e;
+            let message;
+            if (err.message === 'timeout') {
+                message = STRINGS.timeout;
+            }
+            else if (err.message?.startsWith('HTTP ')) {
+                message = `${STRINGS.serverUnreachable(discoveryUrl)} (${err.message})`;
+            }
+            else {
+                message = `${STRINGS.serverUnreachable(discoveryUrl)}${err.message ? ` (${err.message})` : ''}`;
+            }
+            console.warn('[ConditionalAuthWrapper] Discovery failed:', err);
+            setError(message);
+            // Keep isLoading true so the splash stays mounted with the error UI.
+            setIsLoading(true);
+        }
+        finally {
+            setRetrying(false);
+        }
+    }, []);
+    useEffect(() => {
+        runDiscovery();
+    }, [runDiscovery]);
+    if (isLoading) {
+        return (_jsx(LoadingScreen, { error: error, onRetry: error ? () => runDiscovery(true) : undefined, retrying: retrying }));
+    }
+    // If in preview mode, wrap with a preview-configured AuthProvider
+    if (previewMode) {
+        return (_jsx(AuthProvider, { authUrl: authUrl, previewMode: previewMode, children: children }));
+    }
+    // If auth is enabled, wrap with AuthProvider
+    if (authEnabled) {
+        return (_jsx(AuthProvider, { authUrl: authUrl, children: children }));
+    }
+    // If auth is disabled, wrap with a disabled AuthProvider (guest mode)
+    return (_jsx(AuthProvider, { authUrl: authUrl, enabled: false, children: children }));
+}

package/dist/chrome/ConsoleToaster.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ConsoleToaster
+ *
+ * Sonner Toaster configured for the console app. Uses the local ThemeProvider
+ * instead of next-themes to resolve the current color scheme.
+ * @module
+ */
+import { Toaster as Sonner } from 'sonner';
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+export declare function ConsoleToaster(props: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chrome/ConsoleToaster.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ConsoleToaster
+ *
+ * Sonner Toaster configured for the console app. Uses the local ThemeProvider
+ * instead of next-themes to resolve the current color scheme.
+ * @module
+ */
+import { Toaster as Sonner } from 'sonner';
+import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert } from 'lucide-react';
+import { useTheme } from './ThemeProvider';
+export function ConsoleToaster(props) {
+    const { theme = 'system' } = useTheme();
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+            success: _jsx(CircleCheck, { className: "h-4 w-4" }),
+            info: _jsx(Info, { className: "h-4 w-4" }),
+            warning: _jsx(TriangleAlert, { className: "h-4 w-4" }),
+            error: _jsx(OctagonX, { className: "h-4 w-4" }),
+            loading: _jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
+        }, toastOptions: {
+            classNames: {
+                toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+            },
+        }, ...props }));
+}

package/dist/chrome/ErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ErrorBoundary
+ *
+ * Catches unhandled React render errors per route and displays a
+ * user-friendly fallback UI with a "Try Again" recovery action.
+ *
+ * Usage:
+ *   <ErrorBoundary>
+ *     <SomeComponent />
+ *   </ErrorBoundary>
+ *
+ * Or with a custom fallback:
+ *   <ErrorBoundary fallback={<MyError />}>
+ *     <SomeComponent />
+ *   </ErrorBoundary>
+ */
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    /** Custom fallback UI. Receives error and resetErrorBoundary. */
+    fallback?: ReactNode | ((props: {
+        error: Error;
+        reset: () => void;
+    }) => ReactNode);
+    /** Callback when an error is caught */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    resetErrorBoundary: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/chrome/ErrorBoundary.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ErrorBoundary
+ *
+ * Catches unhandled React render errors per route and displays a
+ * user-friendly fallback UI with a "Try Again" recovery action.
+ *
+ * Usage:
+ *   <ErrorBoundary>
+ *     <SomeComponent />
+ *   </ErrorBoundary>
+ *
+ * Or with a custom fallback:
+ *   <ErrorBoundary fallback={<MyError />}>
+ *     <SomeComponent />
+ *   </ErrorBoundary>
+ */
+import { Component } from 'react';
+import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { AlertTriangle, RotateCcw, Home } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
+/** Inner fallback component that uses the i18n hook */
+function DefaultErrorFallback({ error, onReset }) {
+    const { t } = useObjectTranslation();
+    return (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "max-w-md text-center", children: [_jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: _jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }), _jsx(EmptyTitle, { children: t('console.errors.somethingWentWrong') }), _jsx(EmptyDescription, { className: "mb-4", children: error.message || t('console.errors.unexpectedError') }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onReset, className: "gap-2", children: [_jsx(RotateCcw, { className: "h-4 w-4" }), t('console.errors.tryAgain')] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => { window.location.href = '/'; }, className: "gap-2", children: [_jsx(Home, { className: "h-4 w-4" }), t('console.errors.goHome')] })] })] }), import.meta.env.DEV && (_jsxs("details", { className: "mt-6 text-left", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: t('console.errors.errorDetails') }), _jsx("pre", { className: "mt-2 max-h-60 overflow-auto rounded-md border bg-muted p-3 text-xs", children: error.stack })] }))] }) }));
+}
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "resetErrorBoundary", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: null });
+            }
+        });
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('[ErrorBoundary] Caught error:', error, errorInfo);
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            // Custom fallback
+            if (this.props.fallback) {
+                if (typeof this.props.fallback === 'function') {
+                    return this.props.fallback({
+                        error: this.state.error,
+                        reset: this.resetErrorBoundary,
+                    });
+                }
+                return this.props.fallback;
+            }
+            // Default fallback UI
+            return (_jsx(DefaultErrorFallback, { error: this.state.error, onReset: this.resetErrorBoundary }));
+        }
+        return this.props.children;
+    }
+}

package/dist/chrome/KeyboardShortcutsDialog.d.ts

@@ -0,0 +1,7 @@
+/**
+ * KeyboardShortcutsDialog
+ *
+ * A dialog listing all available keyboard shortcuts, triggered by pressing "?".
+ * @module
+ */
+export declare function KeyboardShortcutsDialog(): import("react/jsx-runtime").JSX.Element;

package/dist/chrome/KeyboardShortcutsDialog.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * KeyboardShortcutsDialog
+ *
+ * A dialog listing all available keyboard shortcuts, triggered by pressing "?".
+ * @module
+ */
+import { useEffect, useState, useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+export function KeyboardShortcutsDialog() {
+    const { t } = useObjectTranslation();
+    const [open, setOpen] = useState(false);
+    const shortcutGroups = useMemo(() => [
+        {
+            title: t('console.shortcuts.groups.general'),
+            shortcuts: [
+                { keys: ['⌘', 'K'], description: t('console.shortcuts.openCommandPalette') },
+                { keys: ['?'], description: t('console.shortcuts.showShortcuts') },
+                { keys: ['Esc'], description: t('console.shortcuts.closeDialog') },
+            ],
+        },
+        {
+            title: t('console.shortcuts.groups.navigation'),
+            shortcuts: [
+                { keys: ['B'], description: t('console.shortcuts.toggleSidebar') },
+                { keys: ['⌘', '/'], description: t('console.shortcuts.focusSearch') },
+            ],
+        },
+        {
+            title: t('console.shortcuts.groups.dataViews'),
+            shortcuts: [
+                { keys: ['N'], description: t('console.shortcuts.createRecord') },
+                { keys: ['R'], description: t('console.shortcuts.refreshData') },
+                { keys: ['⌘', 'E'], description: t('console.shortcuts.editRecord') },
+            ],
+        },
+        {
+            title: t('console.shortcuts.groups.preferences'),
+            shortcuts: [
+                { keys: ['⌘', 'D'], description: t('console.shortcuts.toggleDarkMode') },
+            ],
+        },
+    ], [t]);
+    useEffect(() => {
+        function handleKeyDown(e) {
+            // Only trigger when not in an input/textarea/contenteditable
+            const target = e.target;
+            if (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable) {
+                return;
+            }
+            if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                e.preventDefault();
+                setOpen(prev => !prev);
+            }
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, []);
+    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "sm:max-w-lg max-h-[80vh] overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('console.shortcuts.title') }), _jsx(DialogDescription, { children: t('console.shortcuts.description') })] }), _jsx("div", { className: "space-y-6 pt-2", children: shortcutGroups.map(group => (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-muted-foreground mb-3", children: group.title }), _jsx("div", { className: "space-y-2", children: group.shortcuts.map((shortcut, idx) => (_jsxs("div", { className: "flex items-center justify-between py-1.5", children: [_jsx("span", { className: "text-sm", children: shortcut.description }), _jsx("div", { className: "flex items-center gap-1", children: shortcut.keys.map((key, kidx) => (_jsx("kbd", { className: "inline-flex h-6 min-w-[24px] items-center justify-center rounded border bg-muted px-1.5 text-xs font-medium text-muted-foreground", children: key }, kidx))) })] }, idx))) })] }, group.title))) })] }) }));
+}

package/dist/chrome/LoadingScreen.d.ts

@@ -0,0 +1,12 @@
+interface LoadingScreenProps {
+    /** Optional message override */
+    message?: string;
+    /** When set, renders an error block instead of the step list */
+    error?: string | null;
+    /** Optional retry callback; renders a Retry button when provided alongside `error` */
+    onRetry?: () => void;
+    /** When true, disables the retry button and shows a spinner */
+    retrying?: boolean;
+}
+export declare function LoadingScreen({ message, error, onRetry, retrying }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chrome/LoadingScreen.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spinner, Button } from '@object-ui/components';
+import { Database, CheckCircle2, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import { useState, useEffect, useMemo } from 'react';
+// Bootstrap-critical UI: must render before i18n is loaded (especially when the
+// server is unreachable, which is also when i18n can't load translations).
+// We deliberately do NOT use useObjectTranslation here — it suspends on first
+// render and would prevent the splash from rendering at all on a server-down
+// boot. Strings stay hardcoded English; localized error UX should happen
+// post-bootstrap, after i18n has loaded successfully.
+const STRINGS = {
+    title: 'ObjectUI Console',
+    initializing: 'Initializing…',
+    steps: {
+        connecting: 'Connecting to server',
+        loadingConfig: 'Loading configuration',
+        preparingWorkspace: 'Preparing workspace',
+    },
+    error: {
+        connectionFailed: 'Cannot connect to server',
+        checkServer: 'Please check your network connection or that the backend is running.',
+    },
+    actions: {
+        retry: 'Retry',
+        retrying: 'Retrying…',
+    },
+};
+export function LoadingScreen({ message, error, onRetry, retrying }) {
+    const [currentStep, setCurrentStep] = useState(0);
+    const loadingSteps = useMemo(() => [
+        STRINGS.steps.connecting,
+        STRINGS.steps.loadingConfig,
+        STRINGS.steps.preparingWorkspace,
+    ], []);
+    useEffect(() => {
+        if (message || error)
+            return; // skip auto-progression when overridden or in error state
+        const timer = setInterval(() => {
+            setCurrentStep((prev) => Math.min(prev + 1, loadingSteps.length - 1));
+        }, 1200);
+        return () => clearInterval(timer);
+    }, [message, error, loadingSteps.length]);
+    return (_jsx("div", { className: "flex flex-col items-center justify-center h-screen bg-background", children: _jsxs("div", { className: "flex flex-col items-center gap-6", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 bg-primary/20 rounded-2xl blur-xl animate-pulse" }), _jsx("div", { className: "relative bg-linear-to-br from-primary to-primary/80 p-4 rounded-2xl shadow-lg", children: _jsx(Database, { className: "h-10 w-10 text-primary-foreground" }) })] }), _jsxs("div", { className: "text-center space-y-2", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: STRINGS.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: STRINGS.initializing })] }), error ? (_jsxs("div", { className: "flex flex-col items-center gap-4 max-w-md w-full px-6", children: [_jsxs("div", { className: "flex flex-col items-center gap-3 p-5 rounded-lg border border-destructive/30 bg-destructive/5 w-full", children: [_jsxs("div", { className: "flex items-center gap-2 text-destructive", children: [_jsx(AlertCircle, { className: "h-5 w-5 shrink-0" }), _jsx("span", { className: "text-sm font-semibold", children: STRINGS.error.connectionFailed })] }), _jsx("p", { className: "text-xs text-muted-foreground text-center break-words", children: error }), _jsx("p", { className: "text-xs text-muted-foreground text-center", children: STRINGS.error.checkServer })] }), onRetry && (_jsx(Button, { onClick: onRetry, disabled: retrying, variant: "default", size: "sm", className: "gap-2", children: retrying ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), STRINGS.actions.retrying] })) : (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "h-4 w-4" }), STRINGS.actions.retry] })) }))] })) : message ? (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2 bg-muted/50 rounded-full", children: [_jsx(Spinner, { className: "h-4 w-4 text-primary" }), _jsx("span", { className: "text-sm text-muted-foreground", children: message })] })) : (_jsx("div", { className: "flex flex-col gap-2 w-64", children: loadingSteps.map((step, index) => (_jsxs("div", { className: "flex items-center gap-2.5 text-sm transition-opacity duration-300", style: { opacity: index <= currentStep ? 1 : 0.3 }, children: [index < currentStep ? (_jsx(CheckCircle2, { className: "h-4 w-4 text-primary shrink-0" })) : index === currentStep ? (_jsx(Loader2, { className: "h-4 w-4 text-primary shrink-0 animate-spin" })) : (_jsx("div", { className: "h-4 w-4 rounded-full border border-muted-foreground/30 shrink-0" })), _jsx("span", { className: index <= currentStep ? 'text-foreground' : 'text-muted-foreground', children: step })] }, step))) }))] }) }));
+}

package/dist/chrome/OnboardingWalkthrough.d.ts

@@ -0,0 +1,9 @@
+/**
+ * OnboardingWalkthrough
+ *
+ * Intentionally disabled. The first-time onboarding dialog has been
+ * suppressed per product decision. To re-enable, restore the full
+ * implementation from git history (see the commit that introduced this stub).
+ * @module
+ */
+export declare function OnboardingWalkthrough(): null;