@datalayer/core 0.0.16 → 0.0.18

package/lib/tools/adapters/agui/notebookHooks.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * React hooks and components for ag-ui (CopilotKit) notebook tool registration.
+ * Provides: useNotebookToolActions, ActionRegistrar, UseFrontendToolFn.
+ *
+ * @module tools/adapters/agui/notebookHooks
+ */
+import { useMemo } from 'react';
+// TODO: Re-enable when @datalayer/jupyter-react exports these
+// import type { ToolExecutionContext } from '@datalayer/jupyter-react';
+import { createAllCopilotKitActions, ActionRegistrar, } from './AgUIToolAdapter';
+// Import from patched @datalayer/jupyter-react package
+import { notebookStore2, DefaultExecutor, notebookToolDefinitions, notebookToolOperations, } from '@datalayer/jupyter-react';
+// Hook wrapper to get notebook store state
+const useNotebookStore2 = () => notebookStore2.getState();
+// Re-export shared types and components for convenience
+export { ActionRegistrar };
+/**
+ * Hook that creates CopilotKit actions for notebook tools.
+ * Returns stable actions array that won't cause re-renders.
+ *
+ * @param documentId - Document ID (notebook identifier)
+ * @param contextOverrides - Optional context overrides (format, extras, etc.)
+ * @returns CopilotKit actions
+ *
+ * @example
+ * ```typescript
+ * // Default context (toon format for AI)
+ * const actions = useNotebookToolActions("my-notebook-id");
+ *
+ * // Custom format
+ * const actions = useNotebookToolActions("my-notebook-id", { format: 'json' });
+ *
+ * // With extras
+ * const actions = useNotebookToolActions("my-notebook-id", {
+ *   format: 'toon',
+ *   extras: { userId: '123', theme: 'dark' }
+ * });
+ * ```
+ */
+export function useNotebookToolActions(documentId, contextOverrides) {
+    const notebookStore = useNotebookStore2();
+    // Create DefaultExecutor (stable reference)
+    // Only recreate when documentId changes, not on every state update
+    // The executor holds a reference to the store which is always current
+    const executor = useMemo(() => new DefaultExecutor(documentId, notebookStore), [documentId]);
+    // Create stable context object with useMemo
+    // Defaults: format='toon' for conversational AI responses
+    // Can be overridden with contextOverrides parameter
+    const context = useMemo(() => ({
+        documentId,
+        executor,
+        format: 'toon', // Default format
+        ...contextOverrides, // Override with user-provided values
+    }), [documentId, executor, contextOverrides]);
+    // Create and return CopilotKit actions (stable reference)
+    return useMemo(() => createAllCopilotKitActions(notebookToolDefinitions, notebookToolOperations, context), [context]);
+}

package/lib/tools/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Platform-agnostic tools for notebook and lexical integration with AI frameworks
+ *
+ * @module tools
+ */
+export * from './adapters/agui';

package/lib/tools/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Platform-agnostic tools for notebook and lexical integration with AI frameworks
+ *
+ * @module tools
+ */
+// Export adapters
+export * from './adapters/agui';
+// TODO: Re-export tool types from jupyter-react when available
+// export type {
+//   ToolDefinition,
+//   ToolConfig,
+//   ToolOperation,
+//   ToolExecutionContext,
+// } from '@datalayer/jupyter-react';

package/lib/types.d.ts

@@ -0,0 +1,5 @@
+export interface ConversationEntry {
+    id: string;
+    firstMessage?: string;
+    timestamp: number;
+}

package/lib/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/utils/cli/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CLI utilities
+ */
+export * from './query';

package/lib/utils/cli/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+/**
+ * CLI utilities
+ */
+export * from './query';

package/lib/utils/cli/query.d.ts

@@ -0,0 +1,6 @@
+import { QueryClient } from '@tanstack/react-query';
+/**
+ * Shared QueryClient instance for TanStack Query
+ * Used across the application for consistent cache management
+ */
+export declare const queryClient: QueryClient;

package/lib/utils/cli/query.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { QueryClient } from '@tanstack/react-query';
+/**
+ * Shared QueryClient instance for TanStack Query
+ * Used across the application for consistent cache management
+ */
+export const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            refetchOnMount: false, // Don't refetch on mount if data is still fresh
+            refetchOnWindowFocus: false,
+            retry: 1,
+            // Ensure queries prioritize cache over network when data is fresh
+            networkMode: 'online',
+        },
+    },
+});

