@grackle-ai/web-components 0.107.2

package/src/context/GrackleContextTypes.ts

@@ -0,0 +1,64 @@
+/**
+ * Type definitions for the GrackleContext value.
+ * Kept separate so both the real provider (in @grackle-ai/web) and
+ * MockGrackleProvider can use them without circular dependencies.
+ *
+ * @module
+ */
+
+import type {
+  UsageStats, UseKnowledgeResult,
+  UseEnvironmentsResult, UseSessionsResult, UseWorkspacesResult,
+  UseTasksResult, UseFindingsResult, UseTokensResult,
+  UseCredentialsResult, UseCodespacesResult, UsePersonasResult,
+  UsePluginsResult,
+  UseSchedulesResult,
+  UseStreamsResult,
+  ConnectionStatus,
+} from "../hooks/types.js";
+
+/** Return type for the useGrackleSocket hook (and the GrackleContext value). */
+export interface UseGrackleSocketResult {
+  /** Current connection state of the event stream. */
+  connectionStatus: ConnectionStatus;
+  /** Environment state and actions. */
+  environments: Omit<UseEnvironmentsResult, "handleEvent" | "handleLegacyMessage">;
+  /** Session state and actions. */
+  sessions: Omit<UseSessionsResult, "handleMessage" | "handleSessionEvent" | "handleLegacyMessage" | "loadSessions">;
+  /** Workspace state and actions. */
+  workspaces: Omit<UseWorkspacesResult, "handleEvent" | "onDisconnect">;
+  /** Task state and actions. */
+  tasks: Omit<UseTasksResult, "handleEvent" | "onDisconnect" | "handleLegacyMessage">;
+  /** Finding state and actions. */
+  findings: Omit<UseFindingsResult, "handleEvent">;
+  /** Token state and actions. */
+  tokens: Omit<UseTokensResult, "handleEvent">;
+  /** Credential provider state and actions. */
+  credentials: Omit<UseCredentialsResult, "handleEvent" | "loadCredentials">;
+  /** GitHub Codespace state and actions. */
+  codespaces: UseCodespacesResult;
+  /** Persona state and actions. */
+  personas: Omit<UsePersonasResult, "handleEvent" | "loadPersonas">;
+  /** Schedule state and actions. */
+  schedules: Omit<UseSchedulesResult, "handleEvent" | "loadSchedules">;
+  /** IPC stream state and actions. */
+  streams: Omit<UseStreamsResult, "handleEvent">;
+  /** Knowledge graph state and actions. */
+  knowledge: Omit<UseKnowledgeResult, "handleEvent">;
+  /** Plugin state and actions. */
+  plugins: Omit<UsePluginsResult, "domainHook">;
+  /** App-level default persona ID setting. */
+  appDefaultPersonaId: string;
+  /** Update the app-level default persona ID. */
+  setAppDefaultPersonaId: (personaId: string) => Promise<void>;
+  /** Whether the user has completed onboarding. */
+  onboardingCompleted: boolean | undefined;
+  /** Mark onboarding as completed. */
+  completeOnboarding: () => Promise<void>;
+  /** Cached usage statistics keyed by "scope:id". */
+  usageCache: Record<string, UsageStats>;
+  /** Load usage statistics for a given scope and ID. */
+  loadUsage: (scope: string, id: string) => Promise<void>;
+  /** Refresh environments, sessions, workspaces, and tokens from the server. */
+  refresh: () => void;
+}

