@syncular/console 0.0.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@syncular/console",
+  "version": "0.0.0",
+  "description": "Embeddable Syncular console UI",
+  "license": "MIT",
+  "author": "Benjamin Kniffler",
+  "homepage": "https://syncular.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncular/syncular.git",
+    "directory": "packages/console"
+  },
+  "bugs": {
+    "url": "https://github.com/syncular/syncular/issues"
+  },
+  "keywords": [
+    "sync",
+    "offline-first",
+    "realtime",
+    "console",
+    "react"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles.css": "./src/styles/globals.css"
+  },
+  "scripts": {
+    "tsgo": "tsgo --noEmit",
+    "build": "tsgo",
+    "release": "bunx syncular-publish"
+  },
+  "dependencies": {
+    "@syncular/observability-sentry": "0.0.0",
+    "@syncular/transport-http": "0.0.0",
+    "@syncular/ui": "0.0.0",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-router": "^1.159.5",
+    "lucide-react": "^0.563.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@syncular/config": "0.0.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
+}

package/src/App.tsx

@@ -0,0 +1,44 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { ConnectionProvider } from './hooks/ConnectionContext';
+import { routeTree } from './routeTree';
+
+function getInjectedBasepath(): string {
+  if (typeof document === 'undefined') return '/';
+  const meta = document.querySelector<HTMLMetaElement>(
+    'meta[name="syncular-console-basepath"]'
+  );
+  const value = meta?.content?.trim();
+  if (!value) return '/';
+  if (value === '/') return '/';
+  return value.startsWith('/') ? value.replace(/\/$/, '') : '/';
+}
+
+const basepath = getInjectedBasepath();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5000,
+      retry: 1,
+    },
+  },
+});
+
+const router = createRouter({ routeTree, basepath });
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ConnectionProvider>
+        <RouterProvider router={router} />
+      </ConnectionProvider>
+    </QueryClientProvider>
+  );
+}

package/src/hooks/ConnectionContext.tsx

