@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/panel/keyboard-shortcuts.js

@@ -0,0 +1,107 @@
+import { useActionRunner, usePageSchema, usePanel, useT } from "../../context.js";
+import { COMMANDS_COMPONENT, SHORTCUT_IDS, commandShortcutId, focusTableSearch, shortcuts } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/panel/keyboard-shortcuts.tsx
+let loadedOverlay;
+let loadingOverlay;
+/** The `?` overlay's code: loaded the first time it opens; the shortcuts register eagerly. */
+function loadOverlay() {
+	loadingOverlay ??= import("./shortcuts-overlay.js").then((module) => loadedOverlay = module.ShortcutsOverlay, (error) => {
+		loadingOverlay = void 0;
+		throw error;
+	});
+	return loadingOverlay;
+}
+/**
+* Keyboard shortcuts of the panel: `/` (focus the table search), `g d` (dashboard), `?`
+* (the overlay) and the panel commands' `shortcut()`, with the user's customised keys
+* (`alfakit.keyboardShortcuts`). The overlay lists everything available on the page,
+* grouped, and lets users change keys (stored on the server).
+*/
+function KeyboardShortcuts() {
+	const t = useT();
+	const panel = usePanel();
+	const page = usePageSchema();
+	const runner = useActionRunner();
+	const config = panel.keyboardShortcuts;
+	const [open, setOpen] = useState(false);
+	const [ShortcutsOverlay, setOverlay] = useState(() => loadedOverlay);
+	const overrides = JSON.stringify(config ? config.overrides ?? {} : {});
+	const token = page?.token ?? "";
+	const commands = panel.commandPalette?.commands;
+	const home = panel.url;
+	const overlayLabel = t("shortcuts.show_overlay", {}, "Show keyboard shortcuts");
+	const searchLabel = t("shortcuts.focus_search", {}, "Search the table");
+	const dashboardLabel = t("shortcuts.go_dashboard", {}, "Go to the dashboard");
+	useEffect(() => {
+		shortcuts.setEnabled(config !== false);
+		shortcuts.setOverrides(JSON.parse(overrides));
+	}, [config, overrides]);
+	useEffect(() => {
+		if (!config) return;
+		const disposers = [
+			shortcuts.register({
+				id: SHORTCUT_IDS.overlay,
+				keys: ["?"],
+				label: overlayLabel,
+				group: "general",
+				handler: () => setOpen(true)
+			}),
+			shortcuts.register({
+				id: SHORTCUT_IDS.search,
+				keys: ["/"],
+				label: searchLabel,
+				group: "general",
+				handler: () => focusTableSearch()
+			}),
+			...home ? [shortcuts.register({
+				id: SHORTCUT_IDS.dashboard,
+				keys: ["g d"],
+				label: dashboardLabel,
+				group: "navigation",
+				handler: () => router.visit(home)
+			})] : [],
+			...(commands ?? []).filter((command) => command.keyBindings?.length && !command.disabled).map((command) => shortcuts.register({
+				id: commandShortcutId(command.name),
+				keys: command.keyBindings ?? [],
+				label: command.label ?? command.name,
+				group: command.url ? "navigation" : "commands",
+				handler: () => void runner.trigger(command, {
+					token,
+					component: COMMANDS_COMPONENT
+				})
+			}))
+		];
+		return () => disposers.forEach((dispose) => dispose());
+	}, [
+		config,
+		commands,
+		home,
+		runner,
+		token,
+		overlayLabel,
+		searchLabel,
+		dashboardLabel
+	]);
+	useEffect(() => {
+		if (!open || ShortcutsOverlay) return;
+		let active = true;
+		loadOverlay().then((component) => active && setOverlay(() => component), () => active && setOpen(false));
+		return () => {
+			active = false;
+		};
+	}, [open, ShortcutsOverlay]);
+	if (!config || !ShortcutsOverlay) return null;
+	return /* @__PURE__ */ jsx(ShortcutsOverlay, {
+		open,
+		onOpenChange: setOpen,
+		customizable: Boolean(config.customizable && panel.endpoints.shortcuts),
+		endpoint: panel.endpoints.shortcuts
+	});
+}
+//#endregion
+export { KeyboardShortcuts };
+
+//# sourceMappingURL=keyboard-shortcuts.js.map