package/src/context/SidebarContext.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useCallback, useContext, useState, type JSX, type ReactNode } from "react";
+
+/** Setter function for updating sidebar content. */
+type SidebarSetter = (content: ReactNode | undefined) => void;
+
+/**
+ * Context that holds the current sidebar content node.
+ * Consumed by the Sidebar component to render slot content.
+ */
+const SidebarContentContext: React.Context<ReactNode | undefined> = createContext<ReactNode | undefined>(undefined);
+
+/**
+ * Context that holds a stable setter for updating sidebar content.
+ * Consumed by layout route wrappers to declare their sidebar content.
+ */
+const SidebarSetterContext: React.Context<SidebarSetter | undefined> = createContext<SidebarSetter | undefined>(undefined);
+
+/** Props for the SidebarProvider component. */
+interface SidebarProviderProps {
+  /** Child components. */
+  children: ReactNode;
+}
+
+/** Provides sidebar slot state to the component tree. */
+export function SidebarProvider({ children }: SidebarProviderProps): JSX.Element {
+  const [content, setContent] = useState<ReactNode | undefined>(undefined);
+
+  const stableSetContent: SidebarSetter = useCallback((node: ReactNode | undefined) => {
+    setContent(node);
+  }, []);
+
+  return (
+    <SidebarSetterContext.Provider value={stableSetContent}>
+      <SidebarContentContext.Provider value={content}>
+        {children}
+      </SidebarContentContext.Provider>
+    </SidebarSetterContext.Provider>
+  );
+}
+
+/** Read the current sidebar content. Returns `undefined` when no content is set. */
+export function useSidebarContent(): ReactNode | undefined {
+  return useContext(SidebarContentContext);
+}
+
+/** Get the sidebar content setter. Must be called within a SidebarProvider. */
+export function useSidebarSetter(): SidebarSetter {
+  const setter = useContext(SidebarSetterContext);
+  if (setter === undefined) {
+    throw new Error("useSidebarSetter must be used within a SidebarProvider");
+  }
+  return setter;
+}

package/src/context/ThemeContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext, type ReactNode, type JSX } from "react";
+import { useTheme, type UseThemeResult } from "../hooks/useTheme.js";
+
+const ThemeContext: React.Context<UseThemeResult | undefined> = createContext<UseThemeResult | undefined>(undefined);
+
+/** Provides theme state to the component tree. */
+export function ThemeProvider({ children }: { children: ReactNode }): JSX.Element {
+  const themeState = useTheme();
+  return (
+    <ThemeContext.Provider value={themeState}>{children}</ThemeContext.Provider>
+  );
+}
+
+/** Consumes the theme context; must be called within a ThemeProvider. */
+export function useThemeContext(): UseThemeResult {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useThemeContext must be used within ThemeProvider");
+  }
+  return ctx;
+}

package/src/context/ToastContext.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext, useState, useRef, useCallback, type ReactNode, type JSX } from "react";
+
+/** Visual style variant for a toast notification. */
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+/** A single toast notification item. */
+export interface ToastItem {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  /** Auto-dismiss delay in milliseconds. */
+  duration: number;
+}
+
+interface ToastContextValue {
+  toasts: ToastItem[];
+  /** Display a new toast notification. */
+  showToast: (message: string, variant?: ToastVariant, duration?: number) => void;
+  /** Programmatically remove a toast by id. */
+  dismissToast: (id: string) => void;
+}
+
+const ToastContext: React.Context<ToastContextValue | undefined> = createContext<ToastContextValue | undefined>(undefined);
+
+const DEFAULT_DURATION_MS: number = 4_000;
+
+/** Provides toast notification state to the component tree. Mount <ToastContainer> as a sibling to receive rendered output. */
+export function ToastProvider({ children }: { children: ReactNode }): JSX.Element {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const toastCounterRef = useRef<number>(0);
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = useCallback(
+    (message: string, variant: ToastVariant = "info", duration: number = DEFAULT_DURATION_MS) => {
+      const id = `toast-${++toastCounterRef.current}`;
+      setToasts((prev) => [...prev, { id, message, variant, duration }]);
+    },
+    [],
+  );
+
+  return (
+    <ToastContext.Provider value={{ toasts, showToast, dismissToast }}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+/** Consumes the toast context; must be called within a ToastProvider. */
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}