@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/panel/global-search-palette.js

@@ -0,0 +1,278 @@
+import { useActionRunner, useChoice, usePageSchema, usePanel, useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.js";
+import { Slot } from "./slot.js";
+import { installPwa } from "./pwa.js";
+import { ShortcutKeys } from "./shortcut-keys.js";
+import { canInstallPwa, commandPaletteItems, createLatestRequest, debounce, filterCommandPalette, globalSearchDebounce, globalSearchStatus, paletteGroupKey, pwaStore, requestJson, setAppearance, shortcuts } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/panel/global-search-palette.tsx
+/** Groups listed after the global search results. */
+const TRAILING_GROUPS = /* @__PURE__ */ new Set(["theme", "help"]);
+/**
+* The command palette behind `GlobalSearch`: global search results plus (with
+* `alfakit.commandPalette`) the page's header actions, panel commands, navigation, "create"
+* links, recent records, theme switching and the shortcuts overlay. Its code loads the first
+* time the palette opens; the trigger and `mod+k` stay in the shell.
+*/
+function GlobalSearchPalette({ open, onOpenChange }) {
+	const t = useT();
+	const choice = useChoice();
+	const panel = usePanel();
+	const page = usePageSchema();
+	const runner = useActionRunner();
+	const [query, setQuery] = useState("");
+	const [groups, setGroups] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [loaded, setLoaded] = useState(null);
+	const config = panel.globalSearch;
+	const palette = panel.commandPalette;
+	const endpoint = config ? panel.endpoints.globalSearch : void 0;
+	const paletteEndpoint = panel.endpoints.commandPalette;
+	const wait = globalSearchDebounce(config);
+	const placeholder = config?.placeholder ?? palette?.placeholder ?? t("palette.placeholder", {}, "Type a command or search…");
+	const overlay = panel.keyboardShortcuts !== false && panel.keyboardShortcuts !== void 0;
+	const installable = canInstallPwa(useStore(pwaStore)) && Boolean(panel.pwa);
+	useEffect(() => {
+		if (!open || !palette || !paletteEndpoint) return;
+		let active = true;
+		requestJson(paletteEndpoint).then((response) => active && setLoaded(response)).catch(() => active && setLoaded({
+			create: [],
+			recent: []
+		}));
+		return () => {
+			active = false;
+		};
+	}, [
+		open,
+		palette,
+		paletteEndpoint
+	]);
+	const latest = useMemo(() => createLatestRequest(), []);
+	const search = useMemo(() => debounce((term) => {
+		if (!endpoint || term.trim() === "") {
+			latest.cancel();
+			setGroups([]);
+			setLoading(false);
+			return;
+		}
+		latest.run((signal) => requestJson(endpoint, {
+			query: { search: term },
+			signal
+		}), (response) => setGroups(response.groups), () => setLoading(false)).catch(() => setGroups([]));
+	}, wait), [
+		endpoint,
+		latest,
+		wait
+	]);
+	useEffect(() => () => {
+		search.cancel();
+		latest.cancel();
+	}, [search, latest]);
+	const reset = useCallback(() => {
+		search.cancel();
+		latest.cancel();
+		setQuery("");
+		setGroups([]);
+		setLoading(false);
+		setLoaded(null);
+	}, [search, latest]);
+	const changeOpen = (next) => {
+		onOpenChange(next);
+		if (!next) reset();
+	};
+	useEffect(() => router.on("navigate", () => {
+		onOpenChange(false);
+		reset();
+	}), [onOpenChange, reset]);
+	const items = useMemo(() => commandPaletteItems({
+		panel,
+		page,
+		loaded,
+		shortcutsOverlay: overlay,
+		...installable ? { install: t("pwa.install", {}, "Install app") } : {},
+		labels: {
+			light: t("palette.theme.light", {}, "Light theme"),
+			dark: t("palette.theme.dark", {}, "Dark theme"),
+			system: t("palette.theme.system", {}, "System theme"),
+			shortcuts: t("palette.shortcuts", {}, "Keyboard shortcuts")
+		}
+	}), [
+		panel,
+		page,
+		loaded,
+		overlay,
+		installable,
+		t
+	]);
+	const local = useMemo(() => filterCommandPalette(items, query), [items, query]);
+	const leading = local.filter((group) => !TRAILING_GROUPS.has(group.id));
+	const trailing = local.filter((group) => TRAILING_GROUPS.has(group.id));
+	const status = globalSearchStatus(query, loading, [...groups, ...local.map((group) => ({ results: group.items }))], {
+		t,
+		choice
+	});
+	const updateQuery = (term) => {
+		setQuery(term);
+		setLoading(endpoint !== void 0 && term.trim() !== "");
+		search(term);
+	};
+	const run = (item) => {
+		changeOpen(false);
+		if (item.kind === "action" && item.action && item.context) runner.trigger(item.action, item.context);
+		else if (item.kind === "url" && item.url) {
+			if (item.openInNewTab) window.open(item.url, "_blank", "noopener,noreferrer");
+			else router.visit(item.url);
+		} else if (item.kind === "theme" && item.appearance) setAppearance(item.appearance, panel);
+		else if (item.kind === "shortcut" && item.shortcutId) setTimeout(() => shortcuts.trigger(item.shortcutId), 0);
+		else if (item.kind === "install") installPwa(t);
+	};
+	const groupHeading = (group) => group.label ?? t(paletteGroupKey(group.id), {}, defaultGroupLabel(group.id));
+	return /* @__PURE__ */ jsxs(CommandDialog, {
+		open,
+		onOpenChange: changeOpen,
+		title: palette ? t("command_palette", {}, "Command palette") : t("search", {}, "Search"),
+		description: placeholder,
+		shouldFilter: false,
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "global-search.start" }),
+			/* @__PURE__ */ jsx("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: status
+			}),
+			/* @__PURE__ */ jsx(CommandInput, {
+				placeholder,
+				value: query,
+				onValueChange: updateQuery
+			}),
+			/* @__PURE__ */ jsxs(CommandList, { children: [
+				!loading && /* @__PURE__ */ jsx(CommandEmpty, { children: query ? t("no_results", {}, "No results.") : placeholder }),
+				leading.map((group) => /* @__PURE__ */ jsx(PaletteGroupItems, {
+					group,
+					heading: groupHeading(group),
+					onRun: run
+				}, group.id)),
+				loading && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center py-6",
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}),
+				groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, {
+					heading: group.label,
+					"data-group": "search",
+					children: group.results.map((result) => /* @__PURE__ */ jsxs(CommandItem, {
+						value: `search:${group.label}:${result.url}`,
+						onSelect: () => {
+							changeOpen(false);
+							router.visit(result.url);
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: result.title }), result.details && /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-xs",
+								children: Object.entries(result.details).map(([key, value]) => `${key}: ${String(value)}`).join(" · ")
+							})]
+						}), result.actions && result.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+							"data-slot": "global-search-actions",
+							className: "ms-auto flex shrink-0 gap-1",
+							children: result.actions.map((action) => /* @__PURE__ */ jsx(ResultAction, {
+								action,
+								onNavigate: () => changeOpen(false)
+							}, action.name))
+						})]
+					}, result.url))
+				}, group.label)),
+				trailing.map((group) => /* @__PURE__ */ jsx(PaletteGroupItems, {
+					group,
+					heading: groupHeading(group),
+					onRun: run
+				}, group.id))
+			] }),
+			/* @__PURE__ */ jsx(Slot, { name: "global-search.end" })
+		]
+	});
+}
+function defaultGroupLabel(group) {
+	const id = group.startsWith("commands:") ? "commands" : group;
+	return {
+		recent: "Recent",
+		actions: "Actions",
+		commands: "Commands",
+		create: "Create",
+		navigation: "Go to",
+		theme: "Theme",
+		help: "Help"
+	}[id] ?? id;
+}
+/** One palette group: page actions, commands, links, theme and help items. */
+function PaletteGroupItems({ group, heading, onRun }) {
+	return /* @__PURE__ */ jsx(CommandGroup, {
+		heading,
+		"data-group": group.id,
+		children: group.items.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
+			value: item.id,
+			onSelect: () => onRun(item),
+			"data-kind": item.kind,
+			children: [
+				item.icon && /* @__PURE__ */ jsx(Icon, {
+					name: item.icon,
+					className: "size-4"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: item.label
+					}), (item.description ?? (group.id === "recent" || group.id === "navigation" ? item.groupLabel : void 0)) && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground truncate text-xs",
+						children: item.description ?? item.groupLabel
+					})]
+				}),
+				item.shortcut && /* @__PURE__ */ jsx(ShortcutKeys, {
+					binding: item.shortcut,
+					className: "ms-auto"
+				})
+			]
+		}, item.id))
+	});
+}
+/** A URL action next to a search result (`getGlobalSearchResultActions()`). */
+function ResultAction({ action, onNavigate }) {
+	if (!action.url) return null;
+	const url = action.url;
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		variant: "ghost",
+		size: "xs",
+		className: "h-6 px-2 text-xs",
+		"aria-label": action.label ? void 0 : action.tooltip ?? action.name,
+		children: /* @__PURE__ */ jsxs("a", {
+			href: url,
+			target: action.openUrlInNewTab ? "_blank" : void 0,
+			rel: action.openUrlInNewTab ? "noopener noreferrer" : void 0,
+			onPointerDown: (event) => event.stopPropagation(),
+			onClick: (event) => {
+				event.stopPropagation();
+				if (action.openUrlInNewTab || event.metaKey || event.ctrlKey) return;
+				event.preventDefault();
+				onNavigate();
+				router.visit(url);
+			},
+			children: [action.icon && /* @__PURE__ */ jsx(Icon, {
+				name: action.icon,
+				className: "size-3.5"
+			}), action.label]
+		})
+	});
+}
+//#endregion
+export { GlobalSearchPalette };
+
+//# sourceMappingURL=global-search-palette.js.map