package/dist/components/panel/keyboard-shortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcuts.js","names":[],"sources":["../../../src/components/panel/keyboard-shortcuts.tsx"],"sourcesContent":["import type { CommandSchema } from '@alfakit/core'\nimport {\n  COMMANDS_COMPONENT,\n  commandShortcutId,\n  focusTableSearch,\n  SHORTCUT_IDS,\n  shortcuts,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useEffect, useState } from 'react'\nimport { useActionRunner, usePageSchema, usePanel, useT } from '../../context'\nimport type { ShortcutsOverlay as Overlay } from './shortcuts-overlay'\n\ntype OverlayComponent = typeof Overlay\n\nlet loadedOverlay: OverlayComponent | undefined\nlet loadingOverlay: Promise<OverlayComponent> | undefined\n\n/** The `?` overlay's code: loaded the first time it opens; the shortcuts register eagerly. */\nfunction loadOverlay(): Promise<OverlayComponent> {\n  loadingOverlay ??= import('./shortcuts-overlay').then(\n    (module) => (loadedOverlay = module.ShortcutsOverlay),\n    (error: unknown) => {\n      loadingOverlay = undefined\n      throw error\n    },\n  )\n\n  return loadingOverlay\n}\n\n/**\n * Keyboard shortcuts of the panel: `/` (focus the table search), `g d` (dashboard), `?`\n * (the overlay) and the panel commands' `shortcut()`, with the user's customised keys\n * (`alfakit.keyboardShortcuts`). The overlay lists everything available on the page,\n * grouped, and lets users change keys (stored on the server).\n */\nexport function KeyboardShortcuts() {\n  const t = useT()\n  const panel = usePanel()\n  const page = usePageSchema()\n  const runner = useActionRunner()\n  const config = panel.keyboardShortcuts\n  const [open, setOpen] = useState(false)\n  // Undefined on the server and during hydration (nothing loads there), so the markup matches.\n  const [ShortcutsOverlay, setOverlay] = useState<OverlayComponent | undefined>(() => loadedOverlay)\n  const overrides = JSON.stringify(config ? (config.overrides ?? {}) : {})\n  const token = page?.token ?? ''\n  const commands = panel.commandPalette?.commands\n  const home = panel.url\n  // Strings, so the effect below doesn't re-run on every render (`t` is a new function each time).\n  const overlayLabel = t('shortcuts.show_overlay', {}, 'Show keyboard shortcuts')\n  const searchLabel = t('shortcuts.focus_search', {}, 'Search the table')\n  const dashboardLabel = t('shortcuts.go_dashboard', {}, 'Go to the dashboard')\n\n  useEffect(() => {\n    shortcuts.setEnabled(config !== false)\n    shortcuts.setOverrides(JSON.parse(overrides) as Record<string, string[]>)\n  }, [config, overrides])\n\n  useEffect(() => {\n    if (!config) return\n\n    const disposers = [\n      shortcuts.register({\n        id: SHORTCUT_IDS.overlay,\n        keys: ['?'],\n        label: overlayLabel,\n        group: 'general',\n        handler: () => setOpen(true),\n      }),\n      // Declined (`false`) on pages without a table search, so `/` keeps its default.\n      shortcuts.register({\n        id: SHORTCUT_IDS.search,\n        keys: ['/'],\n        label: searchLabel,\n        group: 'general',\n        handler: () => focusTableSearch(),\n      }),\n      ...(home\n        ? [\n            shortcuts.register({\n              id: SHORTCUT_IDS.dashboard,\n              keys: ['g d'],\n              label: dashboardLabel,\n              group: 'navigation',\n              handler: () => router.visit(home),\n            }),\n          ]\n        : []),\n      ...(commands ?? [])\n        .filter((command: CommandSchema) => command.keyBindings?.length && !command.disabled)\n        .map((command: CommandSchema) =>\n          shortcuts.register({\n            id: commandShortcutId(command.name),\n            keys: command.keyBindings ?? [],\n            label: command.label ?? command.name,\n            group: command.url ? 'navigation' : 'commands',\n            handler: () => void runner.trigger(command, { token, component: COMMANDS_COMPONENT }),\n          }),\n        ),\n    ]\n\n    return () => disposers.forEach((dispose) => dispose())\n  }, [config, commands, home, runner, token, overlayLabel, searchLabel, dashboardLabel])\n\n  // `?` (or the palette's \"Keyboard shortcuts\") before the code has arrived keeps `open`\n  // set; the overlay mounts open once it has loaded.\n  useEffect(() => {\n    if (!open || ShortcutsOverlay) return\n\n    let active = true\n\n    loadOverlay().then(\n      (component) => active && setOverlay(() => component),\n      () => active && setOpen(false),\n    )\n\n    return () => {\n      active = false\n    }\n  }, [open, ShortcutsOverlay])\n\n  if (!config || !ShortcutsOverlay) return null\n\n  return (\n    <ShortcutsOverlay\n      open={open}\n      onOpenChange={setOpen}\n      customizable={Boolean(config.customizable && panel.endpoints.shortcuts)}\n      endpoint={panel.endpoints.shortcuts}\n    />\n  )\n}\n"],"mappings":";;;;;;AAeA,IAAI;AACJ,IAAI;;AAGJ,SAAS,cAAyC;CAChD,mBAAmB,OAAO,yBAAsB,CAAC,MAC9C,WAAY,gBAAgB,OAAO,mBACnC,UAAmB;EAClB,iBAAiB,KAAA;EACjB,MAAM;CACR,CACF;CAEA,OAAO;AACT;;;;;;;AAQA,SAAgB,oBAAoB;CAClC,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,gBAAgB;CAC/B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,CAAC,kBAAkB,cAAc,eAA6C,aAAa;CACjG,MAAM,YAAY,KAAK,UAAU,SAAU,OAAO,aAAa,CAAC,IAAK,CAAC,CAAC;CACvE,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,WAAW,MAAM,gBAAgB;CACvC,MAAM,OAAO,MAAM;CAEnB,MAAM,eAAe,EAAE,0BAA0B,CAAC,GAAG,yBAAyB;CAC9E,MAAM,cAAc,EAAE,0BAA0B,CAAC,GAAG,kBAAkB;CACtE,MAAM,iBAAiB,EAAE,0BAA0B,CAAC,GAAG,qBAAqB;CAE5E,gBAAgB;EACd,UAAU,WAAW,WAAW,KAAK;EACrC,UAAU,aAAa,KAAK,MAAM,SAAS,CAA6B;CAC1E,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,gBAAgB;EACd,IAAI,CAAC,QAAQ;EAEb,MAAM,YAAY;GAChB,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,QAAQ,IAAI;GAC7B,CAAC;GAED,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,GAAG;IACV,OAAO;IACP,OAAO;IACP,eAAe,iBAAiB;GAClC,CAAC;GACD,GAAI,OACA,CACE,UAAU,SAAS;IACjB,IAAI,aAAa;IACjB,MAAM,CAAC,KAAK;IACZ,OAAO;IACP,OAAO;IACP,eAAe,OAAO,MAAM,IAAI;GAClC,CAAC,CACH,IACA,CAAC;GACL,IAAI,YAAY,CAAC,EAAA,CACd,QAAQ,YAA2B,QAAQ,aAAa,UAAU,CAAC,QAAQ,QAAQ,CAAC,CACpF,KAAK,YACJ,UAAU,SAAS;IACjB,IAAI,kBAAkB,QAAQ,IAAI;IAClC,MAAM,QAAQ,eAAe,CAAC;IAC9B,OAAO,QAAQ,SAAS,QAAQ;IAChC,OAAO,QAAQ,MAAM,eAAe;IACpC,eAAe,KAAK,OAAO,QAAQ,SAAS;KAAE;KAAO,WAAW;IAAmB,CAAC;GACtF,CAAC,CACH;EACJ;EAEA,aAAa,UAAU,SAAS,YAAY,QAAQ,CAAC;CACvD,GAAG;EAAC;EAAQ;EAAU;EAAM;EAAQ;EAAO;EAAc;EAAa;CAAc,CAAC;CAIrF,gBAAgB;EACd,IAAI,CAAC,QAAQ,kBAAkB;EAE/B,IAAI,SAAS;EAEb,YAAY,CAAC,CAAC,MACX,cAAc,UAAU,iBAAiB,SAAS,SAC7C,UAAU,QAAQ,KAAK,CAC/B;EAEA,aAAa;GACX,SAAS;EACX;CACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;CAE3B,IAAI,CAAC,UAAU,CAAC,kBAAkB,OAAO;CAEzC,OACE,oBAAC,kBAAD;EACQ;EACN,cAAc;EACd,cAAc,QAAQ,OAAO,gBAAgB,MAAM,UAAU,SAAS;EACtE,UAAU,MAAM,UAAU;CAC3B,CAAA;AAEL"}

package/dist/components/panel/lazy-placeholder.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/panel/lazy-placeholder.d.ts
+/**
+ * Stands in for a lazy widget or relation manager until the `alfakitLazy` deferred prop
+ * brings its schema. `table` mimics a table (relation managers, table widgets).
+ */
+export declare function LazyPlaceholder({ variant, className }: {
+  variant?: 'widget' | 'table';
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=lazy-placeholder.d.ts.map

package/dist/components/panel/lazy-placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-placeholder.d.ts","names":[],"sources":["../../../src/components/panel/lazy-placeholder.tsx"],"mappings":";;;;;wBAQgB,kBACd,SACA;EAEA;EACA;oBACD,IAAA"}

package/dist/components/panel/lazy-placeholder.js

@@ -0,0 +1,35 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/panel/lazy-placeholder.tsx
+/**
+* Stands in for a lazy widget or relation manager until the `alfakitLazy` deferred prop
+* brings its schema. `table` mimics a table (relation managers, table widgets).
+*/
+function LazyPlaceholder({ variant = "widget", className }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "lazy-placeholder",
+		"data-variant": variant,
+		role: "status",
+		"aria-busy": "true",
+		className: cn("bg-card flex flex-col gap-3 rounded-xl border p-6", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("loading", {}, "Loading…")
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/3" }),
+			variant === "table" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" })
+			] }) : /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
+		]
+	});
+}
+//#endregion
+export { LazyPlaceholder };
+
+//# sourceMappingURL=lazy-placeholder.js.map

