@alfakit/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,172 @@
+import { AlfakitProvider, StandaloneProvider, useT } from "../context.js";
+import { Icon } from "../lib/icons.js";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/ui/dropdown-menu.js";
+import { TooltipProvider } from "../components/ui/tooltip.js";
+import { TenantName } from "../components/panel/nav-label.js";
+import { Avatar as Avatar$1, AvatarFallback, AvatarImage } from "../components/ui/avatar.js";
+import { NotificationsMenu } from "../components/notifications/notifications-menu.js";
+import { GlobalSearch } from "../components/panel/global-search.js";
+import { TenantMenu } from "../components/panel/tenant-menu.js";
+import { RealtimeNotifications } from "../components/notifications/realtime-notifications.js";
+import { NotificationsTrigger, SearchTrigger, TenantSwitcherTrigger } from "./widgets-triggers.js";
+import { ActionRunner, ComponentRegistry, Translator, initials, isAlfakitPage, loadStarterKitPanel, loadedStarterKitPanel, openRequestedStarterKitSearch, starterKitWidgetsPage, starterKitWidgetsPanel, tenantNameText } from "@alfakit/core";
+import { router, usePage } from "@inertiajs/react";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Direction } from "radix-ui";
+import { ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+//#region src/starter-kit/widgets-loaded.tsx
+/**
+* The loaded header components of starter kit mode: the panel's own search palette,
+* notifications menu and tenant menu, rendered outside Alfakit pages with the panel data
+* from `widgets.endpoint`. This module only loads in the browser.
+*/
+let widgetsContext = null;
+function useWidgetsContext(panel) {
+	widgetsContext ??= {
+		registry: new ComponentRegistry(),
+		pages: {},
+		translator: new Translator(),
+		actions: new ActionRunner({ endpoints: {
+			action: "",
+			modal: ""
+		} })
+	};
+	widgetsContext.translator.setTranslations(panel.translations ?? {});
+	widgetsContext.translator.setLocale(panel.localization?.tag ?? "en");
+	return widgetsContext;
+}
+/** The panel the components render with, once its data has loaded (null until then). */
+function useWidgetsPanel(source) {
+	const endpoint = source.widgets.endpoint;
+	const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint));
+	const base = loadedStarterKitPanel(endpoint) ?? loaded;
+	useEffect(() => {
+		let active = true;
+		loadStarterKitPanel(endpoint).then((panel) => active && setLoaded(panel), () => {});
+		return () => {
+			active = false;
+		};
+	}, [endpoint]);
+	const { navigation, widgets } = source;
+	return useMemo(() => base ? starterKitWidgetsPanel(base, {
+		navigation,
+		widgets
+	}) : null, [
+		base,
+		navigation,
+		widgets
+	]);
+}
+function WidgetShell({ panel, children }) {
+	const context = useWidgetsContext(panel);
+	const page = useMemo(() => starterKitWidgetsPage(), []);
+	return /* @__PURE__ */ jsx(AlfakitProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(StandaloneProvider, {
+			value: {
+				panel,
+				page
+			},
+			children: /* @__PURE__ */ jsx(Direction.Provider, {
+				dir: panel.localization?.direction ?? "ltr",
+				children: /* @__PURE__ */ jsx(TooltipProvider, {
+					delayDuration: 0,
+					children
+				})
+			})
+		})
+	});
+}
+/** The panel's command palette and global search. */
+function LoadedSearch({ source }) {
+	const panel = useWidgetsPanel(source);
+	useEffect(() => {
+		if (panel) openRequestedStarterKitSearch();
+	}, [panel]);
+	if (!panel) return /* @__PURE__ */ jsx(SearchTrigger, { source });
+	return /* @__PURE__ */ jsx(WidgetShell, {
+		panel,
+		children: /* @__PURE__ */ jsx(GlobalSearch, {})
+	});
+}
+/** The notifications bell, with realtime notifications on the host's own pages. */
+function LoadedNotifications({ source }) {
+	const panel = useWidgetsPanel(source);
+	const alfakitPage = isAlfakitPage(usePage().props);
+	if (!panel) return /* @__PURE__ */ jsx(NotificationsTrigger, { source });
+	return /* @__PURE__ */ jsxs(WidgetShell, {
+		panel,
+		children: [/* @__PURE__ */ jsx(NotificationsMenu, {}), !alfakitPage && /* @__PURE__ */ jsx(RealtimeNotifications, {})]
+	});
+}
+/** The panel's tenant menu inside a tenant, a menu to choose one elsewhere. */
+function LoadedTenantSwitcher({ source }) {
+	const panel = useWidgetsPanel(source);
+	if (!panel) return /* @__PURE__ */ jsx(TenantSwitcherTrigger, { source });
+	return /* @__PURE__ */ jsx(WidgetShell, {
+		panel,
+		children: panel.tenancy?.current ? /* @__PURE__ */ jsx(TenantMenu, { variant: "topbar" }) : /* @__PURE__ */ jsx(TenantChooser, { panel })
+	});
+}
+/** The user's tenants on a page outside the panel (no current tenant). */
+function TenantChooser({ panel }) {
+	const t = useT();
+	const tenancy = panel.tenancy;
+	if (!tenancy || tenancy.tenants.length === 0 && !tenancy.registrationUrl) return null;
+	const label = t("starter_kit.choose_tenant", {}, "Choose a tenant");
+	return /* @__PURE__ */ jsxs(DropdownMenu$1, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "tenant-menu",
+			className: "hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only lg:not-sr-only lg:truncate",
+				children: label
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::panels.tenant-menu.toggle-button",
+				fallback: ChevronsUpDownIcon,
+				className: "text-muted-foreground size-4 shrink-0"
+			})]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "min-w-56 rounded-lg",
+		side: "bottom",
+		align: "end",
+		sideOffset: 4,
+		children: [
+			tenancy.tenants.length > 0 && /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-muted-foreground text-xs",
+				children: label
+			}),
+			tenancy.tenants.map((tenant) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: () => router.visit(tenant.url),
+				children: [/* @__PURE__ */ jsxs(Avatar$1, {
+					className: "size-6 rounded-sm",
+					children: [tenant.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+						src: tenant.avatar,
+						alt: ""
+					}), /* @__PURE__ */ jsx(AvatarFallback, {
+						className: "rounded-sm text-[10px]",
+						children: initials(tenantNameText(tenant))
+					})]
+				}), /* @__PURE__ */ jsx(TenantName, {
+					tenant,
+					className: "flex-1 truncate"
+				})]
+			}, String(tenant.id))),
+			tenancy.registrationUrl && /* @__PURE__ */ jsxs(Fragment$1, { children: [tenancy.tenants.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: () => router.visit(tenancy.registrationUrl),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.tenant-menu.registration-button",
+					fallback: PlusIcon
+				}), t("tenancy.register", {}, "New")]
+			})] })
+		]
+	})] });
+}
+//#endregion
+export { LoadedNotifications, LoadedSearch, LoadedTenantSwitcher };
+
+//# sourceMappingURL=widgets-loaded.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-loaded.js","names":["DropdownMenu","Avatar"],"sources":["../../src/starter-kit/widgets-loaded.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  Translator,\n  initials,\n  isAlfakitPage,\n  loadStarterKitPanel,\n  loadedStarterKitPanel,\n  openRequestedStarterKitSearch,\n  starterKitWidgetsPage,\n  starterKitWidgetsPanel,\n  tenantNameText,\n  type PanelSchema,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { router, usePage } from '@inertiajs/react'\nimport { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'\nimport { Direction } from 'radix-ui'\nimport { useEffect, useMemo, useState, type ReactNode } from 'react'\nimport { NotificationsMenu } from '../components/notifications/notifications-menu'\nimport { RealtimeNotifications } from '../components/notifications/realtime-notifications'\nimport { GlobalSearch } from '../components/panel/global-search'\nimport { TenantName } from '../components/panel/nav-label'\nimport { TenantMenu } from '../components/panel/tenant-menu'\nimport { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../components/ui/dropdown-menu'\nimport { TooltipProvider } from '../components/ui/tooltip'\nimport {\n  AlfakitProvider,\n  StandaloneProvider,\n  useT,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { Icon } from '../lib/icons'\nimport {\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * The loaded header components of starter kit mode: the panel's own search palette,\n * notifications menu and tenant menu, rendered outside Alfakit pages with the panel data\n * from `widgets.endpoint`. This module only loads in the browser.\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\nfunction useWidgetsContext(panel: PanelSchema): AlfakitContextValue {\n  widgetsContext ??= {\n    registry: new ComponentRegistry<AnyComponent>(),\n    pages: {},\n    translator: new Translator(),\n    actions: new ActionRunner({ endpoints: { action: '', modal: '' } }),\n  }\n\n  widgetsContext.translator.setTranslations(panel.translations ?? {})\n  widgetsContext.translator.setLocale(panel.localization?.tag ?? 'en')\n\n  return widgetsContext\n}\n\n/** The panel the components render with, once its data has loaded (null until then). */\nfunction useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {\n  const endpoint = source.widgets.endpoint\n  const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint))\n  const base = loadedStarterKitPanel(endpoint) ?? loaded\n\n  useEffect(() => {\n    let active = true\n\n    // Another endpoint (a tenant switch) loads its own panel data.\n    void loadStarterKitPanel(endpoint).then(\n      (panel) => active && setLoaded(panel),\n      () => {},\n    )\n\n    return () => {\n      active = false\n    }\n  }, [endpoint])\n\n  const { navigation, widgets } = source\n\n  return useMemo(\n    () => (base ? starterKitWidgetsPanel(base, { navigation, widgets }) : null),\n    [base, navigation, widgets],\n  )\n}\n\nfunction WidgetShell({ panel, children }: { panel: PanelSchema; children: ReactNode }) {\n  const context = useWidgetsContext(panel)\n  const page = useMemo(() => starterKitWidgetsPage(), [])\n\n  return (\n    <AlfakitProvider value={context}>\n      <StandaloneProvider value={{ panel, page }}>\n        <Direction.Provider dir={panel.localization?.direction ?? 'ltr'}>\n          <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n        </Direction.Provider>\n      </StandaloneProvider>\n    </AlfakitProvider>\n  )\n}\n\n/** The panel's command palette and global search. */\nexport function LoadedSearch({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  // A click or the key bindings before the palette loaded open it now (after its own\n  // effects registered the shortcut).\n  useEffect(() => {\n    if (panel) openRequestedStarterKitSearch()\n  }, [panel])\n\n  if (!panel) return <SearchTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <GlobalSearch />\n    </WidgetShell>\n  )\n}\n\n/** The notifications bell, with realtime notifications on the host's own pages. */\nexport function LoadedNotifications({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n  // Alfakit pages subscribe to realtime notifications themselves.\n  const alfakitPage = isAlfakitPage(usePage().props)\n\n  if (!panel) return <NotificationsTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      <NotificationsMenu />\n      {!alfakitPage && <RealtimeNotifications />}\n    </WidgetShell>\n  )\n}\n\n/** The panel's tenant menu inside a tenant, a menu to choose one elsewhere. */\nexport function LoadedTenantSwitcher({ source }: WidgetProps) {\n  const panel = useWidgetsPanel(source)\n\n  if (!panel) return <TenantSwitcherTrigger source={source} />\n\n  return (\n    <WidgetShell panel={panel}>\n      {panel.tenancy?.current ? <TenantMenu variant=\"topbar\" /> : <TenantChooser panel={panel} />}\n    </WidgetShell>\n  )\n}\n\n/** The user's tenants on a page outside the panel (no current tenant). */\nfunction TenantChooser({ panel }: { panel: PanelSchema }) {\n  const t = useT()\n  const tenancy = panel.tenancy\n\n  if (!tenancy || (tenancy.tenants.length === 0 && !tenancy.registrationUrl)) return null\n\n  const label = t('starter_kit.choose_tenant', {}, 'Choose a tenant')\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"tenant-menu\"\n          className=\"hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n        >\n          <span className=\"sr-only lg:not-sr-only lg:truncate\">{label}</span>\n          <Icon\n            name=\"alfakit::panels.tenant-menu.toggle-button\"\n            fallback={ChevronsUpDownIcon}\n            className=\"text-muted-foreground size-4 shrink-0\"\n          />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" sideOffset={4}>\n        {tenancy.tenants.length > 0 && (\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs\">{label}</DropdownMenuLabel>\n        )}\n        {tenancy.tenants.map((tenant) => (\n          <DropdownMenuItem key={String(tenant.id)} onSelect={() => router.visit(tenant.url)}>\n            <Avatar className=\"size-6 rounded-sm\">\n              {tenant.avatar && <AvatarImage src={tenant.avatar} alt=\"\" />}\n              <AvatarFallback className=\"rounded-sm text-[10px]\">\n                {initials(tenantNameText(tenant))}\n              </AvatarFallback>\n            </Avatar>\n            <TenantName tenant={tenant} className=\"flex-1 truncate\" />\n          </DropdownMenuItem>\n        ))}\n        {tenancy.registrationUrl && (\n          <>\n            {tenancy.tenants.length > 0 && <DropdownMenuSeparator />}\n            <DropdownMenuItem onSelect={() => router.visit(tenancy.registrationUrl!)}>\n              <Icon name=\"alfakit::panels.tenant-menu.registration-button\" fallback={PlusIcon} />\n              {t('tenancy.register', {}, 'New')}\n            </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,90 @@
+import { useHydrated } from "../hooks/use-hydrated.js";
+import { formatKeyBinding, initials, registerStarterKitSearchShortcut, requestStarterKitSearch, tenantNameText } from "@alfakit/core";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BellIcon, ChevronsUpDownIcon, SearchIcon } from "lucide-react";
+//#region src/starter-kit/widgets-triggers.tsx
+const triggerClasses = "border-input bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 inline-flex h-8 shrink-0 items-center rounded-md border text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50";
+/** The search field until the palette has loaded: the same look, and it remembers a click. */
+function SearchTrigger({ source, onLoad }) {
+	const hydrated = useHydrated();
+	const search = source.widgets.search;
+	const keys = JSON.stringify(search?.keyBindings ?? ["mod+k"]);
+	const placeholder = search?.placeholder ?? "";
+	useEffect(() => registerStarterKitSearchShortcut(JSON.parse(keys), placeholder, () => onLoad?.()), [
+		keys,
+		placeholder,
+		onLoad
+	]);
+	const binding = search?.keyBindings[0];
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: `${triggerClasses} text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5`,
+		onPointerEnter: () => onLoad?.(),
+		onClick: () => {
+			requestStarterKitSearch();
+			onLoad?.();
+		},
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				className: "size-4",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only sm:not-sr-only sm:flex-1 sm:text-start",
+				children: placeholder
+			}),
+			hydrated && binding && /* @__PURE__ */ jsx("kbd", {
+				className: "bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline",
+				children: formatKeyBinding(binding)
+			})
+		]
+	});
+}
+/** The bell and its unread count until the menu has loaded. */
+function NotificationsTrigger({ source }) {
+	const notifications = source.widgets.notifications;
+	const count = notifications?.unreadCount ?? 0;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "notifications-trigger",
+		"aria-label": notifications?.label,
+		className: "hover:bg-accent hover:text-accent-foreground relative inline-flex size-9 items-center justify-center rounded-md",
+		children: [/* @__PURE__ */ jsx(BellIcon, {
+			className: "size-4",
+			"aria-hidden": "true"
+		}), count > 0 && /* @__PURE__ */ jsx("span", {
+			className: "bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium",
+			children: count > 99 ? "99+" : count
+		})]
+	});
+}
+/** The current tenant (or an empty avatar) until the switcher has loaded: a placeholder. */
+function TenantSwitcherTrigger({ source }) {
+	const current = source.widgets.tenancy?.current;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "tenant-menu",
+		"aria-hidden": "true",
+		tabIndex: -1,
+		className: "hover:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bg-muted flex size-6 items-center justify-center rounded-md text-[10px]",
+				children: current ? initials(tenantNameText(current)) : ""
+			}),
+			current && /* @__PURE__ */ jsx("span", {
+				className: "sr-only min-w-0 truncate lg:not-sr-only",
+				children: tenantNameText(current)
+			}),
+			/* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+				className: "text-muted-foreground size-4 shrink-0",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+//#endregion
+export { NotificationsTrigger, SearchTrigger, TenantSwitcherTrigger };
+
+//# sourceMappingURL=widgets-triggers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widgets-triggers.js","names":[],"sources":["../../src/starter-kit/widgets-triggers.tsx"],"sourcesContent":["import {\n  formatKeyBinding,\n  initials,\n  registerStarterKitSearchShortcut,\n  requestStarterKitSearch,\n  tenantNameText,\n  type StarterKitWidgets,\n} from '@alfakit/core'\nimport { BellIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'\nimport { useEffect } from 'react'\nimport { useHydrated } from '../hooks/use-hydrated'\n\n/**\n * What the starter kit header components show until their code and the panel data have\n * loaded: the same look as the loaded triggers, from the shared prop alone.\n */\nexport interface WidgetProps {\n  source: StarterKitWidgets\n}\n\nconst triggerClasses =\n  'border-input bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 inline-flex h-8 shrink-0 items-center rounded-md border text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50'\n\n/** The search field until the palette has loaded: the same look, and it remembers a click. */\nexport function SearchTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {\n  const hydrated = useHydrated()\n  const search = source.widgets.search\n  const keys = JSON.stringify(search?.keyBindings ?? ['mod+k'])\n  const placeholder = search?.placeholder ?? ''\n  // `onLoad` is a stable function (it starts loading the palette's code).\n  useEffect(\n    () =>\n      registerStarterKitSearchShortcut(JSON.parse(keys) as string[], placeholder, () => onLoad?.()),\n    [keys, placeholder, onLoad],\n  )\n\n  const binding = search?.keyBindings[0]\n\n  return (\n    <button\n      type=\"button\"\n      className={`${triggerClasses} text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5`}\n      onPointerEnter={() => onLoad?.()}\n      onClick={() => {\n        requestStarterKitSearch()\n        onLoad?.()\n      }}\n    >\n      <SearchIcon className=\"size-4\" aria-hidden=\"true\" />\n      <span className=\"sr-only sm:not-sr-only sm:flex-1 sm:text-start\">{placeholder}</span>\n      {hydrated && binding && (\n        <kbd className=\"bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline\">\n          {formatKeyBinding(binding)}\n        </kbd>\n      )}\n    </button>\n  )\n}\n\n/** The bell and its unread count until the menu has loaded. */\nexport function NotificationsTrigger({ source }: WidgetProps) {\n  const notifications = source.widgets.notifications\n  const count = notifications?.unreadCount ?? 0\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"notifications-trigger\"\n      aria-label={notifications?.label}\n      className=\"hover:bg-accent hover:text-accent-foreground relative inline-flex size-9 items-center justify-center rounded-md\"\n    >\n      <BellIcon className=\"size-4\" aria-hidden=\"true\" />\n      {count > 0 && (\n        <span className=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\">\n          {count > 99 ? '99+' : count}\n        </span>\n      )}\n    </button>\n  )\n}\n\n/** The current tenant (or an empty avatar) until the switcher has loaded: a placeholder. */\nexport function TenantSwitcherTrigger({ source }: WidgetProps) {\n  const current = source.widgets.tenancy?.current\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"tenant-menu\"\n      aria-hidden=\"true\"\n      tabIndex={-1}\n      className=\"hover:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium\"\n    >\n      <span className=\"bg-muted flex size-6 items-center justify-center rounded-md text-[10px]\">\n        {current ? initials(tenantNameText(current)) : ''}\n      </span>\n      {current && (\n        <span className=\"sr-only min-w-0 truncate lg:not-sr-only\">{tenantNameText(current)}</span>\n      )}\n      <ChevronsUpDownIcon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAoBA,MAAM,iBACJ;;AAGF,SAAgB,cAAc,EAAE,QAAQ,UAAiD;CACvF,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,OAAO,KAAK,UAAU,QAAQ,eAAe,CAAC,OAAO,CAAC;CAC5D,MAAM,cAAc,QAAQ,eAAe;CAE3C,gBAEI,iCAAiC,KAAK,MAAM,IAAI,GAAe,mBAAmB,SAAS,CAAC,GAC9F;EAAC;EAAM;EAAa;CAAM,CAC5B;CAEA,MAAM,UAAU,QAAQ,YAAY;CAEpC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,WAAW,GAAG,eAAe;EAC7B,sBAAsB,SAAS;EAC/B,eAAe;GACb,wBAAwB;GACxB,SAAS;EACX;EAPF,UAAA;GASE,oBAAC,YAAD;IAAY,WAAU;IAAS,eAAY;GAAQ,CAAA;GACnD,oBAAC,QAAD;IAAM,WAAU;IAAkD,UAAA;GAAkB,CAAA;GACnF,YAAY,WACX,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,iBAAiB,OAAO;GACtB,CAAA;EAED;;AAEZ;;AAGA,SAAgB,qBAAqB,EAAE,UAAuB;CAC5D,MAAM,gBAAgB,OAAO,QAAQ;CACrC,MAAM,QAAQ,eAAe,eAAe;CAE5C,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY,eAAe;EAC3B,WAAU;EAJZ,UAAA,CAME,oBAAC,UAAD;GAAU,WAAU;GAAS,eAAY;EAAQ,CAAA,GAChD,QAAQ,KACP,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,QAAQ,KAAK,QAAQ;EAClB,CAAA,CAEF;;AAEZ;;AAGA,SAAgB,sBAAsB,EAAE,UAAuB;CAC7D,MAAM,UAAU,OAAO,QAAQ,SAAS;CAExC,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,eAAY;EACZ,UAAU;EACV,WAAU;EALZ,UAAA;GAOE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,UAAU,SAAS,eAAe,OAAO,CAAC,IAAI;GAC3C,CAAA;GACL,WACC,oBAAC,QAAD;IAAM,WAAU;IAA2C,UAAA,eAAe,OAAO;GAAQ,CAAA;GAE3F,oBAAC,oBAAD;IAAoB,WAAU;IAAwC,eAAY;GAAQ,CAAA;EACpF;;AAEZ"}

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

@@ -0,0 +1,38 @@
+//#region src/starter-kit/widgets.d.ts
+/**
+ * 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
+ * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger
+ * straight away, and load their code and the panel data the first time they render
+ * (in the browser, never during SSR).
+ *
+ * ```tsx
+ * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
+ *
+ * <AlfakitSearch />
+ * <AlfakitNotifications />
+ * ```
+ */
+export interface AlfakitHeaderWidgetProps {
+  /** The `starterKit()` panel to use (the first one by default). */
+  panel?: string;
+}
+/**
+ * AlfaKit's command palette and global search: the search field opens it, and so do the
+ * panel's key bindings (⌘K / Ctrl+K by default), registered once for the page. Renders
+ * nothing for guests or without global search and a command palette.
+ */
+export declare function AlfakitSearch({ panel }?: AlfakitHeaderWidgetProps): import("react").JSX.Element | null;
+/**
+ * The bell with the user's database notifications (`databaseNotifications()`), polling and
+ * realtime updates as in the panel. Renders nothing for guests or without database
+ * notifications.
+ */
+export declare function AlfakitNotifications({ panel }?: AlfakitHeaderWidgetProps): import("react").JSX.Element | null;
+/**
+ * The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu
+ * to choose one on the host's own pages. Renders nothing for guests or other panels.
+ */
+export declare function AlfakitTenantSwitcher({ panel }?: AlfakitHeaderWidgetProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=widgets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.d.ts","names":[],"sources":["../../src/starter-kit/widgets.tsx"],"mappings":";;;;;;;;;;;;;;;iBAwBiB;;EAEf;;;;;;;wBAiCc,gBAAgB,UAAS,2CAA6B,IAAA;;;;;;wBAiBtD,uBAAuB,UAAS,2CAA6B,IAAA;;;;;wBAgB7D,wBAAwB,UAAS,2CAA6B,IAAA"}

package/dist/starter-kit/widgets.js

@@ -0,0 +1,64 @@
+import { lazyComponent } from "../lib/lazy.js";
+import { NotificationsTrigger, SearchTrigger, TenantSwitcherTrigger } from "./widgets-triggers.js";
+import { starterKitWidgets } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/starter-kit/widgets.tsx
+const load = () => import("./widgets-loaded.js");
+const LoadedSearch = lazyComponent(() => load().then((module) => module.LoadedSearch), (props) => /* @__PURE__ */ jsx(SearchTrigger, {
+	...props,
+	onLoad: preloadSearch
+}));
+function preloadSearch() {
+	LoadedSearch.preload();
+}
+const LoadedNotifications = lazyComponent(() => load().then((module) => module.LoadedNotifications), (props) => /* @__PURE__ */ jsx(NotificationsTrigger, { ...props }));
+const LoadedTenantSwitcher = lazyComponent(() => load().then((module) => module.LoadedTenantSwitcher), (props) => /* @__PURE__ */ jsx(TenantSwitcherTrigger, { ...props }));
+function useWidgets(panelId) {
+	return starterKitWidgets(usePage().props, panelId);
+}
+/**
+* AlfaKit's command palette and global search: the search field opens it, and so do the
+* panel's key bindings (⌘K / Ctrl+K by default), registered once for the page. Renders
+* nothing for guests or without global search and a command palette.
+*/
+function AlfakitSearch({ panel } = {}) {
+	const source = useWidgets(panel);
+	if (!source?.widgets.search) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "starter-kit-search",
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(LoadedSearch, { source })
+	});
+}
+/**
+* The bell with the user's database notifications (`databaseNotifications()`), polling and
+* realtime updates as in the panel. Renders nothing for guests or without database
+* notifications.
+*/
+function AlfakitNotifications({ panel } = {}) {
+	const source = useWidgets(panel);
+	if (!source?.widgets.notifications) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "starter-kit-notifications",
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(LoadedNotifications, { source })
+	});
+}
+/**
+* The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu
+* to choose one on the host's own pages. Renders nothing for guests or other panels.
+*/
+function AlfakitTenantSwitcher({ panel } = {}) {
+	const source = useWidgets(panel);
+	if (!source?.widgets.tenancy) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "starter-kit-tenant-switcher",
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(LoadedTenantSwitcher, { source })
+	});
+}
+//#endregion
+export { AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher };
+
+//# sourceMappingURL=widgets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.js","names":[],"sources":["../../src/starter-kit/widgets.tsx"],"sourcesContent":["import { starterKitWidgets, type StarterKitWidgets } from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { lazyComponent } from '../lib/lazy'\nimport {\n  NotificationsTrigger,\n  SearchTrigger,\n  TenantSwitcherTrigger,\n  type WidgetProps,\n} from './widgets-triggers'\n\n/**\n * Drop-in header components of starter kit mode (`Panel::starterKit()`): AlfaKit's search,\n * notifications bell and tenant switcher in the host's own header, on every page of the\n * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger\n * straight away, and load their code and the panel data the first time they render\n * (in the browser, never during SSR).\n *\n * ```tsx\n * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/react'\n *\n * <AlfakitSearch />\n * <AlfakitNotifications />\n * ```\n */\nexport interface AlfakitHeaderWidgetProps {\n  /** The `starterKit()` panel to use (the first one by default). */\n  panel?: string\n}\n\nconst load = () => import('./widgets-loaded')\n\nconst LoadedSearch = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedSearch),\n  (props) => <SearchTrigger {...props} onLoad={preloadSearch} />,\n)\n\nfunction preloadSearch() {\n  void LoadedSearch.preload()\n}\n\nconst LoadedNotifications = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedNotifications),\n  (props) => <NotificationsTrigger {...props} />,\n)\n\nconst LoadedTenantSwitcher = lazyComponent<WidgetProps>(\n  () => load().then((module) => module.LoadedTenantSwitcher),\n  (props) => <TenantSwitcherTrigger {...props} />,\n)\n\nfunction useWidgets(panelId: string | undefined): StarterKitWidgets | null {\n  return starterKitWidgets(usePage().props, panelId)\n}\n\n/**\n * AlfaKit's command palette and global search: the search field opens it, and so do the\n * panel's key bindings (⌘K / Ctrl+K by default), registered once for the page. Renders\n * nothing for guests or without global search and a command palette.\n */\nexport function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.search) return null\n\n  return (\n    <span data-slot=\"starter-kit-search\" className=\"inline-flex\">\n      <LoadedSearch source={source} />\n    </span>\n  )\n}\n\n/**\n * The bell with the user's database notifications (`databaseNotifications()`), polling and\n * realtime updates as in the panel. Renders nothing for guests or without database\n * notifications.\n */\nexport function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.notifications) return null\n\n  return (\n    <span data-slot=\"starter-kit-notifications\" className=\"inline-flex\">\n      <LoadedNotifications source={source} />\n    </span>\n  )\n}\n\n/**\n * The tenant switcher of a tenancy panel: the current tenant inside the panel, or a menu\n * to choose one on the host's own pages. Renders nothing for guests or other panels.\n */\nexport function AlfakitTenantSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {\n  const source = useWidgets(panel)\n\n  if (!source?.widgets.tenancy) return null\n\n  return (\n    <span data-slot=\"starter-kit-tenant-switcher\" className=\"inline-flex\">\n      <LoadedTenantSwitcher source={source} />\n    </span>\n  )\n}\n"],"mappings":";;;;;;AA6BA,MAAM,aAAa,OAAO;AAE1B,MAAM,eAAe,oBACb,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,YAAY,IAChD,UAAU,oBAAC,eAAD;CAAe,GAAI;CAAO,QAAQ;AAAgB,CAAA,CAC/D;AAEA,SAAS,gBAAgB;CACvB,aAAkB,QAAQ;AAC5B;AAEA,MAAM,sBAAsB,oBACpB,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,mBAAmB,IACvD,UAAU,oBAAC,sBAAD,EAAsB,GAAI,MAAQ,CAAA,CAC/C;AAEA,MAAM,uBAAuB,oBACrB,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,oBAAoB,IACxD,UAAU,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CAChD;AAEA,SAAS,WAAW,SAAuD;CACzE,OAAO,kBAAkB,QAAQ,CAAC,CAAC,OAAO,OAAO;AACnD;;;;;;AAOA,SAAgB,cAAc,EAAE,UAAoC,CAAC,GAAG;CACtE,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,QAAQ,OAAO;CAEpC,OACE,oBAAC,QAAD;EAAM,aAAU;EAAqB,WAAU;EAC7C,UAAA,oBAAC,cAAD,EAAsB,OAAS,CAAA;CAC3B,CAAA;AAEV;;;;;;AAOA,SAAgB,qBAAqB,EAAE,UAAoC,CAAC,GAAG;CAC7E,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,eAAe,OAAO;CAE3C,OACE,oBAAC,QAAD;EAAM,aAAU;EAA4B,WAAU;EACpD,UAAA,oBAAC,qBAAD,EAA6B,OAAS,CAAA;CAClC,CAAA;AAEV;;;;;AAMA,SAAgB,sBAAsB,EAAE,UAAoC,CAAC,GAAG;CAC9E,MAAM,SAAS,WAAW,KAAK;CAE/B,IAAI,CAAC,QAAQ,QAAQ,SAAS,OAAO;CAErC,OACE,oBAAC,QAAD;EAAM,aAAU;EAA8B,WAAU;EACtD,UAAA,oBAAC,sBAAD,EAA8B,OAAS,CAAA;CACnC,CAAA;AAEV"}