package/dist/components/panel/global-search-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search-palette.js","names":[],"sources":["../../../src/components/panel/global-search-palette.tsx"],"sourcesContent":["import type {\n  ActionSchema,\n  CommandPaletteResponse,\n  GlobalSearchGroupSchema,\n  PaletteGroup,\n  PaletteItem,\n} from '@alfakit/core'\nimport {\n  canInstallPwa,\n  commandPaletteItems,\n  createLatestRequest,\n  debounce,\n  filterCommandPalette,\n  globalSearchDebounce,\n  globalSearchStatus,\n  paletteGroupKey,\n  pwaStore,\n  requestJson,\n  setAppearance,\n  shortcuts,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useActionRunner, useChoice, usePageSchema, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { Button } from '../ui/button'\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../ui/command'\nimport { Spinner } from '../ui/spinner'\nimport { installPwa } from './pwa'\nimport { ShortcutKeys } from './shortcut-keys'\nimport { Slot } from './slot'\n\ntype SearchGroup = GlobalSearchGroupSchema\n\n/** Groups listed after the global search results. */\nconst TRAILING_GROUPS = new Set(['theme', 'help'])\n\n/**\n * The command palette behind `GlobalSearch`: global search results plus (with\n * `alfakit.commandPalette`) the page's header actions, panel commands, navigation, \"create\"\n * links, recent records, theme switching and the shortcuts overlay. Its code loads the first\n * time the palette opens; the trigger and `mod+k` stay in the shell.\n */\nexport function GlobalSearchPalette({\n  open,\n  onOpenChange,\n}: {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}) {\n  const t = useT()\n  const choice = useChoice()\n  const panel = usePanel()\n  const page = usePageSchema()\n  const runner = useActionRunner()\n  const [query, setQuery] = useState('')\n  const [groups, setGroups] = useState<SearchGroup[]>([])\n  const [loading, setLoading] = useState(false)\n  const [loaded, setLoaded] = useState<CommandPaletteResponse | null>(null)\n  const config = panel.globalSearch\n  const palette = panel.commandPalette\n  const endpoint = config ? panel.endpoints.globalSearch : undefined\n  const paletteEndpoint = panel.endpoints.commandPalette\n  const wait = globalSearchDebounce(config)\n  const placeholder =\n    config?.placeholder ??\n    palette?.placeholder ??\n    t('palette.placeholder', {}, 'Type a command or search…')\n  const overlay = panel.keyboardShortcuts !== false && panel.keyboardShortcuts !== undefined\n  // `Panel::pwa()`: \"Install app\" while the browser offers it (or on iOS Safari).\n  const installable = canInstallPwa(useStore(pwaStore)) && Boolean(panel.pwa)\n\n  // Create links and recent records, loaded each time the palette opens.\n  useEffect(() => {\n    if (!open || !palette || !paletteEndpoint) return\n\n    let active = true\n\n    requestJson<CommandPaletteResponse>(paletteEndpoint)\n      .then((response) => active && setLoaded(response))\n      .catch(() => active && setLoaded({ create: [], recent: [] }))\n\n    return () => {\n      active = false\n    }\n  }, [open, palette, paletteEndpoint])\n\n  const latest = useMemo(() => createLatestRequest(), [])\n\n  const search = useMemo(\n    () =>\n      debounce((term: string) => {\n        if (!endpoint || term.trim() === '') {\n          latest.cancel()\n          setGroups([])\n          setLoading(false)\n\n          return\n        }\n\n        // Only the newest request may update the results (B32): a slow response for an\n        // older term is aborted and dropped.\n        void latest\n          .run(\n            (signal) =>\n              requestJson<{ groups: SearchGroup[] }>(endpoint, {\n                query: { search: term },\n                signal,\n              }),\n            (response) => setGroups(response.groups),\n            () => setLoading(false),\n          )\n          .catch(() => setGroups([]))\n      }, wait),\n    [endpoint, latest, wait],\n  )\n\n  useEffect(\n    () => () => {\n      search.cancel()\n      latest.cancel()\n    },\n    [search, latest],\n  )\n\n  // Closing the palette (or navigating away) starts the next search from scratch.\n  const reset = useCallback(() => {\n    search.cancel()\n    latest.cancel()\n    setQuery('')\n    setGroups([])\n    setLoading(false)\n    setLoaded(null)\n  }, [search, latest])\n\n  const changeOpen = (next: boolean) => {\n    onOpenChange(next)\n\n    if (!next) reset()\n  }\n\n  useEffect(\n    () =>\n      router.on('navigate', () => {\n        onOpenChange(false)\n        reset()\n      }),\n    [onOpenChange, reset],\n  )\n\n  const items = useMemo(\n    () =>\n      commandPaletteItems({\n        panel,\n        page,\n        loaded,\n        shortcutsOverlay: overlay,\n        ...(installable ? { install: t('pwa.install', {}, 'Install app') } : {}),\n        labels: {\n          light: t('palette.theme.light', {}, 'Light theme'),\n          dark: t('palette.theme.dark', {}, 'Dark theme'),\n          system: t('palette.theme.system', {}, 'System theme'),\n          shortcuts: t('palette.shortcuts', {}, 'Keyboard shortcuts'),\n        },\n      }),\n    [panel, page, loaded, overlay, installable, t],\n  )\n  const local = useMemo(() => filterCommandPalette(items, query), [items, query])\n  const leading = local.filter((group) => !TRAILING_GROUPS.has(group.id))\n  const trailing = local.filter((group) => TRAILING_GROUPS.has(group.id))\n\n  const status = globalSearchStatus(\n    query,\n    loading,\n    [...groups, ...local.map((group) => ({ results: group.items }))],\n    { t, choice },\n  )\n\n  const updateQuery = (term: string) => {\n    setQuery(term)\n    setLoading(endpoint !== undefined && term.trim() !== '')\n    search(term)\n  }\n\n  const run = (item: PaletteItem) => {\n    changeOpen(false)\n\n    if (item.kind === 'action' && item.action && item.context) {\n      void runner.trigger(item.action, item.context)\n    } else if (item.kind === 'url' && item.url) {\n      if (item.openInNewTab) {\n        window.open(item.url, '_blank', 'noopener,noreferrer')\n      } else {\n        router.visit(item.url)\n      }\n    } else if (item.kind === 'theme' && item.appearance) {\n      setAppearance(item.appearance, panel)\n    } else if (item.kind === 'shortcut' && item.shortcutId) {\n      // After the dialog closed, so focus returns to the page before the overlay opens.\n      setTimeout(() => shortcuts.trigger(item.shortcutId!), 0)\n    } else if (item.kind === 'install') {\n      void installPwa(t)\n    }\n  }\n\n  const groupHeading = (group: PaletteGroup) =>\n    group.label ?? t(paletteGroupKey(group.id), {}, defaultGroupLabel(group.id))\n\n  return (\n    <CommandDialog\n      open={open}\n      onOpenChange={changeOpen}\n      title={palette ? t('command_palette', {}, 'Command palette') : t('search', {}, 'Search')}\n      description={placeholder}\n      shouldFilter={false}\n    >\n      <Slot name=\"global-search.start\" />\n      {/* Announces the result count (or \"No results.\") once a search has finished. */}\n      <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {status}\n      </div>\n      <CommandInput placeholder={placeholder} value={query} onValueChange={updateQuery} />\n      <CommandList>\n        {!loading && (\n          <CommandEmpty>{query ? t('no_results', {}, 'No results.') : placeholder}</CommandEmpty>\n        )}\n        {leading.map((group) => (\n          <PaletteGroupItems\n            key={group.id}\n            group={group}\n            heading={groupHeading(group)}\n            onRun={run}\n          />\n        ))}\n        {loading && (\n          <div className=\"flex justify-center py-6\">\n            <Spinner />\n          </div>\n        )}\n        {groups.map((group) => (\n          <CommandGroup key={group.label} heading={group.label} data-group=\"search\">\n            {group.results.map((result) => (\n              <CommandItem\n                key={result.url}\n                value={`search:${group.label}:${result.url}`}\n                onSelect={() => {\n                  changeOpen(false)\n                  router.visit(result.url)\n                }}\n              >\n                <div className=\"flex min-w-0 flex-1 flex-col\">\n                  <span>{result.title}</span>\n                  {result.details && (\n                    <span className=\"text-muted-foreground text-xs\">\n                      {Object.entries(result.details)\n                        .map(([key, value]) => `${key}: ${String(value)}`)\n                        .join(' · ')}\n                    </span>\n                  )}\n                </div>\n                {result.actions && result.actions.length > 0 && (\n                  <div data-slot=\"global-search-actions\" className=\"ms-auto flex shrink-0 gap-1\">\n                    {result.actions.map((action) => (\n                      <ResultAction\n                        key={action.name}\n                        action={action}\n                        onNavigate={() => changeOpen(false)}\n                      />\n                    ))}\n                  </div>\n                )}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        ))}\n        {trailing.map((group) => (\n          <PaletteGroupItems\n            key={group.id}\n            group={group}\n            heading={groupHeading(group)}\n            onRun={run}\n          />\n        ))}\n      </CommandList>\n      <Slot name=\"global-search.end\" />\n    </CommandDialog>\n  )\n}\n\nfunction defaultGroupLabel(group: string): string {\n  const id = group.startsWith('commands:') ? 'commands' : group\n\n  return (\n    {\n      recent: 'Recent',\n      actions: 'Actions',\n      commands: 'Commands',\n      create: 'Create',\n      navigation: 'Go to',\n      theme: 'Theme',\n      help: 'Help',\n    }[id] ?? id\n  )\n}\n\n/** One palette group: page actions, commands, links, theme and help items. */\nfunction PaletteGroupItems({\n  group,\n  heading,\n  onRun,\n}: {\n  group: PaletteGroup\n  heading: string\n  onRun: (item: PaletteItem) => void\n}) {\n  return (\n    <CommandGroup heading={heading} data-group={group.id}>\n      {group.items.map((item) => (\n        <CommandItem\n          key={item.id}\n          value={item.id}\n          onSelect={() => onRun(item)}\n          data-kind={item.kind}\n        >\n          {item.icon && <Icon name={item.icon} className=\"size-4\" />}\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <span className=\"truncate\">{item.label}</span>\n            {(item.description ??\n              (group.id === 'recent' || group.id === 'navigation'\n                ? item.groupLabel\n                : undefined)) && (\n              <span className=\"text-muted-foreground truncate text-xs\">\n                {item.description ?? item.groupLabel}\n              </span>\n            )}\n          </div>\n          {item.shortcut && <ShortcutKeys binding={item.shortcut} className=\"ms-auto\" />}\n        </CommandItem>\n      ))}\n    </CommandGroup>\n  )\n}\n\n/** A URL action next to a search result (`getGlobalSearchResultActions()`). */\nfunction ResultAction({ action, onNavigate }: { action: ActionSchema; onNavigate: () => void }) {\n  if (!action.url) return null\n\n  const url = action.url\n\n  return (\n    <Button\n      asChild\n      variant=\"ghost\"\n      size=\"xs\"\n      className=\"h-6 px-2 text-xs\"\n      aria-label={action.label ? undefined : (action.tooltip ?? action.name)}\n    >\n      <a\n        href={url}\n        target={action.openUrlInNewTab ? '_blank' : undefined}\n        rel={action.openUrlInNewTab ? 'noopener noreferrer' : undefined}\n        onPointerDown={(event) => event.stopPropagation()}\n        onClick={(event) => {\n          // The item itself navigates on select; this button goes somewhere else.\n          event.stopPropagation()\n\n          if (action.openUrlInNewTab || event.metaKey || event.ctrlKey) return\n\n          event.preventDefault()\n          onNavigate()\n          router.visit(url)\n        }}\n      >\n        {action.icon && <Icon name={action.icon} className=\"size-3.5\" />}\n        {action.label}\n      </a>\n    </Button>\n  )\n}\n"],"mappings":"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"}

