@alfakit/vue 0.1.7 → 0.1.9

package/dist/starter-kit/widgets/use-widgets.d.ts

@@ -3,7 +3,8 @@ import { type ComputedRef, type Ref } from 'vue';
 import type { AlfakitContextValue } from '../../context';
 /**
  * The panel the loaded components render with, once its data (`widgets.endpoint`) has
- * loaded: null until then. A tenant switch (another endpoint) loads its own.
+ * loaded: null until then. It is loaded per endpoint (a tenant switch) and language (a
+ * language switch), so the components follow a switch.
  */
 export declare function useWidgetsPanel(source: Ref<StarterKitWidgets>): ComputedRef<PanelSchema | null>;
 /** @internal The context of the loaded header components (browser only). */

package/dist/starter-kit/widgets/use-widgets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-widgets.d.ts","sourceRoot":"","sources":["../../../src/starter-kit/widgets/use-widgets.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAwB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,eAAe,CAAA;AAKtE;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,CAyB/F;AAMD,4EAA4E;AAC5E,wBAAgB,qBAAqB,IAAI,mBAAmB,CAS3D"}
+{"version":3,"file":"use-widgets.d.ts","sourceRoot":"","sources":["../../../src/starter-kit/widgets/use-widgets.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAwB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,eAAe,CAAA;AAKtE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,CA4B/F;AAMD,4EAA4E;AAC5E,wBAAgB,qBAAqB,IAAI,mBAAmB,CAS3D"}

package/dist/starter-kit/widgets/use-widgets.js

@@ -1,20 +1,20 @@
-import { ActionRunner as e, ComponentRegistry as t, Translator as n, loadStarterKitPanel as r, loadedStarterKitPanel as i, starterKitWidgetsPanel as a } from "@alfakit/core";
-import { computed as o, ref as s, watch as c } from "vue";
+import { ActionRunner as e, ComponentRegistry as t, Translator as n, loadStarterKitPanel as r, loadedStarterKitPanel as i, starterKitPanelLocale as a, starterKitWidgetsPanel as o } from "@alfakit/core";
+import { computed as s, ref as c, watch as l } from "vue";
 //#region src/starter-kit/widgets/use-widgets.ts
-function l(e) {
-	let t = s(0);
-	return c(() => e.value.widgets.endpoint, (e, n, i) => {
-		let a = !0;
-		i(() => a = !1), r(e).then(() => a && t.value++, () => {});
-	}, { immediate: !0 }), o(() => {
+function u(e) {
+	let t = c(0);
+	return l(() => [e.value.widgets.endpoint, a(e.value)], ([e, n], i, a) => {
+		let o = !0;
+		a(() => o = !1), r(e, n).then(() => o && t.value++, () => {});
+	}, { immediate: !0 }), s(() => {
 		t.value;
-		let n = i(e.value.widgets.endpoint);
-		return n ? a(n, e.value) : null;
+		let n = i(e.value.widgets.endpoint, a(e.value));
+		return n ? o(n, e.value) : null;
 	});
 }
-var u = null;
-function d() {
-	return u ??= {
+var d = null;
+function f() {
+	return d ??= {
 		registry: new t(),
 		pages: {},
 		translator: new n(),
@@ -22,9 +22,9 @@ function d() {
 			action: "",
 			modal: ""
 		} })
-	}, u;
+	}, d;
 }
 //#endregion
-export { l as useWidgetsPanel, d as widgetsAlfakitContext };
+export { u as useWidgetsPanel, f as widgetsAlfakitContext };
 
 //# sourceMappingURL=use-widgets.js.map

package/dist/starter-kit/widgets/use-widgets.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-widgets.js","names":["useWidgetsPanel","version","ref","watch","source","active","onCleanup","loadStarterKitPanel","endpoint","computed","base","loadedStarterKitPanel","starterKitWidgetsPanel","widgetsContext","widgetsAlfakitContext","ComponentRegistry","Translator","ActionRunner"],"sources":["../../../src/starter-kit/widgets/use-widgets.ts"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  Translator,\n  loadStarterKitPanel,\n  loadedStarterKitPanel,\n  starterKitWidgetsPanel,\n  type PanelSchema,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { computed, ref, watch, type ComputedRef, type Ref } from 'vue'\nimport type { AlfakitContextValue, AnyComponent } from '../../context'\n\n// The loaded components' panel and context; `./index` (the eager triggers) must not import\n// this module, which pulls in the action runner.\n\n/**\n * The panel the loaded components render with, once its data (`widgets.endpoint`) has\n * loaded: null until then. A tenant switch (another endpoint) loads its own.\n */\nexport function useWidgetsPanel(source: Ref<StarterKitWidgets>): ComputedRef<PanelSchema | null> {\n  const version = ref(0)\n\n  watch(\n    () => source.value.widgets.endpoint,\n    (endpoint, _old, onCleanup) => {\n      let active = true\n\n      onCleanup(() => (active = false))\n\n      void loadStarterKitPanel(endpoint).then(\n        () => active && version.value++,\n        () => {},\n      )\n    },\n    { immediate: true },\n  )\n\n  return computed(() => {\n    void version.value\n\n    const base = loadedStarterKitPanel(source.value.widgets.endpoint)\n\n    return base ? starterKitWidgetsPanel(base, source.value) : null\n  })\n}\n\n// One context for the browser session: its own translator (the panel's strings), an empty\n// registry (only `panel:icon` overrides are looked up here) and an idle action runner.\nlet widgetsContext: AlfakitContextValue | null = null\n\n/** @internal The context of the loaded header components (browser only). */\nexport function widgetsAlfakitContext(): AlfakitContextValue {\n  widgetsContext ??= {\n    registry: new ComponentRegistry<AnyComponent>(),\n    pages: {},\n    translator: new Translator(),\n    actions: new ActionRunner({ endpoints: { action: '', modal: '' } }),\n  }\n\n  return widgetsContext\n}\n"],"mappings":";;;AAoBA,SAAgBA,EAAgB,GAAiE;CAC/F,IAAMC,IAAUC,EAAI,CAAC;CAiBrB,OAfAC,QACQC,EAAO,MAAM,QAAQ,WAC1B,GAAU,GAAM,MAAc;EAC7B,IAAIC,IAAS;EAIb,AAFAC,QAAiB,IAAS,EAAM,GAEhCC,EAAyBC,CAAQ,CAAC,CAAC,WAC3BH,KAAU,EAAQ,eAClB,CAAC,CACT;CACF,GACA,EAAE,WAAW,GAAK,CACpB,GAEOI,QAAe;EACpB,EAAa;EAEb,IAAMC,IAAOC,EAAsBP,EAAO,MAAM,QAAQ,QAAQ;EAEhE,OAAOM,IAAOE,EAAuBF,GAAMN,EAAO,KAAK,IAAI;CAC7D,CAAC;AACH;AAIA,IAAIS,IAA6C;AAGjD,SAAgBC,IAA6C;CAQ3D,OAPA,MAAmB;EACjB,UAAU,IAAIC,EAAgC;EAC9C,OAAO,CAAC;EACR,YAAY,IAAIC,EAAW;EAC3B,SAAS,IAAIC,EAAa,EAAE,WAAW;GAAE,QAAQ;GAAI,OAAO;EAAG,EAAE,CAAC;CACpE,GAEOJ;AACT"}
+{"version":3,"file":"use-widgets.js","names":["useWidgetsPanel","version","ref","watch","source","starterKitPanelLocale","endpoint","locale","active","onCleanup","loadStarterKitPanel","computed","base","loadedStarterKitPanel","starterKitWidgetsPanel","widgetsContext","widgetsAlfakitContext","ComponentRegistry","Translator","ActionRunner"],"sources":["../../../src/starter-kit/widgets/use-widgets.ts"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  Translator,\n  loadStarterKitPanel,\n  loadedStarterKitPanel,\n  starterKitPanelLocale,\n  starterKitWidgetsPanel,\n  type PanelSchema,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { computed, ref, watch, type ComputedRef, type Ref } from 'vue'\nimport type { AlfakitContextValue, AnyComponent } from '../../context'\n\n// The loaded components' panel and context; `./index` (the eager triggers) must not import\n// this module, which pulls in the action runner.\n\n/**\n * The panel the loaded components render with, once its data (`widgets.endpoint`) has\n * loaded: null until then. It is loaded per endpoint (a tenant switch) and language (a\n * language switch), so the components follow a switch.\n */\nexport function useWidgetsPanel(source: Ref<StarterKitWidgets>): ComputedRef<PanelSchema | null> {\n  const version = ref(0)\n\n  watch(\n    () => [source.value.widgets.endpoint, starterKitPanelLocale(source.value)] as const,\n    ([endpoint, locale], _old, onCleanup) => {\n      let active = true\n\n      onCleanup(() => (active = false))\n\n      void loadStarterKitPanel(endpoint, locale).then(\n        () => active && version.value++,\n        () => {},\n      )\n    },\n    { immediate: true },\n  )\n\n  return computed(() => {\n    void version.value\n\n    const base = loadedStarterKitPanel(\n      source.value.widgets.endpoint,\n      starterKitPanelLocale(source.value),\n    )\n\n    return base ? starterKitWidgetsPanel(base, source.value) : null\n  })\n}\n\n// One context for the browser session: its own translator (the panel's strings), an empty\n// registry (only `panel:icon` overrides are looked up here) and an idle action runner.\nlet widgetsContext: AlfakitContextValue | null = null\n\n/** @internal The context of the loaded header components (browser only). */\nexport function widgetsAlfakitContext(): AlfakitContextValue {\n  widgetsContext ??= {\n    registry: new ComponentRegistry<AnyComponent>(),\n    pages: {},\n    translator: new Translator(),\n    actions: new ActionRunner({ endpoints: { action: '', modal: '' } }),\n  }\n\n  return widgetsContext\n}\n"],"mappings":";;;AAsBA,SAAgBA,EAAgB,GAAiE;CAC/F,IAAMC,IAAUC,EAAI,CAAC;CAiBrB,OAfAC,QACQ,CAACC,EAAO,MAAM,QAAQ,UAAUC,EAAsBD,EAAO,KAAK,CAAC,IACxE,CAACE,GAAUC,IAAS,GAAM,MAAc;EACvC,IAAIC,IAAS;EAIb,AAFAC,QAAiB,IAAS,EAAM,GAEhCC,EAAyBJ,GAAUC,CAAM,CAAC,CAAC,WACnCC,KAAU,EAAQ,eAClB,CAAC,CACT;CACF,GACA,EAAE,WAAW,GAAK,CACpB,GAEOG,QAAe;EACpB,EAAa;EAEb,IAAMC,IAAOC,EACXT,EAAO,MAAM,QAAQ,UACrBC,EAAsBD,EAAO,KAAK,CACpC;EAEA,OAAOQ,IAAOE,EAAuBF,GAAMR,EAAO,KAAK,IAAI;CAC7D,CAAC;AACH;AAIA,IAAIW,IAA6C;AAGjD,SAAgBC,IAA6C;CAQ3D,OAPA,MAAmB;EACjB,UAAU,IAAIC,EAAgC;EAC9C,OAAO,CAAC;EACR,YAAY,IAAIC,EAAW;EAC3B,SAAS,IAAIC,EAAa,EAAE,WAAW;GAAE,QAAQ;GAAI,OAAO;EAAG,EAAE,CAAC;CACpE,GAEOJ;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/vue",
-  "version": "0.1.7",
+  "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.7"
+    "@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>

package/src/starter-kit/index.ts

@@ -5,6 +5,7 @@ export { createStarterKitPage, type StarterKitPageOptions } from './starter-kit'
 export { default as StarterKitContentLayout } from './StarterKitContentLayout.vue'
 export {
   AlfakitCopilot,
+  AlfakitLanguageSwitcher,
   AlfakitNotifications,
   AlfakitSearch,
   AlfakitTenantSwitcher,

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { takeRequestedStarterKitLanguages } from '@alfakit/core'
+import { LanguagesIcon } from '@lucide/vue'
+import { computed, onMounted, ref } from 'vue'
+import LocaleOptions from '../../components/panel/LocaleOptions.vue'
+import DropdownMenu from '../../components/ui/DropdownMenu.vue'
+import DropdownMenuContent from '../../components/ui/DropdownMenuContent.vue'
+import DropdownMenuTrigger from '../../components/ui/DropdownMenuTrigger.vue'
+import { useLocalization, useT } from '../../context'
+
+/** The loaded language button and menu, inside the widgets' context (`WidgetShell`). */
+
+const t = useT()
+const localization = useLocalization()
+const open = ref(false)
+
+// A click on the trigger before the menu loaded opens it once mounted (taken per mount: the
+// header is a persistent layout, so the switcher around it outlives a language switch), a
+// frame later, as the menu closes again when it opens while focus is on the replaced button.
+onMounted(() => {
+  if (takeRequestedStarterKitLanguages()) requestAnimationFrame(() => (open.value = true))
+})
+const label = computed(() => t('change_language', {}, 'Change language'))
+</script>
+
+<template>
+  <DropdownMenu v-model:open="open">
+    <DropdownMenuTrigger as-child>
+      <button
+        type="button"
+        data-slot="language-switcher-trigger"
+        :aria-label="label"
+        :title="label"
+        class="hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent focus-visible:ring-ring/50 inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-[3px]"
+      >
+        <LanguagesIcon class="size-4" aria-hidden="true" />
+        <span :lang="localization.tag" :dir="localization.direction" class="hidden sm:inline">{{
+          localization.label
+        }}</span>
+      </button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="min-w-40">
+      <LocaleOptions />
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { requestStarterKitLanguages, type StarterKitWidgets } from '@alfakit/core'
+import { LanguagesIcon } from '@lucide/vue'
+import { computed } from 'vue'
+
+/**
+ * The language button until its menu has loaded: the languages icon and the current
+ * language in its own name (from `sm`). A click is remembered and opens the menu once loaded.
+ */
+const props = defineProps<{ source: StarterKitWidgets }>()
+
+const language = computed(() => props.source.widgets.language)
+</script>
+
+<template>
+  <button
+    type="button"
+    data-slot="language-switcher-trigger"
+    :aria-label="language?.label"
+    aria-haspopup="menu"
+    :title="language?.label"
+    class="hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent focus-visible:ring-ring/50 inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-[3px]"
+    @click="requestStarterKitLanguages()"
+  >
+    <LanguagesIcon class="size-4" aria-hidden="true" />
+    <span
+      v-if="language"
+      :lang="language.current.tag"
+      :dir="language.current.direction"
+      class="hidden sm:inline"
+      >{{ language.current.label }}</span
+    >
+  </button>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { showsLanguageSwitcher, type StarterKitWidgets } from '@alfakit/core'
+import { computed, toRef } from 'vue'
+import LanguageMenu from './LanguageMenu.vue'
+import LanguageSwitcherTrigger from './LanguageSwitcherTrigger.vue'
+import { useWidgetsPanel } from './use-widgets'
+import WidgetShell from './WidgetShell.vue'
+
+/**
+ * The panel's language menu (its languages in their own names, `LocaleOptions`): picking
+ * one posts to the panel's locale endpoint and reloads the page in it. Nothing without a
+ * language switcher with two or more languages.
+ */
+const props = defineProps<{ source: StarterKitWidgets }>()
+
+const panel = useWidgetsPanel(toRef(props, 'source'))
+const visible = computed(() => showsLanguageSwitcher(panel.value?.localization, 'auth'))
+</script>
+
+<template>
+  <template v-if="panel">
+    <WidgetShell v-if="visible" :panel="panel">
+      <LanguageMenu />
+    </WidgetShell>
+  </template>
+  <LanguageSwitcherTrigger v-else :source="props.source" />
+</template>

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

@@ -15,25 +15,27 @@ import {
 } from 'vue'
 import { lazyComponent } from '../../lib/lazy'
 import CopilotTrigger from './CopilotTrigger.vue'
+import LanguageSwitcherTrigger from './LanguageSwitcherTrigger.vue'
 import NotificationsTrigger from './NotificationsTrigger.vue'
 import SearchTrigger from './SearchTrigger.vue'
 import TenantSwitcherTrigger from './TenantSwitcherTrigger.vue'
 
 /**
  * Drop-in header components of starter kit mode (`Panel::starterKit()`): AlfaKit's search,
- * notifications bell and tenant switcher in the host's own header, on every page of the
+ * notifications bell, tenant switcher and language switcher in the host's own header, on every page of the
  * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger
  * straight away, and load their code and the panel data once mounted (never during SSR).
  *
  * ```vue
  * <script setup lang="ts">
- * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/vue'
+ * import { AlfakitCopilot, AlfakitLanguageSwitcher, AlfakitNotifications, AlfakitSearch } from '@alfakit/vue'
  * </script>
  *
  * <template>
  *   <AlfakitSearch />
  *   <AlfakitNotifications />
  *   <AlfakitCopilot />
+ *   <AlfakitLanguageSwitcher />
  * </template>
  * ```
  */
@@ -66,6 +68,12 @@ const LoadedTenantSwitcher = lazyComponent(
   TenantSwitcherTrigger,
 )
 
+const LoadedLanguageSwitcher = lazyComponent(
+  'AlfakitLoadedLanguageSwitcher',
+  () => import('./loaded').then((module) => module.LoadedLanguageSwitcher),
+  LanguageSwitcherTrigger,
+)
+
 const LoadedCopilot = lazyComponent(
   'AlfakitLoadedCopilot',
   () => import('./loaded').then((module) => module.LoadedCopilot),
@@ -159,3 +167,17 @@ export const AlfakitCopilot = headerWidget(
   'copilot',
   LoadedCopilot,
 )
+
+/**
+ * The panel's language menu (`locales()`): the current language straight away, and each
+ * language in its own name once loaded. Picking one switches the panel's language (the
+ * session, the cookie and `persistLocaleUsing()`) and reloads the page, so AlfaKit pages and
+ * the header components show it; the host's own pages and `<html lang dir>` are the app's.
+ * Renders nothing for guests or with fewer than two languages.
+ */
+export const AlfakitLanguageSwitcher = headerWidget(
+  'AlfakitLanguageSwitcher',
+  'starter-kit-language-switcher',
+  'language',
+  LoadedLanguageSwitcher,
+)

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

@@ -4,6 +4,7 @@
  * Only loaded in the browser (`import('./loaded')`).
  */
 export { default as LoadedCopilot } from './LoadedCopilot.vue'
+export { default as LoadedLanguageSwitcher } from './LoadedLanguageSwitcher.vue'
 export { default as LoadedNotifications } from './LoadedNotifications.vue'
 export { default as LoadedSearch } from './LoadedSearch.vue'
 export { default as LoadedTenantSwitcher } from './LoadedTenantSwitcher.vue'

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

@@ -4,6 +4,7 @@ import {
   Translator,
   loadStarterKitPanel,
   loadedStarterKitPanel,
+  starterKitPanelLocale,
   starterKitWidgetsPanel,
   type PanelSchema,
   type StarterKitWidgets,
@@ -16,19 +17,20 @@ import type { AlfakitContextValue, AnyComponent } from '../../context'
 
 /**
  * The panel the loaded components render with, once its data (`widgets.endpoint`) has
- * loaded: null until then. A tenant switch (another endpoint) loads its own.
+ * loaded: null until then. It is loaded per endpoint (a tenant switch) and language (a
+ * language switch), so the components follow a switch.
  */
 export function useWidgetsPanel(source: Ref<StarterKitWidgets>): ComputedRef<PanelSchema | null> {
   const version = ref(0)
 
   watch(
-    () => source.value.widgets.endpoint,
-    (endpoint, _old, onCleanup) => {
+    () => [source.value.widgets.endpoint, starterKitPanelLocale(source.value)] as const,
+    ([endpoint, locale], _old, onCleanup) => {
       let active = true
 
       onCleanup(() => (active = false))
 
-      void loadStarterKitPanel(endpoint).then(
+      void loadStarterKitPanel(endpoint, locale).then(
         () => active && version.value++,
         () => {},
       )
@@ -39,7 +41,10 @@ export function useWidgetsPanel(source: Ref<StarterKitWidgets>): ComputedRef<Pan
   return computed(() => {
     void version.value
 
-    const base = loadedStarterKitPanel(source.value.widgets.endpoint)
+    const base = loadedStarterKitPanel(
+      source.value.widgets.endpoint,
+      starterKitPanelLocale(source.value),
+    )
 
     return base ? starterKitWidgetsPanel(base, source.value) : null
   })