package/lib/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Array';
 export * from './Avatar';
 export * from './Browser';
+export * from './cli';
 export * from './Cookie';
 export * from './Cells';
 export * from './Date';

package/lib/utils/index.js

@@ -5,6 +5,7 @@
 export * from './Array';
 export * from './Avatar';
 export * from './Browser';
+export * from './cli';
 export * from './Cookie';
 export * from './Cells';
 export * from './Date';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "workspaces": [
     ".",
@@ -48,6 +48,7 @@
     "clean": "rimraf lib dist build tsconfig.tsbuildinfo",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:dist": "rimraf dist",
+    "clean:cache": "rimraf node_modules/.vite",
     "build": "npm run clean && gulp resources-to-lib && tsc -b && vite build",
     "build:lib": "npm run clean:lib && gulp resources-to-lib && tsc -b",
     "build:types": "npm run clean:lib && tsc -b",
@@ -84,18 +85,50 @@
     "watch:lib:res": "gulp resources-to-lib-watch",
     "watch:lib:src": "tsc -b -w",
     "type-check:watch": "tsc -b -w --noEmit",
-    "example": "vite --config vite.examples.config.ts",
-    "example:nextjs": "npm run dev --workspace=nextjs-notebook-example",
-    "prepare": "husky"
+    "examples": "vite --config vite.examples.config.ts",
+    "examples:chat": "run-p jupyter:start example:chat:vite",
+    "examples:chat:vite": "EXAMPLE=ChatExample vite --config vite.examples.config.ts",
+    "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
+    "jupyter:start": "./dev/sh/start-jupyter-server.sh",
+    "prepare": "husky",
+    "postinstall": "bash scripts/apply-patches.sh",
+    "kill": "./dev/sh/kill.sh || true",
+    "sync:jupyter": "bash scripts/sync-jupyter.sh",
+    "sync:jupyter:watch": "bash scripts/sync-jupyter.sh --watch",
+    "create:patches": "bash scripts/create-patches.sh",
+    "apply:patches": "bash scripts/apply-patches.sh",
+    "examples:fresh": "npm run clean:cache && npm run examples",
+    "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache"
   },
   "dependencies": {
+    "@ai-sdk/react": "^2.0.34",
+    "@copilotkit/react-core": "^1.10.6",
+    "@copilotkit/react-ui": "^1.10.6",
     "@datalayer/icons-react": "^1.0.6",
-    "@datalayer/jupyter-react": "^1.1.0",
+    "@datalayer/jupyter-lexical": "^1.0.6",
+    "@datalayer/jupyter-react": "^1.1.8",
     "@datalayer/primer-addons": "^1.0.4",
     "@datalayer/primer-rjsf": "^1.0.1",
+    "@jupyter-widgets/base-manager": "^1.0.12",
+    "@jupyter-widgets/schema": "^0.5.6",
+    "@jupyterlab/apputils": "^4.6.0",
+    "@jupyterlab/cells": "^4.5.0",
+    "@jupyterlab/codeeditor": "^4.5.0",
     "@jupyterlab/coreutils": "^6.0.0",
+    "@jupyterlab/documentsearch": "^4.5.0",
+    "@jupyterlab/rendermime": "^4.5.0",
     "@jupyterlab/services": "^7.0.0",
+    "@jupyterlab/translation": "^4.5.0",
+    "@jupyterlab/ui-components": "^4.5.0",
     "@jupyterlite/javascript-kernel-extension": "^0.3.0",
+    "@lumino/commands": "^2.3.3",
+    "@lumino/coreutils": "^2.2.2",
+    "@lumino/datagrid": "^2.5.3",
+    "@lumino/disposable": "^2.1.5",
+    "@lumino/polling": "^2.1.5",
+    "@lumino/signaling": "^2.1.5",
+    "@lumino/widgets": "^2.7.2",
+    "@primer/behaviors": "^1.8.4",
     "@primer/brand-primitives": "^0.51.0",
     "@primer/css": "^21.5.1",
     "@primer/octicons-react": "^19.15.1",
@@ -103,29 +136,45 @@
     "@primer/react": "^37.19.0",
     "@primer/react-brand": "^0.58.0",
     "@stripe/react-stripe-js": "^2.7.1",
+    "@stripe/stripe-js": "^4.0.0",
+    "@styled-system/css": "^5.1.5",
+    "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.90.6",
+    "@toon-format/toon": "^1.3.0",
+    "ai": "^5.0.78",
+    "ansi-to-html": "^0.7.2",
     "axios": "^1.7.7",
     "boring-avatars": "^2.0.1",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
+    "deepmerge": "^4.3.1",
     "echarts": "^5.5.0",
     "echarts-for-react": "^3.0.2",
     "fuse.js": "^7.0.0",
     "html2canvas": "^1.4.1",
     "jwt-decode": "^2.2.0",
     "localforage": "^1.10.0",
+    "lucide-react": "^0.542.0",
     "marked": "^4.0.10",
     "mock-socket": "^9.3.1",
     "react": "18.3.1",
     "react-confetti": "^6.4.0",
     "react-dom": "18.3.1",
+    "react-is": "^19.2.0",
     "react-toastify": "^11.0.5",
+    "streamdown": "^1.6.6",
+    "styled-system": "^5.1.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "tslib": "^2.8.1",
     "tus-js-client": "^4.2.3",
+    "tw-animate-css": "^1.4.0",
     "ulid": "^2.3.0",
     "unique-names-generator": "^4.7.1",
     "usehooks-ts": "^2.9.1",
     "uuid": "^13.0.0",
     "validator": "^13.7.0",
+    "zod": "^4.1.13",
     "zustand": "^4.4.1"
   },
   "peerDependencies": {
@@ -145,13 +194,17 @@
     "@storybook/addon-vitest": "^9.1.1",
     "@storybook/builder-vite": "^9.1.1",
     "@storybook/react-vite": "^9.1.1",
+    "@tailwindcss/postcss": "^4.1.16",
     "@types/node": "^20.11.0",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "abort-controller": "^3.0.0",
+    "autoprefixer": "^10.4.21",
+    "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.1",
     "dotenv": "^17.2.2",
     "eslint": "^9.29.0",
@@ -170,6 +223,7 @@
     "jsdom": "^26.0.0",
     "lint-staged": "^16.1.5",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
     "playwright": "^1.53.2",
     "prettier": "^3.6.2",
     "react-router-dom": "^6.22.3",
@@ -205,5 +259,8 @@
     "src/**/*.{css,json,md}": [
       "prettier --write"
     ]
+  },
+  "optionalDependencies": {
+    "keytar": "^7.9.0"
   }
 }