package/dist/components/panel/global-search.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/panel/global-search.d.ts
+/**
+ * The search field and its command palette (`GlobalSearchPalette`, loaded on first open):
+ * global search results plus (with `alfakit.commandPalette`) the page's header actions,
+ * panel commands, navigation, "create" links, recent records, theme switching and the
+ * shortcuts overlay. `variant="sidebar"` is the full-width field in the sidebar header
+ * (`globalSearch(position: GlobalSearchPosition::Sidebar)`).
+ */
+export declare function GlobalSearch({ variant }: {
+  variant?: 'topbar' | 'sidebar';
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=global-search.d.ts.map

package/dist/components/panel/global-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search.d.ts","names":[],"sources":["../../../src/components/panel/global-search.tsx"],"mappings":";;;;;;;;wBAqCgB,eAAe;EAAwB;oBAAgC,IAAA"}

package/dist/components/panel/global-search.js

@@ -0,0 +1,114 @@
+import { usePanel, useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useHydrated } from "../../hooks/use-hydrated.js";
+import { Slot } from "./slot.js";
+import { SHORTCUT_IDS, formatKeyBinding, globalSearchSuffix, shortcuts } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+//#region src/components/panel/global-search.tsx
+let loadedPalette;
+let loadingPalette;
+/** The palette's code: loaded the first time it opens (or ahead, on hover and focus). */
+function loadPalette() {
+	loadingPalette ??= import("./global-search-palette.js").then((module) => loadedPalette = module.GlobalSearchPalette, (error) => {
+		loadingPalette = void 0;
+		throw error;
+	});
+	return loadingPalette;
+}
+const preloadPalette = () => void loadPalette().catch(() => void 0);
+/**
+* The search field and its command palette (`GlobalSearchPalette`, loaded on first open):
+* global search results plus (with `alfakit.commandPalette`) the page's header actions,
+* panel commands, navigation, "create" links, recent records, theme switching and the
+* shortcuts overlay. `variant="sidebar"` is the full-width field in the sidebar header
+* (`globalSearch(position: GlobalSearchPosition::Sidebar)`).
+*/
+function GlobalSearch({ variant = "topbar" }) {
+	const t = useT();
+	const panel = usePanel();
+	const hydrated = useHydrated();
+	const [open, setOpen] = useState(false);
+	const [Palette, setPalette] = useState(() => loadedPalette);
+	const config = panel.globalSearch;
+	const palette = panel.commandPalette;
+	const endpoint = config ? panel.endpoints.globalSearch : void 0;
+	const placeholder = config?.placeholder ?? palette?.placeholder ?? t("palette.placeholder", {}, "Type a command or search…");
+	const suffix = globalSearchSuffix(config ?? (palette ? {
+		keyBindings: ["mod+k"],
+		placeholder
+	} : void 0));
+	const keys = JSON.stringify(config?.keyBindings ?? ["mod+k"]);
+	const label = t("shortcuts.open_palette", {}, "Open the command palette");
+	useEffect(() => {
+		if (!config && !palette) return;
+		return shortcuts.register({
+			id: SHORTCUT_IDS.palette,
+			keys: JSON.parse(keys),
+			label,
+			group: "general",
+			essential: true,
+			handler: () => setOpen(true)
+		});
+	}, [
+		config,
+		palette,
+		keys,
+		label
+	]);
+	useEffect(() => {
+		if (!open || Palette) return;
+		let active = true;
+		loadPalette().then((component) => active && setPalette(() => component), () => active && setOpen(false));
+		return () => {
+			active = false;
+		};
+	}, [open, Palette]);
+	useEffect(() => router.on("navigate", () => setOpen(false)), []);
+	if ((!config || !endpoint) && !palette) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Slot, { name: "global-search.before" }),
+		/* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-variant": variant,
+			className: variant === "sidebar" ? "text-muted-foreground w-full justify-start gap-2 px-2.5 font-normal group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0" : "text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5",
+			onClick: () => setOpen(true),
+			onPointerEnter: preloadPalette,
+			onFocus: preloadPalette,
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.global-search.field",
+					fallback: SearchIcon,
+					className: "size-4"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: variant === "sidebar" ? "flex-1 truncate text-start group-data-[collapsible=icon]:sr-only" : "sr-only sm:not-sr-only sm:flex-1 sm:text-start",
+					children: placeholder
+				}),
+				suffix?.type === "text" && /* @__PURE__ */ jsx("span", {
+					"data-slot": "global-search-suffix",
+					className: "text-muted-foreground hidden text-[10px] sm:inline",
+					children: suffix.text
+				}),
+				hydrated && suffix?.type === "keyBinding" && /* @__PURE__ */ jsx("kbd", {
+					className: "bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline",
+					children: formatKeyBinding(suffix.keyBinding)
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Slot, { name: "global-search.after" }),
+		Palette && /* @__PURE__ */ jsx(Palette, {
+			open,
+			onOpenChange: setOpen
+		})
+	] });
+}
+//#endregion
+export { GlobalSearch };
+
+//# sourceMappingURL=global-search.js.map

