@alfakit/vue 0.1.8 → 0.1.9

package/dist/starter-kit/AlfakitStarterKitRoot.vue_vue_type_script_setup_true_lang.js

@@ -1,40 +1,44 @@
 import { provideAlfakit as e } from "../context.js";
 import { setToasterId as t, showToast as n } from "../components/notifications/flash-toasts.js";
-import r from "../AlfakitRoot.js";
-import { starterKitContext as i } from "./runtime.js";
-import { STARTER_KIT_TOASTER_ID as a, installStarterKitRuntime as o, syncStarterKitPage as s } from "@alfakit/core";
-import { usePage as c } from "@inertiajs/vue3";
-import { createElementBlock as l, createVNode as u, defineComponent as d, onMounted as f, onUnmounted as p, openBlock as m, renderSlot as h, unref as g, watch as _, withCtx as v } from "vue";
+import r from "../components/panel/DebugPanelSlot.js";
+import i from "../AlfakitRoot.js";
+import { starterKitContext as a } from "./runtime.js";
+import { STARTER_KIT_TOASTER_ID as o, installStarterKitRuntime as s, syncStarterKitPage as c } from "@alfakit/core";
+import { usePage as l } from "@inertiajs/vue3";
+import { createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, onMounted as m, onUnmounted as h, openBlock as g, renderSlot as _, unref as v, watch as y, withCtx as b } from "vue";
 //#region src/starter-kit/AlfakitStarterKitRoot.vue?vue&type=script&setup=true&lang.ts
