@alfakit/vue 0.1.2 → 0.1.7

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/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/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'

package/src/styles.css

@@ -19,6 +19,13 @@
 
 @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.
@@ -122,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);