package/dist/components/panel/global-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search.js","names":[],"sources":["../../../src/components/panel/global-search.tsx"],"sourcesContent":["import { formatKeyBinding, globalSearchSuffix, SHORTCUT_IDS, shortcuts } from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { SearchIcon } from 'lucide-react'\nimport { useEffect, useState, type ComponentType } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { useHydrated } from '../../hooks/use-hydrated'\nimport { Icon } from '../../lib/icons'\nimport { Button } from '../ui/button'\nimport { Slot } from './slot'\n\ntype PaletteComponent = ComponentType<{ open: boolean; onOpenChange: (open: boolean) => void }>\n\nlet loadedPalette: PaletteComponent | undefined\nlet loadingPalette: Promise<PaletteComponent> | undefined\n\n/** The palette's code: loaded the first time it opens (or ahead, on hover and focus). */\nfunction loadPalette(): Promise<PaletteComponent> {\n  loadingPalette ??= import('./global-search-palette').then(\n    (module) => (loadedPalette = module.GlobalSearchPalette),\n    (error: unknown) => {\n      loadingPalette = undefined\n      throw error\n    },\n  )\n\n  return loadingPalette\n}\n\nconst preloadPalette = () => void loadPalette().catch(() => undefined)\n\n/**\n * The search field and its command palette (`GlobalSearchPalette`, loaded on first open):\n * global search results plus (with `alfakit.commandPalette`) the page's header actions,\n * panel commands, navigation, \"create\" links, recent records, theme switching and the\n * shortcuts overlay. `variant=\"sidebar\"` is the full-width field in the sidebar header\n * (`globalSearch(position: GlobalSearchPosition::Sidebar)`).\n */\nexport function GlobalSearch({ variant = 'topbar' }: { variant?: 'topbar' | 'sidebar' }) {\n  const t = useT()\n  const panel = usePanel()\n  const hydrated = useHydrated()\n  const [open, setOpen] = useState(false)\n  // Undefined on the server and during hydration (nothing loads there), so the markup matches.\n  const [Palette, setPalette] = useState<PaletteComponent | undefined>(() => loadedPalette)\n  const config = panel.globalSearch\n  const palette = panel.commandPalette\n  const endpoint = config ? panel.endpoints.globalSearch : undefined\n  const placeholder =\n    config?.placeholder ??\n    palette?.placeholder ??\n    t('palette.placeholder', {}, 'Type a command or search…')\n  // Without global search the palette still opens with ⌘K / Ctrl+K.\n  const suffix = globalSearchSuffix(\n    config ?? (palette ? { keyBindings: ['mod+k'], placeholder } : undefined),\n  )\n  const keys = JSON.stringify(config?.keyBindings ?? ['mod+k'])\n  const label = t('shortcuts.open_palette', {}, 'Open the command palette')\n\n  // The palette's key bindings (`globalSearchKeyBindings()`): essential, so they keep working\n  // with `keyboardShortcuts(false)`; users may change them in the shortcuts overlay.\n  useEffect(() => {\n    if (!config && !palette) return\n\n    return shortcuts.register({\n      id: SHORTCUT_IDS.palette,\n      keys: JSON.parse(keys) as string[],\n      label,\n      group: 'general',\n      essential: true,\n      handler: () => setOpen(true),\n    })\n  }, [config, palette, keys, label])\n\n  // Opening before the code has arrived (a click or `mod+k` right after the page loads)\n  // keeps `open` set; the palette mounts open once it has loaded.\n  useEffect(() => {\n    if (!open || Palette) return\n\n    let active = true\n\n    loadPalette().then(\n      (component) => active && setPalette(() => component),\n      () => active && setOpen(false),\n    )\n\n    return () => {\n      active = false\n    }\n  }, [open, Palette])\n\n  // A palette opened while its code was still loading closes when the page changes.\n  useEffect(() => router.on('navigate', () => setOpen(false)), [])\n\n  if ((!config || !endpoint) && !palette) {\n    return null\n  }\n\n  return (\n    <>\n      <Slot name=\"global-search.before\" />\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        data-variant={variant}\n        className={\n          variant === 'sidebar'\n            ? 'text-muted-foreground w-full justify-start gap-2 px-2.5 font-normal group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0'\n            : 'text-muted-foreground size-8 justify-center gap-2 px-0 font-normal sm:w-56 sm:justify-start sm:px-2.5'\n        }\n        onClick={() => setOpen(true)}\n        onPointerEnter={preloadPalette}\n        onFocus={preloadPalette}\n      >\n        <Icon name=\"alfakit::panels.global-search.field\" fallback={SearchIcon} className=\"size-4\" />\n        <span\n          className={\n            variant === 'sidebar'\n              ? 'flex-1 truncate text-start group-data-[collapsible=icon]:sr-only'\n              : 'sr-only sm:not-sr-only sm:flex-1 sm:text-start'\n          }\n        >\n          {placeholder}\n        </span>\n        {/* `globalSearchFieldSuffix()`, or the first key binding: it depends on the visitor's\n            platform (⌘ or Ctrl), so it renders after hydration. */}\n        {suffix?.type === 'text' && (\n          <span\n            data-slot=\"global-search-suffix\"\n            className=\"text-muted-foreground hidden text-[10px] sm:inline\"\n          >\n            {suffix.text}\n          </span>\n        )}\n        {hydrated && suffix?.type === 'keyBinding' && (\n          <kbd className=\"bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline\">\n            {formatKeyBinding(suffix.keyBinding)}\n          </kbd>\n        )}\n      </Button>\n      <Slot name=\"global-search.after\" />\n      {/* The dialog's code loads on first open (click or shortcut); hovering or focusing the\n          field fetches it ahead. Not rendered on the server, like the closed dialog before it. */}\n      {Palette && <Palette open={open} onOpenChange={setOpen} />}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAI;AACJ,IAAI;;AAGJ,SAAS,cAAyC;CAChD,mBAAmB,OAAO,6BAA0B,CAAC,MAClD,WAAY,gBAAgB,OAAO,sBACnC,UAAmB;EAClB,iBAAiB,KAAA;EACjB,MAAM;CACR,CACF;CAEA,OAAO;AACT;AAEA,MAAM,uBAAuB,KAAK,YAAY,CAAC,CAAC,YAAY,KAAA,CAAS;;;;;;;;AASrE,SAAgB,aAAa,EAAE,UAAU,YAAgD;CACvF,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,SAAS;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,CAAC,SAAS,cAAc,eAA6C,aAAa;CACxF,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,SAAS,MAAM,UAAU,eAAe,KAAA;CACzD,MAAM,cACJ,QAAQ,eACR,SAAS,eACT,EAAE,uBAAuB,CAAC,GAAG,2BAA2B;CAE1D,MAAM,SAAS,mBACb,WAAW,UAAU;EAAE,aAAa,CAAC,OAAO;EAAG;CAAY,IAAI,KAAA,EACjE;CACA,MAAM,OAAO,KAAK,UAAU,QAAQ,eAAe,CAAC,OAAO,CAAC;CAC5D,MAAM,QAAQ,EAAE,0BAA0B,CAAC,GAAG,0BAA0B;CAIxE,gBAAgB;EACd,IAAI,CAAC,UAAU,CAAC,SAAS;EAEzB,OAAO,UAAU,SAAS;GACxB,IAAI,aAAa;GACjB,MAAM,KAAK,MAAM,IAAI;GACrB;GACA,OAAO;GACP,WAAW;GACX,eAAe,QAAQ,IAAI;EAC7B,CAAC;CACH,GAAG;EAAC;EAAQ;EAAS;EAAM;CAAK,CAAC;CAIjC,gBAAgB;EACd,IAAI,CAAC,QAAQ,SAAS;EAEtB,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,OAAO,CAAC;CAGlB,gBAAgB,OAAO,GAAG,kBAAkB,QAAQ,KAAK,CAAC,GAAG,CAAC,CAAC;CAE/D,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,SAC7B,OAAO;CAGT,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,MAAD,EAAM,MAAK,uBAAwB,CAAA;EACnC,qBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,gBAAc;GACd,WACE,YAAY,YACR,6LACA;GAEN,eAAe,QAAQ,IAAI;GAC3B,gBAAgB;GAChB,SAAS;GAZX,UAAA;IAcE,oBAAC,MAAD;KAAM,MAAK;KAAsC,UAAU;KAAY,WAAU;IAAU,CAAA;IAC3F,oBAAC,QAAD;KACE,WACE,YAAY,YACR,qEACA;KAGL,UAAA;IACG,CAAA;IAGL,QAAQ,SAAS,UAChB,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;KAET,UAAA,OAAO;IACJ,CAAA;IAEP,YAAY,QAAQ,SAAS,gBAC5B,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,iBAAiB,OAAO,UAAU;IAChC,CAAA;GAED;;EACR,oBAAC,MAAD,EAAM,MAAK,sBAAuB,CAAA;EAGjC,WAAW,oBAAC,SAAD;GAAe;GAAM,cAAc;EAAU,CAAA;CACzD,EAAA,CAAA;AAEN"}

package/dist/components/panel/impersonation-banner.d.ts

@@ -0,0 +1,11 @@
+import { ImpersonationSchema } from "@alfakit/core";
+//#region src/components/panel/impersonation-banner.d.ts
+/**
+ * Shown while impersonating another user: who you are signed in as, and a button that
+ * returns to your own account. Replace it with `components: { 'panel:impersonation-banner': … }`.
+ */
+export declare function ImpersonationBanner({ impersonation }: {
+  impersonation?: ImpersonationSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=impersonation-banner.d.ts.map

package/dist/components/panel/impersonation-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"impersonation-banner.d.ts","names":[],"sources":["../../../src/components/panel/impersonation-banner.tsx"],"mappings":";;;;;;wBAWgB,sBAAsB;EAAmB,gBAAgB;oBAAqB,IAAA"}

package/dist/components/panel/impersonation-banner.js

@@ -0,0 +1,52 @@
+import { usePanel } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { router } from "@inertiajs/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LogOutIcon, VenetianMaskIcon } from "lucide-react";
+//#region src/components/panel/impersonation-banner.tsx
+/**
+* Shown while impersonating another user: who you are signed in as, and a button that
+* returns to your own account. Replace it with `components: { 'panel:impersonation-banner': … }`.
+*/
+function ImpersonationBanner({ impersonation }) {
+	const panel = usePanel();
+	const current = impersonation ?? panel?.impersonation;
+	const [leaving, setLeaving] = useState(false);
+	if (!current) return null;
+	const leave = () => {
+		setLeaving(true);
+		router.post(current.leaveUrl, {}, { onFinish: () => setLeaving(false) });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "impersonation-banner",
+		role: "status",
+		className: "bg-foreground text-background fixed inset-x-0 bottom-4 z-50 mx-auto flex w-fit max-w-[calc(100%-2rem)] items-center gap-3 rounded-full py-1.5 ps-4 pe-1.5 text-sm shadow-lg",
+		children: [
+			/* @__PURE__ */ jsx(VenetianMaskIcon, {
+				className: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: current.label
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				size: "sm",
+				variant: "secondary",
+				className: "rounded-full",
+				disabled: leaving,
+				onClick: leave,
+				children: [/* @__PURE__ */ jsx(LogOutIcon, {
+					className: "rtl:rotate-180",
+					"aria-hidden": "true"
+				}), current.leaveLabel]
+			})
+		]
+	});
+}
+//#endregion
+export { ImpersonationBanner };
+
+//# sourceMappingURL=impersonation-banner.js.map

package/dist/components/panel/impersonation-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"impersonation-banner.js","names":[],"sources":["../../../src/components/panel/impersonation-banner.tsx"],"sourcesContent":["import type { ImpersonationSchema } from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { LogOutIcon, VenetianMaskIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { usePanel } from '../../context'\nimport { Button } from '../ui/button'\n\n/**\n * Shown while impersonating another user: who you are signed in as, and a button that\n * returns to your own account. Replace it with `components: { 'panel:impersonation-banner': … }`.\n */\nexport function ImpersonationBanner({ impersonation }: { impersonation?: ImpersonationSchema }) {\n  const panel = usePanel()\n  const current = impersonation ?? panel?.impersonation\n  const [leaving, setLeaving] = useState(false)\n\n  if (!current) {\n    return null\n  }\n\n  const leave = () => {\n    setLeaving(true)\n    router.post(current.leaveUrl, {}, { onFinish: () => setLeaving(false) })\n  }\n\n  return (\n    <div\n      data-slot=\"impersonation-banner\"\n      role=\"status\"\n      className=\"bg-foreground text-background fixed inset-x-0 bottom-4 z-50 mx-auto flex w-fit max-w-[calc(100%-2rem)] items-center gap-3 rounded-full py-1.5 ps-4 pe-1.5 text-sm shadow-lg\"\n    >\n      <VenetianMaskIcon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n      <span className=\"min-w-0 truncate\">{current.label}</span>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        variant=\"secondary\"\n        className=\"rounded-full\"\n        disabled={leaving}\n        onClick={leave}\n      >\n        <LogOutIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n        {current.leaveLabel}\n      </Button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,oBAAoB,EAAE,iBAA0D;CAC9F,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,iBAAiB,OAAO;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,IAAI,CAAC,SACH,OAAO;CAGT,MAAM,cAAc;EAClB,WAAW,IAAI;EACf,OAAO,KAAK,QAAQ,UAAU,CAAC,GAAG,EAAE,gBAAgB,WAAW,KAAK,EAAE,CAAC;CACzE;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAU;EAHZ,UAAA;GAKE,oBAAC,kBAAD;IAAkB,WAAU;IAAkB,eAAY;GAAQ,CAAA;GAClE,oBAAC,QAAD;IAAM,WAAU;IAAoB,UAAA,QAAQ;GAAY,CAAA;GACxD,qBAAC,QAAD;IACE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,WAAU;IACV,UAAU;IACV,SAAS;IANX,UAAA,CAQE,oBAAC,YAAD;KAAY,WAAU;KAAiB,eAAY;IAAQ,CAAA,GAC1D,QAAQ,UACH;;EACL;;AAET"}

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

@@ -0,0 +1,18 @@
+import { AppSidebar, Brand } from "./app-sidebar.js";
+import { BottomNav } from "./bottom-nav.js";
+import { DebugPanelSlot } from "./debug-panel-slot.js";
+import { DebugPanel, DebugTreeNode } from "./debug-panel.js";
+import { GlobalSearch } from "./global-search.js";
+import { ImpersonationBanner } from "./impersonation-banner.js";
+import { KeyboardShortcuts } from "./keyboard-shortcuts.js";
+import { LazyPlaceholder } from "./lazy-placeholder.js";
+import { LocaleSubMenu, LocaleSwitcher, TopbarLocaleSwitcher } from "./locale-switcher.js";
+import { PwaManager, PwaMenuItems, installPwa } from "./pwa.js";
+import { ShortcutKeys } from "./shortcut-keys.js";
+import { ShortcutsOverlay } from "./shortcuts-overlay.js";
+import { Slot } from "./slot.js";
+import { TenantMenu } from "./tenant-menu.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { Breadcrumbs, Topbar } from "./topbar.js";
+import { SignInLink, UserAvatar, UserMenu } from "./user-menu.js";
+export { AppSidebar, BottomNav, Brand, Breadcrumbs, DebugPanel, DebugPanelSlot, DebugTreeNode, GlobalSearch, ImpersonationBanner, KeyboardShortcuts, LazyPlaceholder, LocaleSubMenu, LocaleSwitcher, PwaManager, PwaMenuItems, ShortcutKeys, ShortcutsOverlay, SignInLink, Slot, TenantMenu, ThemeToggle, Topbar, TopbarLocaleSwitcher, UserAvatar, UserMenu, installPwa };

package/dist/components/panel/keyboard-shortcuts.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/panel/keyboard-shortcuts.d.ts
+/**
+ * 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).
+ */
+export declare function KeyboardShortcuts(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=keyboard-shortcuts.d.ts.map

package/dist/components/panel/keyboard-shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcuts.d.ts","names":[],"sources":["../../../src/components/panel/keyboard-shortcuts.tsx"],"mappings":";;;;;;;wBAqCgB,qCAAiB,IAAA"}