package/dist/components/panel/lazy-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-placeholder.js","names":[],"sources":["../../../src/components/panel/lazy-placeholder.tsx"],"sourcesContent":["import { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\n/**\n * Stands in for a lazy widget or relation manager until the `alfakitLazy` deferred prop\n * brings its schema. `table` mimics a table (relation managers, table widgets).\n */\nexport function LazyPlaceholder({\n  variant = 'widget',\n  className,\n}: {\n  variant?: 'widget' | 'table'\n  className?: string\n}) {\n  const t = useT()\n\n  return (\n    <div\n      data-slot=\"lazy-placeholder\"\n      data-variant={variant}\n      role=\"status\"\n      aria-busy=\"true\"\n      className={cn('bg-card flex flex-col gap-3 rounded-xl border p-6', className)}\n    >\n      <span className=\"sr-only\">{t('loading', {}, 'Loading…')}</span>\n      <Skeleton className=\"h-5 w-1/3\" />\n      {variant === 'table' ? (\n        <>\n          <Skeleton className=\"h-9 w-full\" />\n          <Skeleton className=\"h-9 w-full\" />\n          <Skeleton className=\"h-9 w-full\" />\n        </>\n      ) : (\n        <Skeleton className=\"h-20 w-full\" />\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,gBAAgB,EAC9B,UAAU,UACV,aAIC;CACD,MAAM,IAAI,KAAK;CAEf,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,MAAK;EACL,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAL9E,UAAA;GAOE,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAE,WAAW,CAAC,GAAG,UAAU;GAAQ,CAAA;GAC9D,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;GAChC,YAAY,UACX,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;IAClC,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;IAClC,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;GAClC,EAAA,CAAA,IAEF,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA;EAElC;;AAET"}

package/dist/components/panel/locale-switcher.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/panel/locale-switcher.d.ts
+/**
+ * Stand-alone language menu: a languages button listing each language in its own name
+ * (auth pages, top bar). Renders nothing without a switcher.
+ */
+export declare function LocaleSwitcher(): import("react").JSX.Element | null;
+/**
+ * The top bars' language button (`languageSwitcher('topbar' | 'both')`): the registered
+ * `panel:language-switcher` component or the built-in menu. Below `sm` it moves into the
+ * user menu when there is one (`collapsesLanguageSwitcher()`).
+ */
+export declare function TopbarLocaleSwitcher(): import("react").JSX.Element | null;
+/**
+ * "Language" submenu for the user menu (`languageSwitcher('user-menu' | 'both')`, and
+ * below `sm` for `'topbar'`).
+ */
+export declare function LocaleSubMenu(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=locale-switcher.d.ts.map

package/dist/components/panel/locale-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-switcher.d.ts","names":[],"sources":["../../../src/components/panel/locale-switcher.tsx"],"mappings":";;;;;wBAqDgB,kCAAc,IAAA;;;;;;wBA0Cd,wCAAoB,IAAA;;;;;wBAwBpB,iCAAa,IAAA"}

package/dist/components/panel/locale-switcher.js

@@ -0,0 +1,113 @@
+import { useLocalization, useOptionalRegistry, usePanel, useT } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { collapsesLanguageSwitcher, showsLanguageSwitcher, switchLocale } from "@alfakit/core";
+import { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LanguagesIcon } from "lucide-react";
+//#region src/components/panel/locale-switcher.tsx
+function useSwitch() {
+	const panel = usePanel();
+	return (code) => {
+		if (panel.endpoints.locale && code !== panel.localization.code) switchLocale(panel.endpoints.locale, code);
+	};
+}
+function LocaleOptions() {
+	const localization = useLocalization();
+	const change = useSwitch();
+	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+		value: localization.code,
+		onValueChange: change,
+		children: localization.locales.map((locale) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+			value: locale.code,
+			lang: locale.tag,
+			"data-current": locale.code === localization.code ? "true" : void 0,
+			className: "data-[current=true]:font-medium",
+			children: /* @__PURE__ */ jsx("span", {
+				lang: locale.tag,
+				dir: locale.direction,
+				children: locale.label
+			})
+		}, locale.code))
+	});
+}
+/**
+* Stand-alone language menu: a languages button listing each language in its own name
+* (auth pages, top bar). Renders nothing without a switcher.
+*/
+function LocaleSwitcher() {
+	const t = useT();
+	const localization = useLocalization();
+	if (!showsLanguageSwitcher(localization, "auth")) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "language-switcher",
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"aria-label": t("change_language", {}, "Change language"),
+				title: t("change_language", {}, "Change language"),
+				children: /* @__PURE__ */ jsx(LanguagesIcon, {})
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			className: "min-w-40",
+			children: /* @__PURE__ */ jsx(LocaleOptions, {})
+		})] })
+	});
+}
+/** Whether the panel has a user menu that can hold the language entry on phones. */
+function useHasUserMenu() {
+	const panel = usePanel();
+	return Boolean(panel?.user && panel.userMenu);
+}
+/**
+* The top bars' language button (`languageSwitcher('topbar' | 'both')`): the registered
+* `panel:language-switcher` component or the built-in menu. Below `sm` it moves into the
+* user menu when there is one (`collapsesLanguageSwitcher()`).
+*/
+function TopbarLocaleSwitcher() {
+	const localization = usePanel()?.localization;
+	const registry = useOptionalRegistry();
+	const collapses = collapsesLanguageSwitcher(localization, useHasUserMenu());
+	if (!showsLanguageSwitcher(localization, "topbar")) return null;
+	const button = createElement(registry?.resolve("panel:language-switcher") ?? LocaleSwitcher);
+	return collapses ? /* @__PURE__ */ jsx("div", {
+		className: "hidden sm:contents",
+		"data-slot": "topbar-language",
+		children: button
+	}) : button;
+}
+/**
+* "Language" submenu for the user menu (`languageSwitcher('user-menu' | 'both')`, and
+* below `sm` for `'topbar'`).
+*/
+function LocaleSubMenu() {
+	const t = useT();
+	const localization = useLocalization();
+	const hasUserMenu = useHasUserMenu();
+	const inMenu = showsLanguageSwitcher(localization, "user-menu");
+	const onPhones = !inMenu && collapsesLanguageSwitcher(localization, hasUserMenu);
+	if (!inMenu && !onPhones) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+		className: onPhones ? "sm:hidden" : void 0,
+		children: [
+			/* @__PURE__ */ jsx(LanguagesIcon, {}),
+			/* @__PURE__ */ jsx("span", { children: t("language", {}, "Language") }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground ms-auto ps-2 text-xs",
+				children: localization.label
+			})
+		]
+	}), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+		className: "min-w-40",
+		children: /* @__PURE__ */ jsx(LocaleOptions, {})
+	})] });
+}
+//#endregion
+export { LocaleSubMenu, LocaleSwitcher, TopbarLocaleSwitcher };
+
+//# sourceMappingURL=locale-switcher.js.map

