@alfakit/vue 0.1.1 → 0.1.6

package/src/layouts/panel-layouts.ts

@@ -0,0 +1,17 @@
+import type { AnyComponent } from '../context'
+import AppLayout from './AppLayout.vue'
+import AuthLayout from './AuthLayout.vue'
+import BlankLayout from './BlankLayout.vue'
+import FullscreenLayout from './FullscreenLayout.vue'
+
+/**
+ * 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/lib/lazy.ts

@@ -29,8 +29,18 @@ export function lazyComponent(
     inheritAttrs: false,
     setup(_, { attrs }) {
       const mounted = useAppMounted()
+      // Picked once per instance: switching from the async wrapper to the loaded component
+      // on a later render would be a new component type, so Vue would remount it and its
+      // state (a spreadsheet's undo history, an editor's selection) would be lost.
+      let component: Component | null = null
 
-      return () => h(mounted.value ? (loaded ?? Async) : fallback, attrs)
+      return () => {
+        if (!mounted.value) return h(fallback, attrs)
+
+        component ??= loaded ?? Async
+
+        return h(component, attrs)
+      }
     },
   })
 }

package/src/pages/PageShell.vue

@@ -5,10 +5,7 @@ import { computed, onBeforeUnmount, watch } from 'vue'
 import KeyboardShortcuts from '../components/panel/KeyboardShortcuts.vue'
 import Slot from '../components/panel/Slot.vue'
 import { useRegistry } from '../context'
-import AppLayout from '../layouts/AppLayout.vue'
-import AuthLayout from '../layouts/AuthLayout.vue'
 import BlankLayout from '../layouts/BlankLayout.vue'
-import FullscreenLayout from '../layouts/FullscreenLayout.vue'
 import SubNavigationLayout from '../components/panel/SubNavigationLayout.vue'
 import ConflictBanner from '../components/realtime/ConflictBanner.vue'
 import PageHeader from './PageHeader.vue'
@@ -17,10 +14,12 @@ const props = defineProps<{ page: PageSchema }>()
 const registry = useRegistry()
 
 // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).
-const Auth = computed(() => registry.resolve('layout:auth') ?? AuthLayout)
+// `createAlfakit()` registers the panel's layouts (`panelLayouts`), the starter kit its content
+// layout; importing the panel layouts here would put the sidebar in every starter kit page.
+const Auth = computed(() => registry.resolve('layout:auth') ?? BlankLayout)
 const Blank = computed(() => registry.resolve('layout:blank') ?? BlankLayout)
-const Fullscreen = computed(() => registry.resolve('layout:fullscreen') ?? FullscreenLayout)
-const App = computed(() => registry.resolve('layout:app') ?? AppLayout)
+const Fullscreen = computed(() => registry.resolve('layout:fullscreen') ?? BlankLayout)
+const App = computed(() => registry.resolve('layout:app') ?? BlankLayout)
 // Edit pages: somebody else saved the record (`detectConflicts()`, `Panel::realtime()`).
 const Conflicts = computed(() => registry.resolve('page:conflict-banner') ?? ConflictBanner)
 

package/src/standalone/AlfakitComponent.vue

@@ -67,14 +67,23 @@ const version = ref(0)
 const state = new StandaloneComponentState(props.component, () => version.value++)
 const poll = (target: string, interval: string | number | null | undefined) =>
   state.poll(target, interval)
+const refresh = (targets: string[]) => state.refresh(targets)
 
 const context: AlfakitContextValue = parent
-  ? { ...parent, registry: createStandaloneRegistry(props.components, parent.registry), poll }
-  : createStandaloneContext(
-      { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
-      props.components,
+  ? {
+      ...parent,
+      registry: createStandaloneRegistry(props.components, parent.registry),
       poll,
-    )
+      refresh,
+    }
+  : {
+      ...createStandaloneContext(
+        { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
+        props.components,
+        poll,
+      ),
+      refresh,
+    }
 
 provide(ALFAKIT_KEY, context)
 
@@ -124,9 +133,11 @@ onMounted(() => {
     { immediate: true },
   )
 
+  // The watcher runs before the new payload renders: hand it over, or the response would
+  // count as stale and lazy widgets (a calendar after its action) keep their old schema.
   watch(
     () => props.component.token,
-    () => void state.loadLazy(),
+    () => void state.loadLazy(props.component),
     { immediate: true },
   )
 

package/src/standalone/AlfakitToaster.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { resolveToastPosition, type ToastPosition } from '@alfakit/core'
+import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'
 import { onMounted, onUnmounted } from 'vue'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import Toaster from '../components/ui/Toaster.vue'
 import { useOptionalAlfakit } from '../context'
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'
@@ -38,15 +39,24 @@ let release: (() => void) | null = null
 onMounted(() => {
   if (!props.claimed) release = claimToaster()
 
+  // 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.
+  if (props.toaster) setToasterId(STARTER_KIT_TOASTER_ID)
+
   ensureFlashToasts(context.registry)
 })
 
-onUnmounted(() => release?.())
+onUnmounted(() => {
+  release?.()
+
+  if (props.toaster) setToasterId(undefined)
+})
 </script>
 
 <template>
   <Toaster
     v-if="props.toaster"
+    :id="STARTER_KIT_TOASTER_ID"
     :position="resolveToastPosition(props.position, props.dir)"
     :dir="props.dir"
     rich-colors

package/src/starter-kit/AlfakitStarterKitRoot.vue

@@ -56,7 +56,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
-    <slot />
-  </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="page.props.alfakit?.localization?.direction ?? 'ltr'"
+    :lang="page.props.alfakit?.localization?.tag"
+    class="contents"
+  >
+    <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
+      <slot />
+    </AlfakitRoot>
+  </div>
 </template>

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

@@ -0,0 +1,93 @@
+import {
+  standaloneWidgetCount,
+  starterKitDashboardWidgets,
+  type StandaloneComponentSchema,
+} from '@alfakit/core'
+import { usePage } from '@inertiajs/vue3'
+import { computed, defineComponent, h, type PropType } from 'vue'
+import type { AnyComponent } from '../context'
+import { lazyComponent } from '../lib/lazy'
+
+/** Widget-sized boxes until the widgets' code has loaded (also during SSR). */
+const WidgetsPlaceholder = defineComponent({
+  name: 'AlfakitWidgetsPlaceholder',
+  props: {
+    component: { type: Object as PropType<StandaloneComponentSchema>, required: true },
+    // Declared so it does not fall through as an attribute.
+    components: { type: Object as PropType<Record<string, AnyComponent>>, default: undefined },
+  },
+  setup(props) {
+    return () =>
+      h(
+        'div',
+        {
+          'data-slot': 'starter-kit-widgets-placeholder',
+          'aria-busy': 'true',
+          class: 'grid auto-rows-min gap-4 md:grid-cols-2',
+        },
+        Array.from({ length: Math.max(standaloneWidgetCount(props.component), 1) }, (_, index) =>
+          h('div', {
+            key: index,
+            'aria-hidden': 'true',
+            class: 'bg-muted h-28 animate-pulse rounded-xl',
+          }),
+        ),
+      )
+  },
+})
+
+const LoadedWidgets = lazyComponent(
+  'AlfakitLoadedWidgets',
+  () => import('../standalone/AlfakitComponent.vue').then((module) => module.default),
+  WidgetsPlaceholder,
+)
+
+/**
+ * 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 once mounted; the server render
+ * and hydration show placeholders. Renders its default slot (the kit's placeholder boxes)
+ * when there are no widgets to show: other pages, guests, users who may not open the panel.
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { AlfakitWidgets } from '@alfakit/vue'
+ * </script>
+ *
+ * <template>
+ *   <AlfakitWidgets>
+ *     <MyEmptyState />
+ *   </AlfakitWidgets>
+ * </template>
+ * ```
+ */
+export const AlfakitWidgets = defineComponent({
+  name: 'AlfakitWidgets',
+  inheritAttrs: false,
+  props: {
+    /** The `starterKit()` panel whose widgets to show (the first one by default). */
+    panel: { type: String as PropType<string | undefined>, default: undefined },
+    /** Frontend components of custom widgets (`{ RevenueWidget }`), as for `<AlfakitComponent>`. */
+    components: {
+      type: Object as PropType<Record<string, AnyComponent> | undefined>,
+      default: undefined,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const page = usePage()
+    const component = computed(() => starterKitDashboardWidgets(page.props, props.panel))
+
+    return () =>
+      component.value
+        ? h('div', { 'data-slot': 'starter-kit-widgets' }, [
+            h(LoadedWidgets, {
+              component: component.value,
+              components: props.components,
+              class: attrs.class,
+            }),
+          ])
+        : slots.default?.()
+  },
+})

package/src/starter-kit/index.ts

@@ -1,5 +1,11 @@
 export { default as AlfakitStarterKitRoot } from './AlfakitStarterKitRoot.vue'
+export { AlfakitWidgets } from './dashboard-widgets'
 export { useAlfakitNavigation, type AlfakitNavigation } from './navigation'
 export { createStarterKitPage, type StarterKitPageOptions } from './starter-kit'
 export { default as StarterKitContentLayout } from './StarterKitContentLayout.vue'
-export { AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher } from './widgets'
+export {
+  AlfakitCopilot,
+  AlfakitNotifications,
+  AlfakitSearch,
+  AlfakitTenantSwitcher,
+} from './widgets'

package/src/starter-kit/runtime.ts

@@ -6,6 +6,9 @@ import {
 } from '@alfakit/core'
 import { showToast } from '../components/notifications/flash-toasts'
 import type { AlfakitContextValue, AnyComponent } from '../context'
+import AuthLayout from '../layouts/AuthLayout.vue'
+import { lazyPanelLayouts } from '../layouts/lazy-layouts'
+import { discoverComponents } from '../lib/discovery'
 import { preloadIcons } from '../lib/icons'
 import AlfakitPage from '../pages/AlfakitPage.vue'
 import { createDefaultRegistry } from '../registry'
@@ -21,6 +24,12 @@ export interface StarterKitPageOptions extends Pick<
    * `null` renders the pages without a host layout.
    */
   layout?: AnyComponent | null
+  /**
+   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass
+   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\/*.vue')`
+   * from `resources/js/pages/Alfakit/Page.vue` and every file there registers under its name.
+   */
+  discover?: AlfakitOptions<AnyComponent>['discover']
 }
 
 // One context for the browser session (it survives navigations between host and Alfakit