-var y = ["dir", "lang"], b = /*@__PURE__*/ d({
+var x = ["dir", "lang"], S = {
+	"data-slot": "starter-kit-debug-panel",
+	class: "fixed end-16 bottom-4 z-40"
+}, C = /*@__PURE__*/ p({
 	__name: "AlfakitStarterKitRoot",
 	props: { options: {} },
-	setup(d) {
-		let b = i(d.options ?? {}), x = c();
-		return e(b), _(() => x.props.alfakit?.endpoints, (e) => {
-			e && b.actions.setEndpoints({
+	setup(p) {
+		let C = a(p.options ?? {}), w = l();
+		return e(C), y(() => w.props.alfakit?.endpoints, (e) => {
+			e && C.actions.setEndpoints({
 				action: e.action ?? "",
 				modal: e.modal ?? ""
 			});
 		}, {
 			immediate: !0,
 			flush: "sync"
-		}), f(() => {
-			o((e) => n(e), (e, t, n) => b.translator.t(e, t, n)), t(a), _(() => x.props, (e) => s(e), { immediate: !0 });
-		}), p(() => {
-			s(null), t(void 0);
-		}), (e, t) => (m(), l("div", {
+		}), m(() => {
+			s((e) => n(e), (e, t, n) => C.translator.t(e, t, n)), t(o), y(() => w.props, (e) => c(e), { immediate: !0 });
+		}), h(() => {
+			c(null), t(void 0);
+		}), (e, t) => (g(), u("div", {
 			"data-slot": "starter-kit-root",
-			dir: g(x).props.alfakit?.localization?.direction ?? "ltr",
-			lang: g(x).props.alfakit?.localization?.tag,
+			dir: v(w).props.alfakit?.localization?.direction ?? "ltr",
+			lang: v(w).props.alfakit?.localization?.tag,
 			class: "contents"
-		}, [u(r, { "toaster-id": g(a) }, {
-			default: v(() => [h(e.$slots, "default")]),
+		}, [f(i, { "toaster-id": v(o) }, {
+			default: b(() => [_(e.$slots, "default"), d("div", S, [f(r)])]),
 			_: 3
-		}, 8, ["toaster-id"])], 8, y));
+		}, 8, ["toaster-id"])], 8, x));
 	}
 });
 //#endregion
-export { b as default };
+export { C as default };
 
 //# sourceMappingURL=AlfakitStarterKitRoot.vue_vue_type_script_setup_true_lang.js.map

package/dist/starter-kit/AlfakitStarterKitRoot.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlfakitStarterKitRoot.vue_vue_type_script_setup_true_lang.js","names":["props","_openBlock","_createElementBlock","_unref","_createVNode","AlfakitRoot","_withCtx","_renderSlot","AlfakitRoot_default","_hoisted_1","AlfakitStarterKitRoot_vue_vue_type_script_setup_true_lang_default","context","starterKitContext","__props","page","usePage","provideAlfakit","watch","endpoints","onMounted","installStarterKitRuntime","showToast","notification","key","replacements","fallback","setToasterId","STARTER_KIT_TOASTER_ID","syncStarterKitPage","value","onUnmounted","openBlock","createElementBlock","unref","createVNode","withCtx","renderSlot","_ctx"],"sources":["../../src/starter-kit/AlfakitStarterKitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  STARTER_KIT_TOASTER_ID,\n  installStarterKitRuntime,\n  syncStarterKitPage,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { onMounted, onUnmounted, watch } from 'vue'\nimport AlfakitRoot from '../AlfakitRoot.vue'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { provideAlfakit } from '../context'\nimport { starterKitContext, type StarterKitPageOptions } from './runtime'\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nconst props = defineProps<{ options?: StarterKitPageOptions }>()\nconst context = starterKitContext(props.options ?? {})\nconst page = usePage<AlfakitPageProps>()\n\nprovideAlfakit(context)\n\n// Endpoints follow the open page (synchronously, before children run actions).\nwatch(\n  () => page.props.alfakit?.endpoints,\n  (endpoints) => {\n    if (endpoints) {\n      context.actions.setEndpoints({ action: endpoints.action ?? '', modal: endpoints.modal ?? '' })\n    }\n  },\n  { immediate: true, flush: 'sync' },\n)\n\nonMounted(() => {\n  installStarterKitRuntime(\n    (notification) => showToast(notification),\n    (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n  )\n  setToasterId(STARTER_KIT_TOASTER_ID)\n\n  watch(\n    () => page.props,\n    (value) => syncStarterKitPage(value as AlfakitPageProps),\n    { immediate: true },\n  )\n})\n\nonUnmounted(() => {\n  // A host page is open: its errors and toasts are the host's again.\n  syncStarterKitPage(null)\n  setToasterId(undefined)\n})\n</script>\n\n<template>\n  <!-- The reading direction and language of Alfakit's content only: the host layout around it\n       (sidebar, header) and the app's own pages keep the document's. -->\n  <div\n    data-slot=\"starter-kit-root\"\n    :dir=\"page.props.alfakit?.localization?.direction ?? 'ltr'\"\n    :lang=\"page.props.alfakit?.localization?.tag\"\n    class=\"contents\"\n  >\n    <AlfakitRoot :toaster-id=\"STARTER_KIT_TOASTER_ID\">\n      <slot />\n    </AlfakitRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAoBA,IAAMW,IAAUC,EAAkBZ,EAAM,WAAW,CAAC,CAAC,GAC/Cc,IAAOC,EAA0B;SAEvCC,EAAeL,CAAO,GAGtBM,QACQH,EAAK,MAAM,SAAS,YACzB,MAAc;GACb,AAAII,KACFP,EAAQ,QAAQ,aAAa;IAAE,QAAQO,EAAU,UAAU;IAAI,OAAOA,EAAU,SAAS;GAAG,CAAC;EAEjG,GACA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC,GAEAC,QAAgB;GAOd,AANAC,GACG,MAAiBC,EAAUC,CAAY,IACvC,GAAK,GAAc,MAAaX,EAAQ,WAAW,EAAEY,GAAKC,GAAcC,CAAQ,CACnF,GACAC,EAAaC,CAAsB,GAEnCV,QACQH,EAAK,QACV,MAAUc,EAAmBC,CAAyB,GACvD,EAAE,WAAW,GAAK,CACpB;EACF,CAAC,GAEDC,QAAkB;GAGhB,AADAF,EAAmB,IAAI,GACvBF,EAAa,KAAA,CAAS;EACxB,CAAC,cAMCzB,EAAA,GAAAC,EASM,OAAA;GARJ,aAAU;GACT,KAAKC,EAAAW,CAAA,CAAI,CAAC,MAAM,SAAS,cAAc,aAAS;GAChD,MAAMX,EAAAW,CAAA,CAAI,CAAC,MAAM,SAAS,cAAc;GACzC,OAAM;EAENV,GAAAA,CAAAA,EAEcC,GAAA,EAFA,cAAYF,EAAAwB,CAAA,EAAsB,GAAA;GAC9C,SAAArB,QAAQ,CAARC,EAAQ8B,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"AlfakitStarterKitRoot.vue_vue_type_script_setup_true_lang.js","names":["props","_openBlock","_createElementBlock","_unref","_createVNode","AlfakitRoot","_withCtx","_renderSlot","_createElementVNode","DebugPanelSlot","DebugPanelSlot_default","AlfakitRoot_default","_hoisted_1","_hoisted_2","AlfakitStarterKitRoot_vue_vue_type_script_setup_true_lang_default","context","starterKitContext","__props","page","usePage","provideAlfakit","watch","endpoints","onMounted","installStarterKitRuntime","showToast","notification","key","replacements","fallback","setToasterId","STARTER_KIT_TOASTER_ID","syncStarterKitPage","value","onUnmounted","openBlock","createElementBlock","unref","createVNode","withCtx","renderSlot","_ctx","createElementVNode"],"sources":["../../src/starter-kit/AlfakitStarterKitRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  STARTER_KIT_TOASTER_ID,\n  installStarterKitRuntime,\n  syncStarterKitPage,\n  type AlfakitPageProps,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/vue3'\nimport { onMounted, onUnmounted, watch } from 'vue'\nimport AlfakitRoot from '../AlfakitRoot.vue'\nimport DebugPanelSlot from '../components/panel/DebugPanelSlot.vue'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { provideAlfakit } from '../context'\nimport { starterKitContext, type StarterKitPageOptions } from './runtime'\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nconst props = defineProps<{ options?: StarterKitPageOptions }>()\nconst context = starterKitContext(props.options ?? {})\nconst page = usePage<AlfakitPageProps>()\n\nprovideAlfakit(context)\n\n// Endpoints follow the open page (synchronously, before children run actions).\nwatch(\n  () => page.props.alfakit?.endpoints,\n  (endpoints) => {\n    if (endpoints) {\n      context.actions.setEndpoints({ action: endpoints.action ?? '', modal: endpoints.modal ?? '' })\n    }\n  },\n  { immediate: true, flush: 'sync' },\n)\n\nonMounted(() => {\n  installStarterKitRuntime(\n    (notification) => showToast(notification),\n    (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n  )\n  setToasterId(STARTER_KIT_TOASTER_ID)\n\n  watch(\n    () => page.props,\n    (value) => syncStarterKitPage(value as AlfakitPageProps),\n    { immediate: true },\n  )\n})\n\nonUnmounted(() => {\n  // A host page is open: its errors and toasts are the host's again.\n  syncStarterKitPage(null)\n  setToasterId(undefined)\n})\n</script>\n\n<template>\n  <!-- The reading direction and language of Alfakit's content only: the host layout around it\n       (sidebar, header) and the app's own pages keep the document's. -->\n  <div\n    data-slot=\"starter-kit-root\"\n    :dir=\"page.props.alfakit?.localization?.direction ?? 'ltr'\"\n    :lang=\"page.props.alfakit?.localization?.tag\"\n    class=\"contents\"\n  >\n    <AlfakitRoot :toaster-id=\"STARTER_KIT_TOASTER_ID\">\n      <slot />\n      <!-- The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't\n           render: float it in the corner (nothing without `alfakitDebug`). -->\n      <div data-slot=\"starter-kit-debug-panel\" class=\"fixed end-16 bottom-4 z-40\">\n        <DebugPanelSlot />\n      </div>\n    </AlfakitRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAqBA,IAAMe,IAAUC,EAAkBhB,EAAM,WAAW,CAAC,CAAC,GAC/CkB,IAAOC,EAA0B;SAEvCC,EAAeL,CAAO,GAGtBM,QACQH,EAAK,MAAM,SAAS,YACzB,MAAc;GACb,AAAII,KACFP,EAAQ,QAAQ,aAAa;IAAE,QAAQO,EAAU,UAAU;IAAI,OAAOA,EAAU,SAAS;GAAG,CAAC;EAEjG,GACA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC,GAEAC,QAAgB;GAOd,AANAC,GACG,MAAiBC,EAAUC,CAAY,IACvC,GAAK,GAAc,MAAaX,EAAQ,WAAW,EAAEY,GAAKC,GAAcC,CAAQ,CACnF,GACAC,EAAaC,CAAsB,GAEnCV,QACQH,EAAK,QACV,MAAUc,EAAmBC,CAAyB,GACvD,EAAE,WAAW,GAAK,CACpB;EACF,CAAC,GAEDC,QAAkB;GAGhB,AADAF,EAAmB,IAAI,GACvBF,EAAa,KAAA,CAAS;EACxB,CAAC,cAMC7B,EAAA,GAAAC,EAcM,OAAA;GAbJ,aAAU;GACT,KAAKC,EAAAe,CAAA,CAAI,CAAC,MAAM,SAAS,cAAc,aAAS;GAChD,MAAMf,EAAAe,CAAA,CAAI,CAAC,MAAM,SAAS,cAAc;GACzC,OAAM;EAENd,GAAAA,CAAAA,EAOcC,GAAA,EAPA,cAAYF,EAAA4B,CAAA,EAAsB,GAAA;GAC9C,SAAAzB,QAAQ,CAARC,EAAQkC,EAAA,QAAA,SAAA,GAGRjC,EAEM,OAFNK,GAEM,CADJT,EAAkBK,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/vue",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Vue 3 + shadcn-vue renderer for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",
@@ -96,7 +96,7 @@
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^3.7.0",
     "vue-sonner": "^2.0.9",
-    "@alfakit/core": "0.1.8"
+    "@alfakit/core": "0.1.9"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^3.0.0",

package/src/components/actions/ActionModal.vue

@@ -426,6 +426,8 @@ const hasBody = computed(() =>
           cn(
             schema.stickyHeader &&
               'bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4',
+            // Room for the close button (X): a long heading would run under it.
+            schema.closeButton !== false && (schema.stickyHeader ? 'pe-12' : 'pe-6'),
           )
         "
       >

package/src/components/form/FormBlock.vue

@@ -4,6 +4,7 @@ import {
   FormStore,
   applyFormRefresh,
   formActionsVisible,
+  formIdPrefix,
   formIdentity,
   formRefreshFor,
   isImplicitSubmit,
@@ -18,9 +19,16 @@ import {
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/vue3'
-import { computed, onBeforeUnmount, onMounted, onScopeDispose, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, useId, watch } from 'vue'
 import { useStore } from '../../composables/use-store'
-import { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'
+import {
+  useActionRunner,
+  useAlfakitProps,
+  usePageSchema,
+  usePanel,
+  useStandalone,
+  useT,
+} from '../../context'
 import ActionList from '../actions/ActionList.vue'
 import SchemaRenderer from '../schema/SchemaRenderer.vue'
 import { showToast } from '../notifications/flash-toasts'
@@ -39,9 +47,14 @@ const runner = useActionRunner()
 const t = useT()
 const token = computed(() => page.value?.token ?? '')
 
+// Several standalone components can share a page (and field names): each form gets its own
+// field id prefix, so labels and errors point at their own inputs.
+const standalone = useStandalone()
+const instanceId = useId()
 const store = new FormStore(props.block, {
   token: token.value,
   component: props.block.component,
+  idPrefix: standalone ? formIdPrefix(`form-${instanceId}`) : undefined,
   refreshUrl: panel.value.endpoints.schemaRefresh,
   optionsUrl: panel.value.endpoints.schemaOptions,
   validateUrl: panel.value.endpoints.schemaValidate,

package/src/components/panel/BottomNav.vue

@@ -40,7 +40,7 @@ const url = (item: NavigationItemSchema): string => navigationItemUrl(item) ?? '
     :aria-label="t('navigation', {}, 'Navigation')"
     class="md:hidden"
   >
-    <template v-for="item in items.primary" :key="item.label">
+    <template v-for="item in items.primary" :key="item.url ?? item.label">
       <a
         v-if="item.openInNewTab"
         v-bind="item.extraAttributes ?? {}"
@@ -91,7 +91,7 @@ const url = (item: NavigationItemSchema): string => navigationItemUrl(item) ?? '
         >
           <Link
             v-for="item in overflowLinks"
-            :key="item.label"
+            :key="item.url ?? item.label"
             :href="url(item)"
             :data-active="isNavigationItemActive(item) ? 'true' : undefined"
             class="hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4"

package/src/components/panel/KeyboardShortcuts.vue

@@ -70,7 +70,7 @@ const registrations = computed(() =>
   config.value
     ? JSON.stringify({
         token: page.value?.token ?? '',
-        home: panel.value.url ?? null,
+        home: panel.value.dashboardUrl ?? panel.value.url ?? null,
         commands: (panel.value.commandPalette?.commands ?? []).filter(
           (command) => command.keyBindings?.length && !command.disabled,
         ),

package/src/components/panel/NavGroup.vue

@@ -25,7 +25,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
   <SidebarGroup v-if="!props.group.label" v-bind="attributes()">
     <SidebarGroupContent>
       <SidebarMenu>
-        <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+        <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
       </SidebarMenu>
     </SidebarGroupContent>
   </SidebarGroup>
@@ -36,7 +36,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
     </SidebarGroupLabel>
     <SidebarGroupContent :class="contentClass()">
       <SidebarMenu>
-        <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+        <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
       </SidebarMenu>
     </SidebarGroupContent>
     <NavGroupFlyout v-if="flyout()" :group="props.group" />
@@ -67,7 +67,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
       <CollapsibleContent>
         <SidebarGroupContent :class="contentClass()">
           <SidebarMenu>
-            <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+            <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
           </SidebarMenu>
         </SidebarGroupContent>
       </CollapsibleContent>

package/src/components/panel/NavItem.vue

@@ -63,7 +63,11 @@ const t = useT()
       </CollapsibleTrigger>
       <CollapsibleContent>
         <SidebarMenuSub>
-          <NavSubItem v-for="child in props.item.children" :key="child.label" :item="child" />
+          <NavSubItem
+            v-for="child in props.item.children"
+            :key="child.url ?? child.label"
+            :item="child"
+          />
         </SidebarMenuSub>
       </CollapsibleContent>
     </SidebarMenuItem>

package/src/components/panel/NavSubItem.vue

@@ -65,7 +65,11 @@ const badgeClass = computed(() =>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <SidebarMenuSub>
-          <NavSubItem v-for="child in props.item.children" :key="child.label" :item="child" />
+          <NavSubItem
+            v-for="child in props.item.children"
+            :key="child.url ?? child.label"
+            :item="child"
+          />
         </SidebarMenuSub>
       </CollapsibleContent>
     </Collapsible>

package/src/components/ui/TooltipTrigger.vue

@@ -5,7 +5,10 @@ const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
-  <TooltipTrigger v-bind="props" data-slot="tooltip-trigger">
+  <!-- With as-child the child keeps its own data-slot (an action's `button`). -->
+  <TooltipTrigger
+    v-bind="{ ...(props.asChild ? {} : { 'data-slot': 'tooltip-trigger' }), ...props }"
+  >
     <slot />
   </TooltipTrigger>
 </template>

package/src/layouts/TopNavLayout.vue

@@ -97,7 +97,7 @@ const linkClass =
                 </p>
                 <Link
                   v-for="item in group.items.flatMap((entry) => [entry, ...(entry.children ?? [])])"
-                  :key="item.label"
+                  :key="item.url ?? item.label"
                   :href="item.url ?? '#'"
                   :data-active="item.active ? 'true' : undefined"
                   class="hover:bg-accent data-[active=true]:bg-accent flex items-center gap-2 rounded-md px-2 py-2 font-medium [&_svg]:size-4"
@@ -133,7 +133,7 @@ const linkClass =
               :items="group.items"
               :active="group.items.some(isActive)"
             />
-            <template v-for="item in group.items" v-else :key="item.label">
+            <template v-for="item in group.items" v-else :key="item.url ?? item.label">
               <TopNavMenu
                 v-if="item.children && item.children.length > 0"
                 :label="item.label"

package/src/layouts/TopNavMenu.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
       <ChevronDownIcon class="opacity-60" />
     </DropdownMenuTrigger>
     <DropdownMenuContent align="start" class="min-w-48">
-      <DropdownMenuItem v-for="item in props.items" :key="item.label" as-child>
+      <DropdownMenuItem v-for="item in props.items" :key="item.url ?? item.label" as-child>
         <Link
           v-bind="item.extraAttributes ?? {}"
           :href="item.url ?? '#'"

package/src/standalone/AlfakitComponent.vue

@@ -69,9 +69,16 @@ const poll = (target: string, interval: string | number | null | undefined) =>
   state.poll(target, interval)
 const refresh = (targets: string[]) => state.refresh(targets)
 
+// Inside a panel page: the panel's registry and translator, but this component's own action
+// runner, so its actions post to its own endpoints with its own token (not the panel's: 403).
 const context: AlfakitContextValue = parent
   ? {
       ...parent,
+      actions: createStandaloneContext(
+        { action: props.component.endpoints.action, modal: props.component.endpoints.modal },
+        props.components,
+        poll,
+      ).actions,
       registry: createStandaloneRegistry(props.components, parent.registry),
       poll,
       refresh,
@@ -201,7 +208,7 @@ onMounted(() => {
         <slot name="footer" />
       </div>
       <ActionModals />
-      <AlfakitToaster v-if="ownsToaster" claimed />
+      <AlfakitToaster v-if="ownsToaster" claimed :dir="direction" />
     </TooltipProvider>
   </component>
 </template>

package/src/starter-kit/AlfakitStarterKitRoot.vue

@@ -8,6 +8,7 @@ import {
 import { usePage } from '@inertiajs/vue3'
 import { onMounted, onUnmounted, watch } from 'vue'
 import AlfakitRoot from '../AlfakitRoot.vue'
+import DebugPanelSlot from '../components/panel/DebugPanelSlot.vue'
 import { setToasterId, showToast } from '../components/notifications/flash-toasts'
 import { provideAlfakit } from '../context'
 import { starterKitContext, type StarterKitPageOptions } from './runtime'
@@ -66,6 +67,11 @@ onUnmounted(() => {
   >
     <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
       <slot />
+      <!-- The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't
+           render: float it in the corner (nothing without `alfakitDebug`). -->
+      <div data-slot="starter-kit-debug-panel" class="fixed end-16 bottom-4 z-40">
+        <DebugPanelSlot />
+      </div>
     </AlfakitRoot>
   </div>
 </template>