package/dist/components/panel/locale-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-switcher.js","names":[],"sources":["../../../src/components/panel/locale-switcher.tsx"],"sourcesContent":["import { collapsesLanguageSwitcher, showsLanguageSwitcher, switchLocale } from '@alfakit/core'\nimport { LanguagesIcon } from 'lucide-react'\nimport { createElement } from 'react'\nimport { useLocalization, useOptionalRegistry, usePanel, useT } from '../../context'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\n\nfunction useSwitch() {\n  const panel = usePanel()\n\n  return (code: string) => {\n    if (panel.endpoints.locale && code !== panel.localization.code) {\n      switchLocale(panel.endpoints.locale, code)\n    }\n  }\n}\n\nfunction LocaleOptions() {\n  const localization = useLocalization()\n  const change = useSwitch()\n\n  return (\n    <DropdownMenuRadioGroup value={localization.code} onValueChange={change}>\n      {localization.locales.map((locale) => (\n        <DropdownMenuRadioItem\n          key={locale.code}\n          value={locale.code}\n          lang={locale.tag}\n          data-current={locale.code === localization.code ? 'true' : undefined}\n          className=\"data-[current=true]:font-medium\"\n        >\n          <span lang={locale.tag} dir={locale.direction}>\n            {locale.label}\n          </span>\n        </DropdownMenuRadioItem>\n      ))}\n    </DropdownMenuRadioGroup>\n  )\n}\n\n/**\n * Stand-alone language menu: a languages button listing each language in its own name\n * (auth pages, top bar). Renders nothing without a switcher.\n */\nexport function LocaleSwitcher() {\n  const t = useT()\n  const localization = useLocalization()\n\n  if (!showsLanguageSwitcher(localization, 'auth')) {\n    return null\n  }\n\n  return (\n    <div data-slot=\"language-switcher\" className=\"flex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label={t('change_language', {}, 'Change language')}\n            title={t('change_language', {}, 'Change language')}\n          >\n            <LanguagesIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"min-w-40\">\n          <LocaleOptions />\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\n/** Whether the panel has a user menu that can hold the language entry on phones. */\nfunction useHasUserMenu(): boolean {\n  const panel = usePanel()\n\n  return Boolean(panel?.user && panel.userMenu)\n}\n\n/**\n * The top bars' language button (`languageSwitcher('topbar' | 'both')`): the registered\n * `panel:language-switcher` component or the built-in menu. Below `sm` it moves into the\n * user menu when there is one (`collapsesLanguageSwitcher()`).\n */\nexport function TopbarLocaleSwitcher() {\n  const localization = usePanel()?.localization\n  const registry = useOptionalRegistry()\n  const collapses = collapsesLanguageSwitcher(localization, useHasUserMenu())\n\n  if (!showsLanguageSwitcher(localization, 'topbar')) {\n    return null\n  }\n\n  const button = createElement(registry?.resolve('panel:language-switcher') ?? LocaleSwitcher)\n\n  return collapses ? (\n    <div className=\"hidden sm:contents\" data-slot=\"topbar-language\">\n      {button}\n    </div>\n  ) : (\n    button\n  )\n}\n\n/**\n * \"Language\" submenu for the user menu (`languageSwitcher('user-menu' | 'both')`, and\n * below `sm` for `'topbar'`).\n */\nexport function LocaleSubMenu() {\n  const t = useT()\n  const localization = useLocalization()\n  const hasUserMenu = useHasUserMenu()\n  const inMenu = showsLanguageSwitcher(localization, 'user-menu')\n  // `languageSwitcher('topbar')`: the top bar's button is hidden on phones, so it's here.\n  const onPhones = !inMenu && collapsesLanguageSwitcher(localization, hasUserMenu)\n\n  if (!inMenu && !onPhones) {\n    return null\n  }\n\n  return (\n    <DropdownMenuSub>\n      <DropdownMenuSubTrigger className={onPhones ? 'sm:hidden' : undefined}>\n        <LanguagesIcon />\n        <span>{t('language', {}, 'Language')}</span>\n        <span className=\"text-muted-foreground ms-auto ps-2 text-xs\">{localization.label}</span>\n      </DropdownMenuSubTrigger>\n      <DropdownMenuSubContent className=\"min-w-40\">\n        <LocaleOptions />\n      </DropdownMenuSubContent>\n    </DropdownMenuSub>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,SAAS,YAAY;CACnB,MAAM,QAAQ,SAAS;CAEvB,QAAQ,SAAiB;EACvB,IAAI,MAAM,UAAU,UAAU,SAAS,MAAM,aAAa,MACxD,aAAa,MAAM,UAAU,QAAQ,IAAI;CAE7C;AACF;AAEA,SAAS,gBAAgB;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,wBAAD;EAAwB,OAAO,aAAa;EAAM,eAAe;EAC9D,UAAA,aAAa,QAAQ,KAAK,WACzB,oBAAC,uBAAD;GAEE,OAAO,OAAO;GACd,MAAM,OAAO;GACb,gBAAc,OAAO,SAAS,aAAa,OAAO,SAAS,KAAA;GAC3D,WAAU;GAEV,UAAA,oBAAC,QAAD;IAAM,MAAM,OAAO;IAAK,KAAK,OAAO;IACjC,UAAA,OAAO;GACJ,CAAA;EACe,GAThB,OAAO,IASS,CACxB;CACqB,CAAA;AAE5B;;;;;AAMA,SAAgB,iBAAiB;CAC/B,MAAM,IAAI,KAAK;CACf,MAAM,eAAe,gBAAgB;CAErC,IAAI,CAAC,sBAAsB,cAAc,MAAM,GAC7C,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,aAAU;EAAoB,WAAU;EAC3C,UAAA,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;GAAqB,SAAA;GACnB,UAAA,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,cAAY,EAAE,mBAAmB,CAAC,GAAG,iBAAiB;IACtD,OAAO,EAAE,mBAAmB,CAAC,GAAG,iBAAiB;IAEjD,UAAA,oBAAC,eAAD,CAAgB,CAAA;GACV,CAAA;EACW,CAAA,GACrB,oBAAC,qBAAD;GAAqB,OAAM;GAAM,WAAU;GACzC,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACG,CAAA,CACT,EAAA,CAAA;CACX,CAAA;AAET;;AAGA,SAAS,iBAA0B;CACjC,MAAM,QAAQ,SAAS;CAEvB,OAAO,QAAQ,OAAO,QAAQ,MAAM,QAAQ;AAC9C;;;;;;AAOA,SAAgB,uBAAuB;CACrC,MAAM,eAAe,SAAS,CAAC,EAAE;CACjC,MAAM,WAAW,oBAAoB;CACrC,MAAM,YAAY,0BAA0B,cAAc,eAAe,CAAC;CAE1E,IAAI,CAAC,sBAAsB,cAAc,QAAQ,GAC/C,OAAO;CAGT,MAAM,SAAS,cAAc,UAAU,QAAQ,yBAAyB,KAAK,cAAc;CAE3F,OAAO,YACL,oBAAC,OAAD;EAAK,WAAU;EAAqB,aAAU;EAC3C,UAAA;CACE,CAAA,IAEL;AAEJ;;;;;AAMA,SAAgB,gBAAgB;CAC9B,MAAM,IAAI,KAAK;CACf,MAAM,eAAe,gBAAgB;CACrC,MAAM,cAAc,eAAe;CACnC,MAAM,SAAS,sBAAsB,cAAc,WAAW;CAE9D,MAAM,WAAW,CAAC,UAAU,0BAA0B,cAAc,WAAW;CAE/E,IAAI,CAAC,UAAU,CAAC,UACd,OAAO;CAGT,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,qBAAC,wBAAD;EAAwB,WAAW,WAAW,cAAc,KAAA;EAA5D,UAAA;GACE,oBAAC,eAAD,CAAgB,CAAA;GAChB,oBAAC,QAAD,EAAA,UAAO,EAAE,YAAY,CAAC,GAAG,UAAU,EAAQ,CAAA;GAC3C,oBAAC,QAAD;IAAM,WAAU;IAA8C,UAAA,aAAa;GAAY,CAAA;EACjE;CACxB,CAAA,GAAA,oBAAC,wBAAD;EAAwB,WAAU;EAChC,UAAA,oBAAC,eAAD,CAAgB,CAAA;CACM,CAAA,CACT,EAAA,CAAA;AAErB"}

package/dist/components/panel/menu-item.js

@@ -0,0 +1,65 @@
+import { useActionRunner, usePageSchema } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { DropdownMenuItem, DropdownMenuSeparator } from "../ui/dropdown-menu.js";
+import { NewTabHint } from "../../lib/new-tab-hint.js";
+import { groupMenuItems, menuActionContext } from "@alfakit/core";
+import { Link, router } from "@inertiajs/react";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/panel/menu-item.tsx
+/**
+* An entry in the user or tenant menu: colour, icon, new tab and POST links, or an
+* `Action` (server logic, modals) run through the action endpoint as a menu action.
+*/
+function MenuItemEntry({ item, menu = "userMenu" }) {
+	const runner = useActionRunner();
+	const page = usePageSchema();
+	const color = item.color ? colorClass(textColorClasses, item.color, item.color) : void 0;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon && /* @__PURE__ */ jsx(Icon, {
+		name: item.icon,
+		className: cn(color)
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn(color),
+		children: item.label
+	})] });
+	if (item.action) {
+		const action = item.action;
+		return /* @__PURE__ */ jsx(DropdownMenuItem, {
+			disabled: action.disabled,
+			title: action.tooltip,
+			onSelect: () => void runner.trigger(action, menuActionContext(page?.token ?? "", menu)),
+			children: content
+		});
+	}
+	if (item.method === "post") return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		onSelect: () => item.url && router.post(item.url),
+		children: content
+	});
+	return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		asChild: true,
+		children: item.openInNewTab ? /* @__PURE__ */ jsxs("a", {
+			href: item.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "w-full",
+			children: [content, /* @__PURE__ */ jsx(NewTabHint, {})]
+		}) : /* @__PURE__ */ jsx(Link, {
+			href: item.url ?? "#",
+			className: "w-full",
+			children: content
+		})
+	});
+}
+/** Menu entries with a separator between their groups. */
+function MenuItemEntries({ items, menu }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: groupMenuItems(items).map((group, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), group.map((item, index) => /* @__PURE__ */ jsx(MenuItemEntry, {
+		item,
+		menu
+	}, index))] }, groupIndex)) });
+}
+//#endregion
+export { MenuItemEntries, MenuItemEntry };
+
+//# sourceMappingURL=menu-item.js.map

