@alfakit/react 0.1.1 → 0.1.6

package/src/layouts/app-layout.tsx

@@ -15,36 +15,12 @@ import { Topbar } from '../components/panel/topbar'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '../components/ui/sidebar'
 import { useAlfakitProps, useRegistry } from '../context'
 import { cn } from '../lib/utils'
+import { MAX_WIDTHS } from './max-widths'
 import { TopNavLayout } from './top-nav-layout'
 
-export const MAX_WIDTHS: Record<string, string> = {
-  '3xs': 'max-w-3xs',
-  '2xs': 'max-w-2xs',
-  xs: 'max-w-xs',
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  '2xl': 'max-w-2xl',
-  '3xl': 'max-w-3xl',
-  '4xl': 'max-w-4xl',
-  '5xl': 'max-w-5xl',
-  '6xl': 'max-w-6xl',
-  '7xl': 'max-w-7xl',
-  none: 'max-w-none',
-  min: 'max-w-min',
-  max: 'max-w-max',
-  fit: 'max-w-fit',
-  prose: 'max-w-prose',
-  container: 'container',
-  'screen-sm': 'max-w-(--breakpoint-sm)',
-  'screen-md': 'max-w-(--breakpoint-md)',
-  'screen-lg': 'max-w-(--breakpoint-lg)',
-  'screen-xl': 'max-w-(--breakpoint-xl)',
-  'screen-2xl': 'max-w-(--breakpoint-2xl)',
-  full: 'max-w-full',
-  screen: 'max-w-screen',
-}
+// Re-exported for code that imported it from here; the map lives in `./max-widths` so the
+// starter kit's content layout doesn't pull the panel chrome in.
+export { MAX_WIDTHS } from './max-widths'
 
 export interface AppLayoutProps {
   children: ReactNode

package/src/layouts/auth-layout.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react'
-import { Brand } from '../components/panel/app-sidebar'
+import { Brand } from '../components/panel/brand'
 import { LocaleSwitcher } from '../components/panel/locale-switcher'
 import { Slot } from '../components/panel/slot'
 import { ThemeToggle } from '../components/panel/theme-toggle'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
 import { usePanel } from '../context'
 import { cn } from '../lib/utils'
-import { MAX_WIDTHS } from './app-layout'
+import { MAX_WIDTHS } from './max-widths'
 
 export interface AuthLayoutProps {
   children: ReactNode

package/src/layouts/fullscreen-layout.tsx

@@ -3,7 +3,7 @@ import { Link } from '@inertiajs/react'
 import { LogOutIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
-import { Brand } from '../components/panel/app-sidebar'
+import { Brand } from '../components/panel/brand'
 import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
 import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
 import { Slot } from '../components/panel/slot'

package/src/layouts/lazy-layouts.ts

@@ -0,0 +1,14 @@
+import { lazyComponents } from '@alfakit/core'
+import type { AnyComponent } from '../context'
+import { discoveredComponent } from '../lib/discovery'
+
+/**
+ * The fullscreen layout (`$layout = 'fullscreen'`), loaded on demand by starter kit pages:
+ * they render in the host's layout, so the page chunk never imports the panel's header,
+ * menus and notifications for a layout few pages use. Only the starter kit registers it;
+ * `createAlfakit()` registers the layouts themselves up front (`panelLayouts`), so a panel's
+ * bundle has no extra lazy entry points.
+ */
+export const lazyPanelLayouts: Record<string, AnyComponent> = lazyComponents<AnyComponent>({
+  'layout:fullscreen': () => import('./fullscreen-layout').then((m) => m.FullscreenLayout),
+}).map(discoveredComponent).components

package/src/layouts/max-widths.ts

@@ -0,0 +1,29 @@
+/** Tailwind classes for the `maxContentWidth` setting of the panel and its pages. */
+export const MAX_WIDTHS: Record<string, string> = {
+  '3xs': 'max-w-3xs',
+  '2xs': 'max-w-2xs',
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  none: 'max-w-none',
+  min: 'max-w-min',
+  max: 'max-w-max',
+  fit: 'max-w-fit',
+  prose: 'max-w-prose',
+  container: 'container',
+  'screen-sm': 'max-w-(--breakpoint-sm)',
+  'screen-md': 'max-w-(--breakpoint-md)',
+  'screen-lg': 'max-w-(--breakpoint-lg)',
+  'screen-xl': 'max-w-(--breakpoint-xl)',
+  'screen-2xl': 'max-w-(--breakpoint-2xl)',
+  full: 'max-w-full',
+  screen: 'max-w-screen',
+}

package/src/layouts/panel-layouts.ts

@@ -0,0 +1,17 @@
+import type { AnyComponent } from '../context'
+import { AppLayout } from './app-layout'
+import { AuthLayout } from './auth-layout'
+import { BlankLayout } from './blank-layout'
+import { FullscreenLayout } from './fullscreen-layout'
+
+/**
+ * The panel's own layouts (sidebar or top navigation, auth card, blank, fullscreen), which
+ * `createAlfakit()` registers up front. Starter kit pages render in the host's layout and
+ * never import these: `PageShell` loads one on demand if such a page asks for it.
+ */
+export const panelLayouts: Record<string, AnyComponent> = {
+  'layout:app': AppLayout,
+  'layout:auth': AuthLayout,
+  'layout:blank': BlankLayout,
+  'layout:fullscreen': FullscreenLayout,
+}

package/src/layouts/top-nav-layout.tsx

@@ -10,8 +10,8 @@ import { Link } from '@inertiajs/react'
 import { ChevronDownIcon, MenuIcon } from 'lucide-react'
 import { createElement, useState, type ReactNode } from 'react'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
-import { Brand } from '../components/panel/app-sidebar'
 import { BottomNav } from '../components/panel/bottom-nav'
+import { Brand } from '../components/panel/brand'
 import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
 import { GlobalSearch } from '../components/panel/global-search'
 import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
@@ -34,7 +34,7 @@ import { extraProps } from '../lib/attributes'
 import { Icon } from '../lib/icons'
 import { NewTabHint } from '../lib/new-tab-hint'
 import { cn } from '../lib/utils'
-import { MAX_WIDTHS } from './app-layout'
+import { MAX_WIDTHS } from './max-widths'
 
 export interface TopNavLayoutProps {
   children: ReactNode

package/src/pages/page.tsx

@@ -47,11 +47,15 @@ import { DataTable } from '../components/table/table-block'
 import { Badge } from '../components/ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'
 import { WidgetGrid } from '../components/widgets/widgets-block'
-import { useActionRunner, useAlfakit, useAlfakitProps, usePanel, useT } from '../context'
-import { AppLayout } from '../layouts/app-layout'
-import { AuthLayout } from '../layouts/auth-layout'
+import {
+  useActionRunner,
+  useAlfakit,
+  useAlfakitProps,
+  usePanel,
+  useT,
+  type AnyComponent,
+} from '../context'
 import { BlankLayout } from '../layouts/blank-layout'
-import { FullscreenLayout } from '../layouts/fullscreen-layout'
 import { badgeColorClasses, colorClass } from '../lib/colors'
 import { Icon } from '../lib/icons'
 import { cn } from '../lib/utils'
@@ -138,6 +142,15 @@ export function useBodyAttributes(attributes: Record<string, string> | undefined
   )
 }
 
+/**
+ * The registered layout: `createAlfakit()` registers the panel's (`panelLayouts`), the starter
+ * kit its content layout. Without one the page renders bare: importing the panel layouts here
+ * would put the sidebar and top bar in every starter kit page.
+ */
+function layout(registry: { resolve(key: string): AnyComponent | undefined }, key: string) {
+  return registry.resolve(key) ?? BlankLayout
+}
+
 export function PageShell({ page, children }: { page: PageSchema; children: ReactNode }) {
   const { registry } = useAlfakit()
 
@@ -146,26 +159,22 @@ export function PageShell({ page, children }: { page: PageSchema; children: Reac
   // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).
   if (page.layout === 'auth') {
     return createElement(
-      registry.resolve('layout:auth') ?? AuthLayout,
+      layout(registry, 'layout:auth'),
       { heading: page.heading ?? page.title, subheading: page.subheading, page },
       children,
     )
   }
 
   if (page.layout === 'blank') {
-    return createElement(registry.resolve('layout:blank') ?? BlankLayout, { page }, children)
+    return createElement(layout(registry, 'layout:blank'), { page }, children)
   }
 
   if (page.layout === 'fullscreen') {
-    return createElement(
-      registry.resolve('layout:fullscreen') ?? FullscreenLayout,
-      { page },
-      children,
-    )
+    return createElement(layout(registry, 'layout:fullscreen'), { page }, children)
   }
 
   return createElement(
-    registry.resolve('layout:app') ?? AppLayout,
+    layout(registry, 'layout:app'),
     { breadcrumbs: page.breadcrumbs, maxContentWidth: page.maxContentWidth, page },
     <>
       {/* `?` overlay, `/`, `g d` and panel command shortcuts (`keyboardShortcuts()`). */}

package/src/standalone/alfakit-component.tsx

@@ -80,16 +80,25 @@ export function AlfakitComponent({
   const context = useMemo<AlfakitContextValue>(() => {
     const poll = (target: string, interval: string | number | null | undefined) =>
       state.poll(target, interval)
+    const refresh = (targets: string[]) => state.refresh(targets)
 
     if (parent) {
-      return { ...parent, registry: createStandaloneRegistry(components, parent.registry), poll }
+      return {
+        ...parent,
+        registry: createStandaloneRegistry(components, parent.registry),
+        poll,
+        refresh,
+      }
     }
 
-    return createStandaloneContext(
-      { action: component.endpoints.action, modal: component.endpoints.modal },
-      components,
-      poll,
-    )
+    return {
+      ...createStandaloneContext(
+        { action: component.endpoints.action, modal: component.endpoints.modal },
+        components,
+        poll,
+      ),
+      refresh,
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [parent, state, overrideKeys])
 
@@ -122,7 +131,9 @@ export function AlfakitComponent({
   useEffect(() => registerStandaloneProp(propName ?? null), [propName])
 
   useEffect(() => {
-    void state.loadLazy()
+    void state.loadLazy(component)
+    // The token identifies a new payload.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state, component.token])
 
   // Toasts: use the layout's <AlfakitToaster /> when there is one, else the first component

package/src/standalone/alfakit-toaster.tsx

@@ -1,5 +1,6 @@
-import { resolveToastPosition, type ToastPosition } from '@alfakit/core'
+import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'
 import { useEffect, useMemo } from 'react'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import { Toaster } from '../components/ui/sonner'
 import { useOptionalAlfakit, type AlfakitContextValue } from '../context'
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'
@@ -46,7 +47,25 @@ export function AlfakitToaster({
     ensureFlashToasts(context.registry)
   }, [context])
 
+  // Our own toaster gets an id, so a `<Toaster />` the app's layout already mounts (the
+  // starter kits have one) doesn't show every Alfakit toast a second time.
+  useEffect(() => {
+    if (!toaster) return undefined
+
+    setToasterId(STARTER_KIT_TOASTER_ID)
+
+    return () => setToasterId(undefined)
+  }, [toaster])
+
   if (!toaster) return null
 
-  return <Toaster position={resolveToastPosition(position, dir)} dir={dir} richColors closeButton />
+  return (
+    <Toaster
+      id={STARTER_KIT_TOASTER_ID}
+      position={resolveToastPosition(position, dir)}
+      dir={dir}
+      richColors
+      closeButton
+    />
+  )
 }

package/src/starter-kit/dashboard-widgets.tsx

@@ -0,0 +1,78 @@
+import {
+  standaloneWidgetCount,
+  starterKitDashboardWidgets,
+  type StandaloneComponentSchema,
+} from '@alfakit/core'
+import { usePage } from '@inertiajs/react'
+import type { ReactNode } from 'react'
+import type { AnyComponent } from '../context'
+import { lazyComponent } from '../lib/lazy'
+import { cn } from '../lib/utils'
+
+/** Props of `<AlfakitWidgets>`. */
+export interface AlfakitWidgetsProps {
+  /** The `starterKit()` panel whose widgets to show (the first one by default). */
+  panel?: string
+  /** Frontend components of custom widgets (`{ RevenueWidget }`), as for `<AlfakitComponent>`. */
+  components?: Record<string, AnyComponent>
+  className?: string
+  /** Rendered instead when there are no widgets to show. */
+  children?: ReactNode
+}
+
+interface LoadedProps {
+  component: StandaloneComponentSchema
+  components?: Record<string, AnyComponent>
+  className?: string
+}
+
+const LoadedWidgets = lazyComponent<LoadedProps>(
+  () => import('../standalone/alfakit-component').then((module) => module.AlfakitComponent),
+  (props) => <WidgetsPlaceholder {...props} />,
+)
+
+/** Widget-sized boxes until the widgets' code has loaded (also during SSR). */
+function WidgetsPlaceholder({ component, className }: LoadedProps) {
+  const count = standaloneWidgetCount(component)
+
+  return (
+    <div
+      data-slot="starter-kit-widgets-placeholder"
+      aria-busy="true"
+      className={cn('grid auto-rows-min gap-4 md:grid-cols-2', className)}
+    >
+      {Array.from({ length: Math.max(count, 1) }, (_, index) => (
+        <div key={index} aria-hidden="true" className="bg-muted h-28 animate-pulse rounded-xl" />
+      ))}
+    </div>
+  )
+}
+
+/**
+ * The dashboard widgets of a `starterKit()` panel on the host's own dashboard. Reads the
+ * `alfakitWidgets` prop (shared on the panel's `starterKitDashboard()` pages only, the
+ * starter kit's `/dashboard` by default) and renders the widgets with the host's theme, as
+ * `<AlfakitComponent>` renders standalone widgets: lazy widgets, polling and table widget
+ * actions go through the panel's endpoints. Its code loads in the browser; the server
+ * render and hydration show placeholders. Renders `children` (the kit's placeholder boxes)
+ * when there are no widgets to show: other pages, guests, users who may not open the panel.
+ *
+ * ```tsx
+ * import { AlfakitWidgets } from '@alfakit/react'
+ *
+ * <AlfakitWidgets>
+ *   <MyEmptyState />
+ * </AlfakitWidgets>
+ * ```
+ */
+export function AlfakitWidgets({ panel, components, className, children }: AlfakitWidgetsProps) {
+  const component = starterKitDashboardWidgets(usePage().props, panel)
+
+  if (!component) return <>{children}</>
+
+  return (
+    <div data-slot="starter-kit-widgets">
+      <LoadedWidgets component={component} components={components} className={className} />
+    </div>
+  )
+}

package/src/starter-kit/impersonation-banner.tsx

@@ -0,0 +1,48 @@
+import type { ImpersonationSchema } from '@alfakit/core'
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import { ImpersonationBanner } from '../components/panel/impersonation-banner'
+
+// The header components appear in both header layouts and next to each other: the first
+// one mounted shows the banner, the others render nothing.
+let owner: symbol | null = null
+const listeners = new Set<() => void>()
+
+function setOwner(next: symbol | null): void {
+  owner = next
+  listeners.forEach((listener) => listener())
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+
+  return () => listeners.delete(listener)
+}
+
+/**
+ * The impersonation banner (who you are signed in as, **Leave**) on the host's own pages,
+ * rendered by the header components. Loaded only while impersonating; AlfaKit's pages
+ * render their own (`AlfakitRoot`).
+ */
+export default function StarterKitImpersonationBanner({
+  impersonation,
+}: {
+  impersonation: ImpersonationSchema
+}) {
+  const [id] = useState(() => Symbol('impersonation-banner'))
+  // Claimed once mounted (effects never run on the server), so SSR and hydration skip it.
+  const owns = useSyncExternalStore(
+    subscribe,
+    () => owner === id,
+    () => false,
+  )
+
+  useEffect(() => {
+    if (owner === null) setOwner(id)
+
+    return () => {
+      if (owner === id) setOwner(null)
+    }
+  }, [id])
+
+  return owns ? <ImpersonationBanner impersonation={impersonation} /> : null
+}

package/src/starter-kit/index.ts

@@ -1,3 +1,4 @@
+export { AlfakitWidgets, type AlfakitWidgetsProps } from './dashboard-widgets'
 export { useAlfakitNavigation, type AlfakitNavigation } from './navigation'
 export {
   AlfakitStarterKitRoot,
@@ -7,6 +8,7 @@ export {
   type StarterKitPageOptions,
 } from './starter-kit'
 export {
+  AlfakitCopilot,
   AlfakitNotifications,
   AlfakitSearch,
   AlfakitTenantSwitcher,

package/src/starter-kit/starter-kit.tsx

@@ -8,6 +8,7 @@ import {
   resolveRequestErrorNotification,
   starterKitBreadcrumbsFromProps,
   syncStarterKitPage,
+  usesStarterKitHostLayout,
   type AlfakitOptions,
   type AlfakitPageProps,
   type StarterKitBreadcrumb,
@@ -23,7 +24,11 @@ import {
   type AnyComponent,
 } from '../context'
 import { AlfakitRoot } from '../create-alfakit'
-import { MAX_WIDTHS, type AppLayoutProps } from '../layouts/app-layout'
+import type { AppLayoutProps } from '../layouts/app-layout'
+import { AuthLayout } from '../layouts/auth-layout'
+import { lazyPanelLayouts } from '../layouts/lazy-layouts'
+import { MAX_WIDTHS } from '../layouts/max-widths'
+import { discoverComponents } from '../lib/discovery'
 import { preloadIcons } from '../lib/icons'
 import { cn } from '../lib/utils'
 import { AlfakitPage } from '../pages/page'
@@ -45,6 +50,12 @@ export interface StarterKitPageOptions extends Pick<
    * `null` renders the pages without a host layout.
    */
   layout?: StarterKitLayout | null
+  /**
+   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass
+   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\/*.tsx')`
+   * from `resources/js/pages/Alfakit/Page.tsx` and every file there registers under its name.
+   */
+  discover?: AlfakitOptions<AnyComponent>['discover']
 }
 
 /**
@@ -78,14 +89,21 @@ export function StarterKitContentLayout({ children, maxContentWidth }: AppLayout
 let browserContext: AlfakitContextValue | null = null
 
 function createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {
+  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)
+  // keep the panel's card; the fullscreen layout loads on demand.
+  // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.
+  const discovered = discoverComponents(options.discover)
   const registry = createDefaultRegistry()
+    .registerMany(lazyPanelLayouts)
+    .register('layout:auth', AuthLayout)
     .register('layout:app', StarterKitContentLayout)
+    .registerMany(discovered.components)
     .registerMany(options.components ?? {})
   const translator = new Translator()
 
   return {
     registry,
-    pages: { 'Alfakit/Page': AlfakitPage, ...options.pages },
+    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },
     translator,
     actions: new ActionRunner({
       endpoints: { action: '', modal: '' },
@@ -155,7 +173,16 @@ export function AlfakitStarterKitRoot({
 
   return (
     <AlfakitProvider value={context}>
-      <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>
+      {/* The reading direction and language of Alfakit's content only: the host layout around
+          it (sidebar, header) and the app's own pages keep the document's. */}
+      <div
+        data-slot="starter-kit-root"
+        dir={panel?.localization?.direction ?? 'ltr'}
+        lang={panel?.localization?.tag}
+        className="contents"
+      >
+        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>
+      </div>
     </AlfakitProvider>
   )
 }
@@ -186,7 +213,7 @@ export function createStarterKitPage(options: StarterKitPageOptions = {}) {
 
   // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.
   AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [
-    ...(options.layout
+    ...(options.layout && usesStarterKitHostLayout(props)
       ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]
       : []),
     [AlfakitStarterKitRoot, { options }] as const,

package/src/starter-kit/widgets-loaded.tsx

@@ -7,8 +7,10 @@ import {
   loadStarterKitPanel,
   loadedStarterKitPanel,
   openRequestedStarterKitSearch,
+  starterKitCopilot,
   starterKitWidgetsPage,
   starterKitWidgetsPanel,
+  takeRequestedStarterKitCopilot,
   tenantNameText,
   type PanelSchema,
   type StarterKitWidgets,
@@ -17,6 +19,7 @@ import { router, usePage } from '@inertiajs/react'
 import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'
 import { Direction } from 'radix-ui'
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { AiCopilot } from '../components/ai/copilot'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
 import { RealtimeNotifications } from '../components/notifications/realtime-notifications'
 import { GlobalSearch } from '../components/panel/global-search'
@@ -41,6 +44,7 @@ import {
 } from '../context'
 import { Icon } from '../lib/icons'
 import {
+  CopilotTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
@@ -162,6 +166,24 @@ export function LoadedTenantSwitcher({ source }: WidgetProps) {
   )
 }
 
+/** The AI copilot (the panel pages' `topbar.end` slot component). */
+export function LoadedCopilot({ source }: WidgetProps) {
+  const panel = useWidgetsPanel(source)
+  // A click or the key bindings before the copilot loaded open it at once.
+  const [autoOpen] = useState(() => takeRequestedStarterKitCopilot())
+  const component = useMemo(() => (panel ? starterKitCopilot(panel) : null), [panel])
+
+  if (!panel) return <CopilotTrigger source={source} />
+
+  if (!component) return null
+
+  return (
+    <WidgetShell panel={panel}>
+      <AiCopilot component={component} autoOpen={autoOpen || takeRequestedStarterKitCopilot()} />
+    </WidgetShell>
+  )
+}
+
 /** The user's tenants on a page outside the panel (no current tenant). */
 function TenantChooser({ panel }: { panel: PanelSchema }) {
   const t = useT()
@@ -207,7 +229,7 @@ function TenantChooser({ panel }: { panel: PanelSchema }) {
             {tenancy.tenants.length > 0 && <DropdownMenuSeparator />}
             <DropdownMenuItem onSelect={() => router.visit(tenancy.registrationUrl!)}>
               <Icon name="alfakit::panels.tenant-menu.registration-button" fallback={PlusIcon} />
-              {t('tenancy.register', {}, 'New')}
+              {tenancy.registrationLabel ?? t('tenancy.register', {}, 'New')}
             </DropdownMenuItem>
           </>
         )}

package/src/starter-kit/widgets-triggers.tsx

@@ -1,12 +1,14 @@
 import {
   formatKeyBinding,
   initials,
+  registerStarterKitCopilotShortcut,
   registerStarterKitSearchShortcut,
+  requestStarterKitCopilot,
   requestStarterKitSearch,
   tenantNameText,
   type StarterKitWidgets,
 } from '@alfakit/core'
-import { BellIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'
+import { BellIcon, ChevronsUpDownIcon, SearchIcon, SparklesIcon } from 'lucide-react'
 import { useEffect } from 'react'
 import { useHydrated } from '../hooks/use-hydrated'
 
@@ -49,7 +51,7 @@ export function SearchTrigger({ source, onLoad }: WidgetProps & { onLoad?: () =>
       <SearchIcon className="size-4" aria-hidden="true" />
       <span className="sr-only sm:not-sr-only sm:flex-1 sm:text-start">{placeholder}</span>
       {hydrated && binding && (
-        <kbd className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
+        <kbd dir="ltr" className="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline">
           {formatKeyBinding(binding)}
         </kbd>
       )}
@@ -101,3 +103,36 @@ export function TenantSwitcherTrigger({ source }: WidgetProps) {
     </button>
   )
 }
+
+/**
+ * The AI copilot's button until its code has loaded: the same look, and it remembers a
+ * click or its key bindings (`mod+j`), so the copilot opens once loaded.
+ */
+export function CopilotTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {
+  const copilot = source.widgets.copilot
+  const keys = JSON.stringify(copilot?.keyBindings ?? [])
+  const label = copilot?.label ?? ''
+  // `onLoad` is a stable function (it starts loading the copilot's code).
+  useEffect(
+    () => registerStarterKitCopilotShortcut(JSON.parse(keys) as string[], label, () => onLoad?.()),
+    [keys, label, onLoad],
+  )
+
+  return (
+    <button
+      type="button"
+      data-slot="ai-copilot-trigger"
+      aria-label={label}
+      aria-haspopup="dialog"
+      title={label}
+      className="hover:bg-accent hover:text-accent-foreground inline-flex size-9 items-center justify-center rounded-md"
+      onPointerEnter={() => onLoad?.()}
+      onClick={() => {
+        requestStarterKitCopilot()
+        onLoad?.()
+      }}
+    >
+      <SparklesIcon className="size-4" aria-hidden="true" />
+    </button>
+  )
+}