package/style/base.css

@@ -3,6 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
 :root {
   --dla-color-green-light: #2ECC71;
   --dla-color-green-main: #1ABC9C;

package/lib/examples/DatalayerNotebookExample.d.ts

@@ -1,16 +0,0 @@
-import { ServiceManager } from '@jupyterlab/services';
-/**
- * Example demonstrating how to use Datalayer services with Notebook
- *
- * This example shows:
- * 1. How to create and use DatalayerServiceManager for kernel management
- * 2. How to create and use DatalayerCollaborationProvider for real-time collaboration
- * 3. How to enable/disable Datalayer collaboration
- * 4. How to pass these to the base Notebook component
- * 5. Graceful fallback when Datalayer credentials are not available
- */
-type IDatalayerNotebookExampleProps = {
-    serviceManager?: ServiceManager.IManager;
-};
-declare const DatalayerNotebookExample: (props: IDatalayerNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
-export default DatalayerNotebookExample;

package/lib/examples/DatalayerNotebookExample.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { useState, useEffect, useMemo } from 'react';
-import { Box, Checkbox, FormControl, Heading } from '@primer/react';
-import { loadJupyterConfig, JupyterReactTheme, Notebook2, } from '@datalayer/jupyter-react';
-import { DatalayerCollaborationProvider } from '../collaboration/DatalayerCollaborationProvider';
-import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
-import { useCoreStore } from '../state/substates/CoreState';
-import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
-// This corresponds to the notebook ID in the URL when you open an existing notbook in your library
-const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
-const DatalayerNotebookExample = (props) => {
-    // Load config on component mount
-    loadJupyterConfig();
-    const [nbformat] = useState(nbformatExample);
-    const [enableCollaboration, setEnableCollaboration] = useState(false);
-    const [readonly] = useState(false);
-    const [serviceManager, setServiceManager] = useState(props.serviceManager);
-    const { configuration } = useCoreStore();
-    useEffect(() => {
-        // Create DatalayerServiceManager if not provided
-        const createManager = async () => {
-            if (props.serviceManager) {
-                // Use provided service manager (should be DatalayerServiceManager from main.tsx)
-                // Wait for it to be ready
-                await props.serviceManager.ready;
-                return;
-            }
-            // Create DatalayerServiceManager if we have credentials
-            if (configuration?.token && configuration?.runUrl) {
-                try {
-                    console.log('Creating DatalayerServiceManager for Datalayer infrastructure');
-                    // Now we can pass undefined to use config/defaults
-                    const manager = await createDatalayerServiceManager(configuration?.cpuEnvironment, configuration?.credits);
-                    await manager.ready;
-                    setServiceManager(manager);
-                }
-                catch (error) {
-                    console.error('Failed to create DatalayerServiceManager:', error);
-                }
-            }
-            else {
-                console.warn('Datalayer credentials not configured. Please set runUrl and token.');
-            }
-        };
-        createManager();
-    }, [props.serviceManager, configuration]);
-    // Create the collaboration provider when enabled
-    const collaborationProvider = useMemo(() => {
-        if (!enableCollaboration) {
-            return undefined;
-        }
-        const runUrl = configuration?.runUrl;
-        const token = configuration?.token;
-        if (!runUrl || !token) {
-            console.warn('Datalayer collaboration enabled but runUrl or token not configured. ' +
-                'Please configure them in the Datalayer store or environment.');
-            return undefined;
-        }
-        // Create and return the Datalayer collaboration provider
-        return new DatalayerCollaborationProvider({
-            runUrl,
-            token,
-        });
-    }, [enableCollaboration, configuration]);
-    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "DatalayerNotebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), _jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                    }, children: serviceManager ? (_jsx(Notebook2, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) }), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (runUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
-};
-export default DatalayerNotebookExample;

package/lib/examples/NativeNavigationExample.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-/**
- * Native Navigation Example
- * This example demonstrates the navigation hooks WITHOUT React Router.
- * The hooks should automatically detect the absence of React Router and fall back to native browser navigation.
- */
-export declare const NativeNavigationExample: React.FC;
-export default NativeNavigationExample;

package/lib/examples/NativeNavigationExample.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { useState, useEffect } from 'react';
-import { Box, Button, Heading, Text, Link as PrimerLink } from '@primer/react';
-import { useNavigate, useLocation, useParams, useHistory } from '../hooks';
-/**
- * Native Navigation Example
- * This example demonstrates the navigation hooks WITHOUT React Router.
- * The hooks should automatically detect the absence of React Router and fall back to native browser navigation.
- */
-export const NativeNavigationExample = () => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const params = useParams();
-    const history = useHistory();
-    const [navigationType, setNavigationType] = useState('detecting...');
-    const [navigationCount, setNavigationCount] = useState(0);
-    const [currentView, setCurrentView] = useState('home');
-    // Track navigation type detection
-    useEffect(() => {
-        // Since we're not using React Router, this should detect as 'native'
-        setNavigationType('native');
-    }, []);
-    // Track navigation events
-    useEffect(() => {
-        setNavigationCount(prev => prev + 1);
-        // Parse the path to determine which view to show
-        const path = location.pathname;
-        if (path.includes('page1')) {
-            setCurrentView('page1');
-        }
-        else if (path.includes('page2')) {
-            setCurrentView('page2');
-        }
-        else if (path.includes('page3')) {
-            setCurrentView('page3');
-        }
-        else if (path.includes('user')) {
-            setCurrentView('user');
-        }
-        else {
-            setCurrentView('home');
-        }
-    }, [location]);
-    const handleProgrammaticNavigation = () => {
-        navigate('/page3', undefined, true);
-    };
-    const handleNavigateWithQuery = () => {
-        navigate('/page2?test=456&native=true', undefined, true);
-    };
-    const handleNavigateWithHash = () => {
-        navigate('/page3#native-section', undefined, true);
-    };
-    const handleBackNavigation = () => {
-        history.back();
-    };
-    const handleForwardNavigation = () => {
-        history.forward();
-    };
-    const handleReplaceNavigation = () => {
-        history.replace('/replaced-page', { replaced: true });
-    };
-    // Simple link handler for native navigation
-    const handleLinkClick = (e, path) => {
-        e.preventDefault();
-        navigate(path, e, true);
-    };
-    // Render different content based on current view
-    const renderContent = () => {
-        switch (currentView) {
-            case 'page1':
-                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 1 (Native)" }), _jsx(Text, { as: "p", children: "You've navigated to Page 1 using native browser navigation." })] }));
-            case 'page2':
-                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 2 (Native)" }), _jsx(Text, { as: "p", children: "This is Page 2 with native navigation. Check the query parameters!" })] }));
-            case 'page3':
-                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 3 (Native)" }), _jsx(Text, { as: "p", children: "Welcome to Page 3 using native browser APIs. Notice the hash in the URL!" })] }));
-            case 'user':
-                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "User Page (Native)" }), _jsxs(Text, { as: "p", children: ["User pages with native navigation. Path: ", location.pathname] })] }));
-            default:
-                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Home Page (Native)" }), _jsx(Text, { as: "p", children: "This is the home page of the Native navigation example." })] }));
-        }
-    };
-    return (_jsxs(Box, { sx: { minHeight: '100vh', p: 4 }, children: [_jsxs(Box, { sx: { mb: 4, p: 3, bg: 'canvas.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Native Browser Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example demonstrates the navigation hooks WITHOUT React Router context. The hooks automatically fall back to native browser navigation (history API)." }), _jsx(Text, { as: "p", sx: { color: 'attention.fg', fontWeight: 'bold' }, children: "\u26A0\uFE0F No React Router is loaded in this example - using native browser APIs only!" })] }), renderContent(), _jsxs(Box, { sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Navigation Information" }), _jsxs(Box, { sx: {
-                            mb: 4,
-                            p: 3,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                        }, children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Navigation Type Detected:" }), ' ', _jsx(Text, { as: "span", sx: {
-                                            color: navigationType === 'native' ? 'success.fg' : 'danger.fg',
-                                        }, children: navigationType })] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Current Path:" }), " ", location.pathname] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Search Params:" }), " ", location.search || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Hash:" }), " ", location.hash || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Location Key:" }), " ", location.key] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "State:" }), " ", JSON.stringify(location.state) || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "URL Params (parsed from search):" }), ' ', JSON.stringify(params)] }), _jsxs(Text, { as: "p", children: [_jsx("strong", { children: "Navigation Count:" }), " ", navigationCount] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Programmatic Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleProgrammaticNavigation, children: "Navigate to /page3" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Navigate with Query Params" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Navigate with Hash" }), _jsx(Button, { onClick: handleReplaceNavigation, variant: "default", children: "Replace Current Entry" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test History API" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleBackNavigation, variant: "default", children: "History Back" }), _jsx(Button, { onClick: handleForwardNavigation, variant: "default", children: "History Forward" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Link Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(PrimerLink, { href: "/", onClick: e => handleLinkClick(e, '/'), sx: { cursor: 'pointer' }, children: "Home" }), _jsx(PrimerLink, { href: "/page1", onClick: e => handleLinkClick(e, '/page1'), sx: { cursor: 'pointer' }, children: "Page 1" }), _jsx(PrimerLink, { href: "/page2?test=123", onClick: e => handleLinkClick(e, '/page2?test=123'), sx: { cursor: 'pointer' }, children: "Page 2 with Query" }), _jsx(PrimerLink, { href: "/page3#section", onClick: e => handleLinkClick(e, '/page3#section'), sx: { cursor: 'pointer' }, children: "Page 3 with Hash" }), _jsx(PrimerLink, { href: "/user/456", onClick: e => handleLinkClick(e, '/user/456'), sx: { cursor: 'pointer' }, children: "User 456" })] })] }), _jsxs(Box, { sx: { mt: 4, p: 3, bg: 'attention.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "How This Works" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example does NOT include React Router. The navigation hooks automatically detect this and:" }), _jsxs(Box, { as: "ul", sx: { pl: 4 }, children: [_jsxs(Text, { as: "li", children: ["Use ", _jsx("code", { children: "window.history.pushState()" }), " for navigation"] }), _jsxs(Text, { as: "li", children: ["Listen to ", _jsx("code", { children: "popstate" }), " events for browser back/forward"] }), _jsxs(Text, { as: "li", children: ["Parse ", _jsx("code", { children: "window.location" }), " for current path and params"] }), _jsx(Text, { as: "li", children: "Provide the same API as when React Router is present" })] }), _jsx(Text, { as: "p", sx: { mt: 2 }, children: "The beauty is that the same hooks work in both scenarios without any code changes!" })] })] })] }));
-};
-export default NativeNavigationExample;

package/lib/examples/NotebookMutationsKernel.d.ts

@@ -1,2 +0,0 @@
-declare const NotebookMutationsKernel: () => import("react/jsx-runtime").JSX.Element;
-export default NotebookMutationsKernel;