package/dist/components/panel/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../src/components/panel/menu-item.tsx"],"sourcesContent":["import type { MenuItemSchema } from '@alfakit/core'\nimport { groupMenuItems, menuActionContext } from '@alfakit/core'\nimport { Link, router } from '@inertiajs/react'\nimport { Fragment } from 'react'\nimport { useActionRunner, usePageSchema } from '../../context'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { DropdownMenuItem, DropdownMenuSeparator } from '../ui/dropdown-menu'\n\nexport type MenuName = 'userMenu' | 'tenantMenu'\n\n/**\n * An entry in the user or tenant menu: colour, icon, new tab and POST links, or an\n * `Action` (server logic, modals) run through the action endpoint as a menu action.\n */\nexport function MenuItemEntry({\n  item,\n  menu = 'userMenu',\n}: {\n  item: MenuItemSchema\n  menu?: MenuName\n}) {\n  const runner = useActionRunner()\n  const page = usePageSchema()\n  // Unknown values get no class (custom names get theirs).\n  const color = item.color ? colorClass(textColorClasses, item.color, item.color) : undefined\n\n  const content = (\n    <>\n      {item.icon && <Icon name={item.icon} className={cn(color)} />}\n      <span className={cn(color)}>{item.label}</span>\n    </>\n  )\n\n  if (item.action) {\n    const action = item.action\n\n    return (\n      <DropdownMenuItem\n        disabled={action.disabled}\n        title={action.tooltip}\n        onSelect={() => void runner.trigger(action, menuActionContext(page?.token ?? '', menu))}\n      >\n        {content}\n      </DropdownMenuItem>\n    )\n  }\n\n  if (item.method === 'post') {\n    return (\n      <DropdownMenuItem onSelect={() => item.url && router.post(item.url)}>\n        {content}\n      </DropdownMenuItem>\n    )\n  }\n\n  return (\n    <DropdownMenuItem asChild>\n      {item.openInNewTab ? (\n        <a href={item.url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"w-full\">\n          {content}\n          <NewTabHint />\n        </a>\n      ) : (\n        <Link href={item.url ?? '#'} className=\"w-full\">\n          {content}\n        </Link>\n      )}\n    </DropdownMenuItem>\n  )\n}\n\n/** Menu entries with a separator between their groups. */\nexport function MenuItemEntries({ items, menu }: { items: MenuItemSchema[]; menu?: MenuName }) {\n  return (\n    <>\n      {groupMenuItems(items).map((group, groupIndex) => (\n        <Fragment key={groupIndex}>\n          {groupIndex > 0 && <DropdownMenuSeparator />}\n          {group.map((item, index) => (\n            <MenuItemEntry key={index} item={item} menu={menu} />\n          ))}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,cAAc,EAC5B,MACA,OAAO,cAIN;CACD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,OAAO,cAAc;CAE3B,MAAM,QAAQ,KAAK,QAAQ,WAAW,kBAAkB,KAAK,OAAO,KAAK,KAAK,IAAI,KAAA;CAElF,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACG,KAAK,QAAQ,oBAAC,MAAD;EAAM,MAAM,KAAK;EAAM,WAAW,GAAG,KAAK;CAAI,CAAA,GAC5D,oBAAC,QAAD;EAAM,WAAW,GAAG,KAAK;EAAI,UAAA,KAAK;CAAY,CAAA,CAC9C,EAAA,CAAA;CAGJ,IAAI,KAAK,QAAQ;EACf,MAAM,SAAS,KAAK;EAEpB,OACE,oBAAC,kBAAD;GACE,UAAU,OAAO;GACjB,OAAO,OAAO;GACd,gBAAgB,KAAK,OAAO,QAAQ,QAAQ,kBAAkB,MAAM,SAAS,IAAI,IAAI,CAAC;GAErF,UAAA;EACe,CAAA;CAEtB;CAEA,IAAI,KAAK,WAAW,QAClB,OACE,oBAAC,kBAAD;EAAkB,gBAAgB,KAAK,OAAO,OAAO,KAAK,KAAK,GAAG;EAC/D,UAAA;CACe,CAAA;CAItB,OACE,oBAAC,kBAAD;EAAkB,SAAA;EACf,UAAA,KAAK,eACJ,qBAAC,KAAD;GAAG,MAAM,KAAK;GAAK,QAAO;GAAS,KAAI;GAAsB,WAAU;GAAvE,UAAA,CACG,SACD,oBAAC,YAAD,CAAa,CAAA,CACZ;EAEH,CAAA,IAAA,oBAAC,MAAD;GAAM,MAAM,KAAK,OAAO;GAAK,WAAU;GACpC,UAAA;EACG,CAAA;CAEQ,CAAA;AAEtB;;AAGA,SAAgB,gBAAgB,EAAE,OAAO,QAAsD;CAC7F,OACE,oBAAA,YAAA,EAAA,UACG,eAAe,KAAK,CAAC,CAAC,KAAK,OAAO,eACjC,qBAAC,UAAD,EAAA,UAAA,CACG,aAAa,KAAK,oBAAC,uBAAD,CAAwB,CAAA,GAC1C,MAAM,KAAK,MAAM,UAChB,oBAAC,eAAD;EAAiC;EAAY;CAAO,GAAhC,KAAgC,CACrD,CACO,EAAA,GALK,UAKL,CACX,EACD,CAAA;AAEN"}

package/dist/components/panel/nav-label.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/panel/nav-label.tsx
+/**
+* A navigation item's label: text, or the sanitised HTML of an `Htmlable` label
+* (`labelHtml`, sanitised on the server like other HTML in the schema).
+*/
+function NavLabel({ item, className }) {
+	return item.labelHtml ? /* @__PURE__ */ jsx("span", {
+		className,
+		dangerouslySetInnerHTML: { __html: item.label }
+	}) : /* @__PURE__ */ jsx("span", {
+		className,
+		children: item.label
+	});
+}
+/** A tenant's name: text, or the sanitised HTML of an `Htmlable` name (`nameHtml`). */
+function TenantName({ tenant, className }) {
+	return tenant.nameHtml ? /* @__PURE__ */ jsx("span", {
+		className,
+		dangerouslySetInnerHTML: { __html: tenant.name }
+	}) : /* @__PURE__ */ jsx("span", {
+		className,
+		children: tenant.name
+	});
+}
+//#endregion
+export { NavLabel, TenantName };
+
+//# sourceMappingURL=nav-label.js.map

package/dist/components/panel/nav-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-label.js","names":[],"sources":["../../../src/components/panel/nav-label.tsx"],"sourcesContent":["import type { NavigationItemSchema } from '@alfakit/core'\n\n/**\n * A navigation item's label: text, or the sanitised HTML of an `Htmlable` label\n * (`labelHtml`, sanitised on the server like other HTML in the schema).\n */\nexport function NavLabel({\n  item,\n  className,\n}: {\n  item: Pick<NavigationItemSchema, 'label' | 'labelHtml'>\n  className?: string\n}) {\n  return item.labelHtml ? (\n    <span className={className} dangerouslySetInnerHTML={{ __html: item.label }} />\n  ) : (\n    <span className={className}>{item.label}</span>\n  )\n}\n\n/** A tenant's name: text, or the sanitised HTML of an `Htmlable` name (`nameHtml`). */\nexport function TenantName({\n  tenant,\n  className,\n}: {\n  tenant: { name: string; nameHtml?: boolean }\n  className?: string\n}) {\n  return tenant.nameHtml ? (\n    <span className={className} dangerouslySetInnerHTML={{ __html: tenant.name }} />\n  ) : (\n    <span className={className}>{tenant.name}</span>\n  )\n}\n"],"mappings":";;;;;;AAMA,SAAgB,SAAS,EACvB,MACA,aAIC;CACD,OAAO,KAAK,YACV,oBAAC,QAAD;EAAiB;EAAW,yBAAyB,EAAE,QAAQ,KAAK,MAAM;CAAI,CAAA,IAE9E,oBAAC,QAAD;EAAiB;EAAY,UAAA,KAAK;CAAY,CAAA;AAElD;;AAGA,SAAgB,WAAW,EACzB,QACA,aAIC;CACD,OAAO,OAAO,WACZ,oBAAC,QAAD;EAAiB;EAAW,yBAAyB,EAAE,QAAQ,OAAO,KAAK;CAAI,CAAA,IAE/E,oBAAC,QAAD;EAAiB;EAAY,UAAA,OAAO;CAAW,CAAA;AAEnD"}

package/dist/components/panel/pwa.d.ts

@@ -0,0 +1,13 @@
+import { Translator } from "@alfakit/core";
+//#region src/components/panel/pwa.d.ts
+/** Show the browser's install prompt, or the "Add to Home Screen" hint on iOS Safari. */
+export declare function installPwa(t: Translator['t']): Promise<void>;
+/**
+ * `Panel::pwa()`: registers the service worker and offers "Reload" when a new version
+ * waits. Renders nothing; does nothing without `pwa` or during a server render.
+ */
+export declare function PwaManager(): null;
+/** User menu entries: "Install app" and turning Web Push on or off for this browser. */
+export declare function PwaMenuItems(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=pwa.d.ts.map

package/dist/components/panel/pwa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pwa.d.ts","names":[],"sources":["../../../src/components/panel/pwa.tsx"],"mappings":";;;wBAqBsB,WAAW,GAAG,kBAAkB;;;;;wBAiBtC;;wBAwBA,gCAAY,IAAA"}

package/dist/components/panel/pwa.js

@@ -0,0 +1,90 @@
+import { usePanel, useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { useStore } from "../../hooks/use-store.js";
+import { applyPwaUpdate, canInstallPwa, promptPwaInstall, pwaStore, startPwa, subscribeToPush, unsubscribeFromPush } from "@alfakit/core";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BellIcon, BellOffIcon, DownloadIcon } from "lucide-react";
+import { toast } from "sonner";
+//#region src/components/panel/pwa.tsx
+const UPDATE_TOAST_ID = "alfakit-pwa-update";
+/** Show the browser's install prompt, or the "Add to Home Screen" hint on iOS Safari. */
+async function installPwa(t) {
+	if (await promptPwaInstall() === "ios") toast.info(t("pwa.ios_hint", {}, "To install this app, tap the Share button and then “Add to Home Screen”."), { duration: 1e4 });
+}
+/**
+* `Panel::pwa()`: registers the service worker and offers "Reload" when a new version
+* waits. Renders nothing; does nothing without `pwa` or during a server render.
+*/
+function PwaManager() {
+	const panel = usePanel();
+	const t = useT();
+	const pwa = panel?.pwa;
+	const { updateAvailable } = useStore(pwaStore);
+	useEffect(() => {
+		startPwa(pwa);
+	}, [pwa]);
+	useEffect(() => {
+		if (!updateAvailable) return;
+		toast(t("pwa.update_available", {}, "A new version is available"), {
+			id: UPDATE_TOAST_ID,
+			duration: Infinity,
+			action: {
+				label: t("pwa.reload", {}, "Reload"),
+				onClick: () => applyPwaUpdate()
+			}
+		});
+	}, [updateAvailable, t]);
+	return null;
+}
+/** User menu entries: "Install app" and turning Web Push on or off for this browser. */
+function PwaMenuItems() {
+	const panel = usePanel();
+	const t = useT();
+	const state = useStore(pwaStore);
+	if (!panel?.pwa) return null;
+	const push = panel.pwa.push && state.push !== "unsupported";
+	const togglePush = async () => {
+		const outcome = state.push === "subscribed" ? await unsubscribeFromPush() : await subscribeToPush();
+		if (outcome === "subscribed") toast.success(t("pwa.notifications.enabled", {}, "Notifications are on for this device"));
+		else if (outcome === "unsubscribed") toast.success(t("pwa.notifications.disabled", {}, "Notifications are off for this device"));
+		else if (outcome === "denied") toast.error(t("pwa.notifications.blocked", {}, "Notifications are blocked in your browser settings"));
+		else toast.error(t("pwa.notifications.failed", {}, "Couldn’t change notifications. Try again."));
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [canInstallPwa(state) && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		"data-slot": "pwa-install",
+		onSelect: () => void installPwa(t),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.user-menu.install-app-item",
+				fallback: DownloadIcon
+			}),
+			" ",
+			t("pwa.install", {}, "Install app")
+		]
+	}), push && /* @__PURE__ */ jsx(DropdownMenuItem, {
+		"data-slot": "pwa-push",
+		disabled: state.pushBusy || state.push === "denied",
+		onSelect: () => void togglePush(),
+		children: state.push === "subscribed" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.user-menu.push-off-item",
+				fallback: BellOffIcon
+			}),
+			" ",
+			t("pwa.notifications.disable", {}, "Turn off notifications")
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.user-menu.push-on-item",
+				fallback: BellIcon
+			}),
+			" ",
+			t("pwa.notifications.enable", {}, "Turn on notifications")
+		] })
+	})] });
+}
+//#endregion
+export { PwaManager, PwaMenuItems, installPwa };
+
+//# sourceMappingURL=pwa.js.map