@@ -28,14 +37,21 @@ export interface StarterKitPageOptions extends Pick<
 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: '' },

package/src/starter-kit/starter-kit.ts

@@ -2,6 +2,7 @@ import {
   configureCharts,
   registerRichEditorExtensions,
   starterKitBreadcrumbsFromProps,
+  usesStarterKitHostLayout,
 } from '@alfakit/core'
 import { defineComponent, h, markRaw } from 'vue'
 import AlfakitPage from '../pages/AlfakitPage.vue'
@@ -38,7 +39,7 @@ export function createStarterKitPage(options: StarterKitPageOptions = {}) {
   // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.
   return Object.assign(page, {
     layout: (props: Record<string, unknown>) => [
-      ...(options.layout
+      ...(options.layout && usesStarterKitHostLayout(props)
         ? [[markRaw(options.layout), { breadcrumbs: starterKitBreadcrumbsFromProps(props) }]]
         : []),
       [AlfakitStarterKitRoot, { options }],

package/src/starter-kit/widgets/CopilotTrigger.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  registerStarterKitCopilotShortcut,
+  requestStarterKitCopilot,
+  type StarterKitWidgets,
+} from '@alfakit/core'
+import { computed, watch } from 'vue'
+
+/**
+ * The AI copilot's button until its code has loaded: the same look, from the shared prop
+ * alone (its code loads once mounted). A click and its key bindings (`mod+j`) are
+ * remembered and open it once loaded.
+ */
+const props = defineProps<{ source: StarterKitWidgets }>()
+
+const copilot = computed(() => props.source.widgets.copilot)
+
+if (typeof window !== 'undefined') {
+  watch(
+    copilot,
+    (value, _old, onCleanup) =>
+      onCleanup(registerStarterKitCopilotShortcut(value?.keyBindings ?? [], value?.label ?? '')),
+    { immediate: true },
+  )
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    data-slot="ai-copilot-trigger"
+    :aria-label="copilot?.label"
+    aria-haspopup="dialog"
+    :title="copilot?.label"
+    class="hover:bg-accent hover:text-accent-foreground inline-flex size-9 items-center justify-center rounded-md"
+    @click="requestStarterKitCopilot()"
+  >
+    <!-- Lucide's "sparkles", inline: the loaded copilot draws the same icon. -->
+    <svg
+      class="size-4"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+      />
+      <path d="M20 2v4" />
+      <path d="M22 4h-4" />
+      <circle cx="4" cy="20" r="2" />
+    </svg>
+  </button>
+</template>

package/src/starter-kit/widgets/LoadedCopilot.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  starterKitCopilot,
+  takeRequestedStarterKitCopilot,
+  type StarterKitWidgets,
+} from '@alfakit/core'
+import { computed, toRef } from 'vue'
+import AiCopilot from '../../components/ai/AiCopilot.vue'
+import CopilotTrigger from './CopilotTrigger.vue'
+import { useWidgetsPanel } from './use-widgets'
+import WidgetShell from './WidgetShell.vue'
+
+/** The AI copilot (the panel pages' `topbar.end` slot component), once its data has loaded. */
+const props = defineProps<{ source: StarterKitWidgets }>()
+
+const panel = useWidgetsPanel(toRef(props, 'source'))
+const component = computed(() => (panel.value ? starterKitCopilot(panel.value) : null))
+// A click or the key bindings before the copilot loaded open it at once.
+const autoOpen = computed(() => component.value !== null && takeRequestedStarterKitCopilot())
+</script>
+
+<template>
+  <template v-if="panel">
+    <WidgetShell v-if="component" :panel="panel">
+      <AiCopilot :component="component" :auto-open="autoOpen" />
+    </WidgetShell>
+  </template>
+  <CopilotTrigger v-else :source="props.source" />
+</template>

package/src/starter-kit/widgets/SearchTrigger.vue

@@ -50,6 +50,7 @@ function request() {
     <span class="sr-only sm:not-sr-only sm:flex-1 sm:text-start">{{ placeholder }}</span>
     <kbd
       v-if="hydrated && binding"
+      dir="ltr"
       class="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline"
       >{{ formatKeyBinding(binding) }}</kbd
     >

package/src/starter-kit/widgets/StarterKitImpersonationBanner.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+// 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
+</script>
+
+<script setup lang="ts">
+import { isAlfakitPage, type StarterKitWidgets } from '@alfakit/core'
+import { usePage } from '@inertiajs/vue3'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import ImpersonationBanner from '../../components/panel/ImpersonationBanner.vue'
+
+/**
+ * The impersonation banner (who you are signed in as, **Leave**) on the host's own pages,
+ * rendered by the header components. AlfaKit's pages render their own (`AlfakitRoot`).
+ */
+const props = defineProps<{ source: StarterKitWidgets | null }>()
+const page = usePage()
+const id = Symbol('impersonation-banner')
+const owns = ref(false)
+const impersonation = computed(() => props.source?.widgets.impersonation)
+const active = computed(() => impersonation.value !== undefined && !isAlfakitPage(page.props))
+
+function release(): void {
+  if (owner === id) owner = null
+  owns.value = false
+}
+
+// Claimed once mounted, so the server render and hydration never include it.
+let stop: (() => void) | null = null
+
+onMounted(() => {
+  stop = watch(
+    active,
+    (value) => {
+      if (!value) {
+        release()
+
+        return
+      }
+
+      if (owner === null) owner = id
+      owns.value = owner === id
+    },
+    { immediate: true },
+  )
+})
+
+onBeforeUnmount(() => {
+  stop?.()
+  release()
+})
+</script>
+
+<template>
+  <ImpersonationBanner v-if="active && owns" :impersonation="impersonation" />
+</template>

package/src/starter-kit/widgets/TenantChooser.vue

@@ -63,7 +63,7 @@ const visible = computed(
         <DropdownMenuSeparator v-if="tenancy.tenants.length > 0" />
         <DropdownMenuItem @select="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>
       </template>
     </DropdownMenuContent>

package/src/starter-kit/widgets/index.ts

@@ -4,8 +4,17 @@ import {
   type StarterKitWidgetsSchema,
 } from '@alfakit/core'
 import { usePage } from '@inertiajs/vue3'
-import { computed, defineComponent, h, type Component, type ComputedRef, type PropType } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  type Component,
+  type ComputedRef,
+  type PropType,
+} from 'vue'
 import { lazyComponent } from '../../lib/lazy'
+import CopilotTrigger from './CopilotTrigger.vue'
 import NotificationsTrigger from './NotificationsTrigger.vue'
 import SearchTrigger from './SearchTrigger.vue'
 import TenantSwitcherTrigger from './TenantSwitcherTrigger.vue'
@@ -18,12 +27,13 @@ import TenantSwitcherTrigger from './TenantSwitcherTrigger.vue'
  *
  * ```vue
  * <script setup lang="ts">
- * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/vue'
+ * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/vue'
  * </script>
  *
  * <template>
  *   <AlfakitSearch />
  *   <AlfakitNotifications />
+ *   <AlfakitCopilot />
  * </template>
  * ```
  */
@@ -31,51 +41,73 @@ import TenantSwitcherTrigger from './TenantSwitcherTrigger.vue'
 /** The header components' data of a `starterKit()` panel from the shared prop, or null. */
 function useStarterKitWidgets(
   panelId: () => string | undefined,
+  part: keyof StarterKitWidgetsSchema,
 ): ComputedRef<StarterKitWidgets | null> {
   const page = usePage()
 
-  return computed(() => starterKitWidgets(page.props, panelId()))
+  return computed(() => starterKitWidgets(page.props, panelId(), part))
 }
 
 const LoadedSearch = lazyComponent(
   'AlfakitLoadedSearch',
-  () => import('./LoadedSearch.vue').then((module) => module.default),
+  () => import('./loaded').then((module) => module.LoadedSearch),
   SearchTrigger,
 )
 
 const LoadedNotifications = lazyComponent(
   'AlfakitLoadedNotifications',
-  () => import('./LoadedNotifications.vue').then((module) => module.default),
+  () => import('./loaded').then((module) => module.LoadedNotifications),
   NotificationsTrigger,
 )
 
 const LoadedTenantSwitcher = lazyComponent(
   'AlfakitLoadedTenantSwitcher',
-  () => import('./LoadedTenantSwitcher.vue').then((module) => module.default),
+  () => import('./loaded').then((module) => module.LoadedTenantSwitcher),
   TenantSwitcherTrigger,
 )
 
+const LoadedCopilot = lazyComponent(
+  'AlfakitLoadedCopilot',
+  () => import('./loaded').then((module) => module.LoadedCopilot),
+  CopilotTrigger,
+)
+
+// Only needed while impersonating: its code loads then.
+const StarterKitImpersonationBanner = defineAsyncComponent(
+  () => import('./StarterKitImpersonationBanner.vue'),
+)
+
 function headerWidget(
   name: string,
   slot: string,
-  part: keyof Omit<StarterKitWidgetsSchema, 'endpoint'>,
+  part: keyof Omit<StarterKitWidgetsSchema, 'endpoint' | 'impersonation'>,
   loaded: Component,
 ) {
   return defineComponent({
     name,
     props: {
-      /** 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: { type: String as PropType<string | undefined>, default: undefined },
     },
     setup(props) {
-      const source = useStarterKitWidgets(() => props.panel)
+      const source = useStarterKitWidgets(() => props.panel, part)
 
       return () => {
         const value: StarterKitWidgets | null = source.value
 
-        return value?.widgets[part]
-          ? h('span', { 'data-slot': slot, class: 'inline-flex' }, [h(loaded, { source: value })])
+        // While impersonating, the first header component shows the banner on host pages.
+        const banner = value?.widgets.impersonation
+          ? h(StarterKitImpersonationBanner, { source: value })
           : null
+
+        if (!value?.widgets[part]) return banner
+
+        const widget = h('span', { 'data-slot': slot, class: 'inline-flex' }, [
+          h(loaded, { source: value }),
+        ])
+
+        // A single root unless the banner shows, so attributes from the app still fall through.
+        return banner ? [banner, widget] : widget
       }
     },
   })
@@ -114,3 +146,16 @@ export const AlfakitTenantSwitcher = headerWidget(
   'tenancy',
   LoadedTenantSwitcher,
 )
+
+/**
+ * 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 const AlfakitCopilot = headerWidget(
+  'AlfakitCopilot',
+  'starter-kit-copilot',
+  'copilot',
+  LoadedCopilot,
+)

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

@@ -0,0 +1,9 @@
+/**
+ * The loaded header components, in one module: they mount together in the host's header,
+ * so one request brings them all, and a host bundle doesn't pay for a chunk per component.
+ * Only loaded in the browser (`import('./loaded')`).
+ */
+export { default as LoadedCopilot } from './LoadedCopilot.vue'
+export { default as LoadedNotifications } from './LoadedNotifications.vue'
+export { default as LoadedSearch } from './LoadedSearch.vue'
+export { default as LoadedTenantSwitcher } from './LoadedTenantSwitcher.vue'