@alfakit/react 0.1.1 → 0.1.6

package/src/starter-kit/widgets.tsx

@@ -1,7 +1,14 @@
-import { starterKitWidgets, type StarterKitWidgets } from '@alfakit/core'
+import {
+  isAlfakitPage,
+  starterKitWidgets,
+  type StarterKitWidgets,
+  type StarterKitWidgetsSchema,
+} from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
+import { lazy, Suspense } from 'react'
 import { lazyComponent } from '../lib/lazy'
 import {
+  CopilotTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
@@ -16,14 +23,15 @@ import {
  * (in the browser, never during SSR).
  *
  * ```tsx
- * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
+ * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
  *
  * <AlfakitSearch />
  * <AlfakitNotifications />
+ * <AlfakitCopilot />
  * ```
  */
 export interface AlfakitHeaderWidgetProps {
-  /** The `starterKit()` panel to use (the first one by default). */
+  /** The `starterKit()` panel to use (by default the open AlfaKit page's panel, else the first one that has this component). */
   panel?: string
 }
 
@@ -48,8 +56,37 @@ const LoadedTenantSwitcher = lazyComponent<WidgetProps>(
   (props) => <TenantSwitcherTrigger {...props} />,
 )
 
-function useWidgets(panelId: string | undefined): StarterKitWidgets | null {
-  return starterKitWidgets(usePage().props, panelId)
+const LoadedCopilot = lazyComponent<WidgetProps>(
+  () => load().then((module) => module.LoadedCopilot),
+  (props) => <CopilotTrigger {...props} onLoad={preloadCopilot} />,
+)
+
+function preloadCopilot() {
+  void LoadedCopilot.preload()
+}
+
+// Only needed while impersonating: its code loads then (and never on AlfaKit pages).
+const LazyImpersonationBanner = lazy(() => import('./impersonation-banner'))
+
+/** While impersonating, the first header component shows the banner on host pages. */
+function StarterKitImpersonationBanner({ source }: { source: StarterKitWidgets | null }) {
+  const props = usePage().props
+  const impersonation = source?.widgets.impersonation
+
+  if (!impersonation || isAlfakitPage(props)) return null
+
+  return (
+    <Suspense fallback={null}>
+      <LazyImpersonationBanner impersonation={impersonation} />
+    </Suspense>
+  )
+}
+
+function useWidgets(
+  panelId: string | undefined,
+  part: keyof StarterKitWidgetsSchema,
+): StarterKitWidgets | null {
+  return starterKitWidgets(usePage().props, panelId, part)
 }
 
 /**
@@ -58,14 +95,19 @@ function useWidgets(panelId: string | undefined): StarterKitWidgets | null {
  * nothing for guests or without global search and a command palette.
  */
 export function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'search')
 
-  if (!source?.widgets.search) return null
+  const banner = <StarterKitImpersonationBanner source={source} />
+
+  if (!source?.widgets.search) return banner
 
   return (
-    <span data-slot="starter-kit-search" className="inline-flex">
-      <LoadedSearch source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-search" className="inline-flex">
+        <LoadedSearch source={source} />
+      </span>
+    </>
   )
 }
 
@@ -75,14 +117,19 @@ export function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {
  * notifications.
  */
 export function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'notifications')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
 
-  if (!source?.widgets.notifications) return null
+  if (!source?.widgets.notifications) return banner
 
   return (
-    <span data-slot="starter-kit-notifications" className="inline-flex">
-      <LoadedNotifications source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-notifications" className="inline-flex">
+        <LoadedNotifications source={source} />
+      </span>
+    </>
   )
 }
 
@@ -91,13 +138,41 @@ export function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {
  * to choose one on the host's own pages. Renders nothing for guests or other panels.
  */
 export function AlfakitTenantSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'tenancy')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
+
+  if (!source?.widgets.tenancy) return banner
+
+  return (
+    <>
+      {banner}
+      <span data-slot="starter-kit-tenant-switcher" className="inline-flex">
+        <LoadedTenantSwitcher source={source} />
+      </span>
+    </>
+  )
+}
+
+/**
+ * The AI copilot of alfasix/alfakit-ai (`AiPlugin::copilot()`): its button and chat
+ * slide-over, opened with its key bindings (`mod+j`) from any page. Renders nothing for
+ * guests, without the plugin's copilot, for users who may not use it and (tenancy panels)
+ * outside a tenant.
+ */
+export function AlfakitCopilot({ panel }: AlfakitHeaderWidgetProps = {}) {
+  const source = useWidgets(panel, 'copilot')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
 
-  if (!source?.widgets.tenancy) return null
+  if (!source?.widgets.copilot) return banner
 
   return (
-    <span data-slot="starter-kit-tenant-switcher" className="inline-flex">
-      <LoadedTenantSwitcher source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-copilot" className="inline-flex">
+        <LoadedCopilot source={source} />
+      </span>
+    </>
   )
 }

package/src/styles.css

@@ -11,8 +11,21 @@
 /* Built-in themes (alfakit, minimal, soft, corporate, filament); neutral is below. */
 @import './themes.css';
 
+/*
+ * Toast styles, as in the Vue renderer. Sonner also injects them at runtime, which a
+ * nonce-based Content Security Policy blocks; from the stylesheet they always apply.
+ */
+@import 'sonner/dist/styles.css';
+
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Class lists that live in @alfakit/core (stacked-on-mobile tables, filter and column manager
+ * widths in `table.ts`, …): scan core's build too. Relative to this file in
+ * node_modules/@alfakit/<renderer>/dist, next to node_modules/@alfakit/core.
+ */
+@source '../../core/dist';
+
 /*
  * Grid classes are composed at runtime from schema breakpoints (`columns`, `columnSpan`),
  * so force Tailwind to generate every variant the renderers can produce.
@@ -116,10 +129,10 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.54 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: var(--alfakit-danger, oklch(0.55 0.245 27.325));
+  --destructive: var(--alfakit-danger, oklch(0.5 0.245 27.325));
   --destructive-foreground: var(--alfakit-danger-foreground, oklch(0.985 0 0));
   --border: oklch(0.922 0 0);
   --input: oklch(0.64 0 0);