package/dist/components/panel/pwa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pwa.js","names":[],"sources":["../../../src/components/panel/pwa.tsx"],"sourcesContent":["import {\n  applyPwaUpdate,\n  canInstallPwa,\n  promptPwaInstall,\n  pwaStore,\n  startPwa,\n  subscribeToPush,\n  unsubscribeFromPush,\n  type Translator,\n} from '@alfakit/core'\nimport { BellIcon, BellOffIcon, DownloadIcon } from 'lucide-react'\nimport { useEffect } from 'react'\nimport { toast } from 'sonner'\nimport { usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { DropdownMenuItem } from '../ui/dropdown-menu'\n\nconst UPDATE_TOAST_ID = 'alfakit-pwa-update'\n\n/** Show the browser's install prompt, or the \"Add to Home Screen\" hint on iOS Safari. */\nexport async function installPwa(t: Translator['t']): Promise<void> {\n  if ((await promptPwaInstall()) === 'ios') {\n    toast.info(\n      t(\n        'pwa.ios_hint',\n        {},\n        'To install this app, tap the Share button and then “Add to Home Screen”.',\n      ),\n      { duration: 10000 },\n    )\n  }\n}\n\n/**\n * `Panel::pwa()`: registers the service worker and offers \"Reload\" when a new version\n * waits. Renders nothing; does nothing without `pwa` or during a server render.\n */\nexport function PwaManager() {\n  const panel = usePanel()\n  const t = useT()\n  const pwa = panel?.pwa\n  const { updateAvailable } = useStore(pwaStore)\n\n  useEffect(() => {\n    startPwa(pwa)\n  }, [pwa])\n\n  useEffect(() => {\n    if (!updateAvailable) return\n\n    toast(t('pwa.update_available', {}, 'A new version is available'), {\n      id: UPDATE_TOAST_ID,\n      duration: Infinity,\n      action: { label: t('pwa.reload', {}, 'Reload'), onClick: () => applyPwaUpdate() },\n    })\n  }, [updateAvailable, t])\n\n  return null\n}\n\n/** User menu entries: \"Install app\" and turning Web Push on or off for this browser. */\nexport function PwaMenuItems() {\n  const panel = usePanel()\n  const t = useT()\n  const state = useStore(pwaStore)\n\n  if (!panel?.pwa) return null\n\n  const push = panel.pwa.push && state.push !== 'unsupported'\n\n  const togglePush = async () => {\n    const outcome =\n      state.push === 'subscribed' ? await unsubscribeFromPush() : await subscribeToPush()\n\n    if (outcome === 'subscribed') {\n      toast.success(t('pwa.notifications.enabled', {}, 'Notifications are on for this device'))\n    } else if (outcome === 'unsubscribed') {\n      toast.success(t('pwa.notifications.disabled', {}, 'Notifications are off for this device'))\n    } else if (outcome === 'denied') {\n      toast.error(\n        t('pwa.notifications.blocked', {}, 'Notifications are blocked in your browser settings'),\n      )\n    } else {\n      toast.error(t('pwa.notifications.failed', {}, 'Couldn’t change notifications. Try again.'))\n    }\n  }\n\n  return (\n    <>\n      {canInstallPwa(state) && (\n        <DropdownMenuItem data-slot=\"pwa-install\" onSelect={() => void installPwa(t)}>\n          <Icon name=\"alfakit::panels.user-menu.install-app-item\" fallback={DownloadIcon} />{' '}\n          {t('pwa.install', {}, 'Install app')}\n        </DropdownMenuItem>\n      )}\n      {push && (\n        <DropdownMenuItem\n          data-slot=\"pwa-push\"\n          disabled={state.pushBusy || state.push === 'denied'}\n          onSelect={() => void togglePush()}\n        >\n          {state.push === 'subscribed' ? (\n            <>\n              <Icon name=\"alfakit::panels.user-menu.push-off-item\" fallback={BellOffIcon} />{' '}\n              {t('pwa.notifications.disable', {}, 'Turn off notifications')}\n            </>\n          ) : (\n            <>\n              <Icon name=\"alfakit::panels.user-menu.push-on-item\" fallback={BellIcon} />{' '}\n              {t('pwa.notifications.enable', {}, 'Turn on notifications')}\n            </>\n          )}\n        </DropdownMenuItem>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,kBAAkB;;AAGxB,eAAsB,WAAW,GAAmC;CAClE,IAAK,MAAM,iBAAiB,MAAO,OACjC,MAAM,KACJ,EACE,gBACA,CAAC,GACD,0EACF,GACA,EAAE,UAAU,IAAM,CACpB;AAEJ;;;;;AAMA,SAAgB,aAAa;CAC3B,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,MAAM,OAAO;CACnB,MAAM,EAAE,oBAAoB,SAAS,QAAQ;CAE7C,gBAAgB;EACd,SAAS,GAAG;CACd,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,IAAI,CAAC,iBAAiB;EAEtB,MAAM,EAAE,wBAAwB,CAAC,GAAG,4BAA4B,GAAG;GACjE,IAAI;GACJ,UAAU;GACV,QAAQ;IAAE,OAAO,EAAE,cAAc,CAAC,GAAG,QAAQ;IAAG,eAAe,eAAe;GAAE;EAClF,CAAC;CACH,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAEvB,OAAO;AACT;;AAGA,SAAgB,eAAe;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS,QAAQ;CAE/B,IAAI,CAAC,OAAO,KAAK,OAAO;CAExB,MAAM,OAAO,MAAM,IAAI,QAAQ,MAAM,SAAS;CAE9C,MAAM,aAAa,YAAY;EAC7B,MAAM,UACJ,MAAM,SAAS,eAAe,MAAM,oBAAoB,IAAI,MAAM,gBAAgB;EAEpF,IAAI,YAAY,cACd,MAAM,QAAQ,EAAE,6BAA6B,CAAC,GAAG,sCAAsC,CAAC;OACnF,IAAI,YAAY,gBACrB,MAAM,QAAQ,EAAE,8BAA8B,CAAC,GAAG,uCAAuC,CAAC;OACrF,IAAI,YAAY,UACrB,MAAM,MACJ,EAAE,6BAA6B,CAAC,GAAG,oDAAoD,CACzF;OAEA,MAAM,MAAM,EAAE,4BAA4B,CAAC,GAAG,2CAA2C,CAAC;CAE9F;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,cAAc,KAAK,KAClB,qBAAC,kBAAD;EAAkB,aAAU;EAAc,gBAAgB,KAAK,WAAW,CAAC;EAA3E,UAAA;GACE,oBAAC,MAAD;IAAM,MAAK;IAA6C,UAAU;GAAe,CAAA;GAAE;GAClF,EAAE,eAAe,CAAC,GAAG,aAAa;EACnB;CAEnB,CAAA,GAAA,QACC,oBAAC,kBAAD;EACE,aAAU;EACV,UAAU,MAAM,YAAY,MAAM,SAAS;EAC3C,gBAAgB,KAAK,WAAW;EAE/B,UAAA,MAAM,SAAS,eACd,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,MAAD;IAAM,MAAK;IAA0C,UAAU;GAAc,CAAA;GAAE;GAC9E,EAAE,6BAA6B,CAAC,GAAG,wBAAwB;EAC5D,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,MAAD;IAAM,MAAK;IAAyC,UAAU;GAAW,CAAA;GAAE;GAC1E,EAAE,4BAA4B,CAAC,GAAG,uBAAuB;EAC1D,EAAA,CAAA;CAEY,CAAA,CAEpB,EAAA,CAAA;AAEN"}

package/dist/components/panel/schema-contract-guard.js

@@ -0,0 +1,44 @@
+import { useT } from "../../context.js";
+import { checkSchemaContract, reportSchemaContractMismatch } from "@alfakit/core";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/panel/schema-contract-guard.tsx
+/**
+* Renders its children only when the page's schema contract (`alfakit.schemaContract`) has
+* the major version this frontend understands; otherwise a translated message replaces the
+* page and the mismatch is logged once, naming both versions.
+*/
+function SchemaContractGuard({ panel, children }) {
+	const check = checkSchemaContract(panel?.schemaContract);
+	useEffect(() => {
+		reportSchemaContractMismatch(check);
+	}, [
+		check.compatible,
+		check.server,
+		check.client
+	]);
+	if (check.compatible) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(SchemaContractMismatch, { check });
+}
+function SchemaContractMismatch({ check }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		"data-slot": "schema-contract-mismatch",
+		className: "bg-background text-foreground mx-auto flex min-h-svh w-full max-w-lg flex-col items-center justify-center gap-2 p-6 text-center",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-lg font-semibold",
+			children: t("schema_contract.title")
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: t("schema_contract.body", {
+				server: check.server ?? "?",
+				client: check.client
+			})
+		})]
+	});
+}
+//#endregion
+export { SchemaContractGuard, SchemaContractMismatch };
+
+//# sourceMappingURL=schema-contract-guard.js.map