@@ -0,0 +1,213 @@
+/**
+ * Connection context for shared connection state across components
+ */
+
+import type { SyncClient } from '@syncular/transport-http';
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  type ConnectionConfig,
+  createConsoleClient,
+  testConnection,
+} from '../lib/api';
+import { useLocalStorage } from './useLocalStorage';
+
+interface ConnectionState {
+  isConnected: boolean;
+  isConnecting: boolean;
+  error: string | null;
+  client: SyncClient | null;
+}
+
+interface ConnectionContextValue {
+  config: ConnectionConfig | null;
+  setConfig: (config: ConnectionConfig | null) => void;
+  isConnected: boolean;
+  isConnecting: boolean;
+  error: string | null;
+  client: SyncClient | null;
+  connect: (
+    overrideConfig?: ConnectionConfig,
+    options?: { persistOverride?: boolean }
+  ) => Promise<boolean>;
+  disconnect: (options?: { clearSavedConfig?: boolean }) => void;
+  clearError: () => void;
+}
+
+interface ConnectionProviderProps {
+  children: ReactNode;
+  defaultConfig?: ConnectionConfig | null;
+}
+
+const ConnectionContext = createContext<ConnectionContextValue | null>(null);
+
+export function ConnectionProvider({
+  children,
+  defaultConfig = null,
+}: ConnectionProviderProps) {
+  const [config, setConfigStorage] = useLocalStorage<ConnectionConfig | null>(
+    'sync-console-connection',
+    null
+  );
+
+  const [state, setState] = useState<ConnectionState>({
+    isConnected: false,
+    isConnecting: false,
+    error: null,
+    client: null,
+  });
+
+  // Resolve initial config: saved config -> provided defaults
+  useEffect(() => {
+    if (config?.serverUrl?.trim() && config.token?.trim()) {
+      return;
+    }
+
+    if (defaultConfig?.serverUrl?.trim() && defaultConfig.token?.trim()) {
+      setConfigStorage({
+        serverUrl: defaultConfig.serverUrl.trim(),
+        token: defaultConfig.token.trim(),
+      });
+      return;
+    }
+  }, [setConfigStorage, config, defaultConfig]);
+
+  const connect = useCallback(
+    async (
+      overrideConfig?: ConnectionConfig,
+      options?: { persistOverride?: boolean }
+    ) => {
+      const effectiveConfig = overrideConfig ?? config;
+      if (!effectiveConfig) {
+        setState((s) => ({ ...s, error: 'No connection configured' }));
+        return false;
+      }
+
+      const normalizedConfig: ConnectionConfig = {
+        serverUrl: effectiveConfig.serverUrl?.trim() ?? '',
+        token: effectiveConfig.token?.trim() ?? '',
+      };
+
+      // Validate config has required fields
+      if (!normalizedConfig.serverUrl) {
+        setState((s) => ({ ...s, error: 'Server URL is required' }));
+        return false;
+      }
+      if (!normalizedConfig.token) {
+        setState((s) => ({ ...s, error: 'Token is required' }));
+        return false;
+      }
+
+      if (overrideConfig && (options?.persistOverride ?? true)) {
+        setConfigStorage(normalizedConfig);
+      }
+
+      setState((s) => ({ ...s, isConnecting: true, error: null }));
+
+      try {
+        const client = createConsoleClient(normalizedConfig);
+        const ok = await testConnection(client);
+
+        if (ok) {
+          setState({
+            isConnected: true,
+            isConnecting: false,
+            client,
+            error: null,
+          });
+          return true;
+        }
+        setState({
+          isConnected: false,
+          isConnecting: false,
+          client: null,
+          error: 'Failed to connect',
+        });
+        return false;
+      } catch (err) {
+        setState({
+          isConnected: false,
+          isConnecting: false,
+          client: null,
+          error: err instanceof Error ? err.message : 'Connection failed',
+        });
+        return false;
+      }
+    },
+    [config, setConfigStorage]
+  );
+
+  const disconnect = useCallback(
+    (options?: { clearSavedConfig?: boolean }) => {
+      if (options?.clearSavedConfig) {
+        setConfigStorage(null);
+      }
+
+      setState({
+        isConnected: false,
+        isConnecting: false,
+        client: null,
+        error: null,
+      });
+    },
+    [setConfigStorage]
+  );
+
+  const clearError = useCallback(() => {
+    setState((s) => ({ ...s, error: null }));
+  }, []);
+
+  const setConfig = useCallback(
+    (newConfig: ConnectionConfig | null) => {
+      setConfigStorage(newConfig);
+      setState({
+        isConnected: false,
+        isConnecting: false,
+        client: null,
+        error: null,
+      });
+    },
+    [setConfigStorage]
+  );
+
+  const value = useMemo(
+    () => ({
+      config,
+      setConfig,
+      isConnected: state.isConnected,
+      isConnecting: state.isConnecting,
+      error: state.error,
+      client: state.client,
+      connect,
+      disconnect,
+      clearError,
+    }),
+    [config, setConfig, state, connect, disconnect, clearError]
+  );
+
+  return (
+    <ConnectionContext.Provider value={value}>
+      {children}
+    </ConnectionContext.Provider>
+  );
+}
+
+export function useConnection(): ConnectionContextValue {
+  const context = useContext(ConnectionContext);
+  if (!context) {
+    throw new Error('useConnection must be used within a ConnectionProvider');
+  }
+  return context;
+}
+
+export function useApiClient(): SyncClient | null {
+  const { client } = useConnection();
+  return client;
+}

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from './ConnectionContext';
+export * from './useConsoleApi';
+export * from './useInstanceContext';
+export * from './useLiveEvents';
+export * from './useLocalStorage';
+export * from './usePartitionContext';
+export * from './usePreferences';
+export * from './useRequestEvents';
+export * from './useTimeRange';