package/dist/components/panel/schema-contract-guard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-contract-guard.js","names":[],"sources":["../../../src/components/panel/schema-contract-guard.tsx"],"sourcesContent":["import {\n  checkSchemaContract,\n  reportSchemaContractMismatch,\n  type PanelSchema,\n  type SchemaContractCheck,\n} from '@alfakit/core'\nimport { useEffect, type ReactNode } from 'react'\nimport { useT } from '../../context'\n\n/**\n * Renders its children only when the page's schema contract (`alfakit.schemaContract`) has\n * the major version this frontend understands; otherwise a translated message replaces the\n * page and the mismatch is logged once, naming both versions.\n */\nexport function SchemaContractGuard({\n  panel,\n  children,\n}: {\n  panel: PanelSchema | undefined\n  children: ReactNode\n}) {\n  const check = checkSchemaContract(panel?.schemaContract)\n\n  useEffect(() => {\n    reportSchemaContractMismatch(check)\n  }, [check.compatible, check.server, check.client]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (check.compatible) {\n    return <>{children}</>\n  }\n\n  return <SchemaContractMismatch check={check} />\n}\n\nexport function SchemaContractMismatch({ check }: { check: SchemaContractCheck }) {\n  const t = useT()\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"schema-contract-mismatch\"\n      className=\"bg-background text-foreground mx-auto flex min-h-svh w-full max-w-lg flex-col items-center justify-center gap-2 p-6 text-center\"\n    >\n      <h1 className=\"text-lg font-semibold\">{t('schema_contract.title')}</h1>\n      <p className=\"text-muted-foreground text-sm\">\n        {t('schema_contract.body', { server: check.server ?? '?', client: check.client })}\n      </p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,oBAAoB,EAClC,OACA,YAIC;CACD,MAAM,QAAQ,oBAAoB,OAAO,cAAc;CAEvD,gBAAgB;EACd,6BAA6B,KAAK;CACpC,GAAG;EAAC,MAAM;EAAY,MAAM;EAAQ,MAAM;CAAM,CAAC;CAEjD,IAAI,MAAM,YACR,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,OAAO,oBAAC,wBAAD,EAA+B,MAAQ,CAAA;AAChD;AAEA,SAAgB,uBAAuB,EAAE,SAAyC;CAChF,MAAM,IAAI,KAAK;CAEf,OACE,qBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAU;EAHZ,UAAA,CAKE,oBAAC,MAAD;GAAI,WAAU;GAAyB,UAAA,EAAE,uBAAuB;EAAM,CAAA,GACtE,oBAAC,KAAD;GAAG,WAAU;GACV,UAAA,EAAE,wBAAwB;IAAE,QAAQ,MAAM,UAAU;IAAK,QAAQ,MAAM;GAAO,CAAC;EAC/E,CAAA,CACA;;AAET"}

package/dist/components/panel/shortcut-keys.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/panel/shortcut-keys.d.ts
+/**
+ * A key binding as `<kbd>` keys (`G` then `D`, `⌘K`). The keys depend on the visitor's
+ * platform (⌘ or Ctrl), so they render after hydration.
+ */
+export declare function ShortcutKeys({ binding, className }: {
+  binding: string;
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=shortcut-keys.d.ts.map