@burdenoff/fe-libs 2026.510.126

package/dist/chrome/ProductSideNav.js

@@ -0,0 +1,51 @@
+import { useNavRegistryStore as e } from "../shared/hooks/shell/useNavRegistry.js";
+import { useShellUi as t } from "../shared/providers/shell/ShellUiProvider.js";
+import { SideNavigation as n } from "./SideNavigation.js";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useLocation as o, useNavigate as s } from "react-router-dom";
+//#region src/chrome/ProductSideNav.tsx
+function c({ logo: c, appName: l, groupOrder: u, groupLabels: d, mobileActions: f, customHeader: p, homeAriaLabel: m = "Go to dashboard", collapseLabel: h = "Collapse" }) {
+	let g = s(), _ = o(), { sidebarCollapsed: v, toggleSidebar: y } = t(), b = e((e) => e.items), x = r(() => b.filter((e) => e.visible !== !1).sort((e, t) => (e.order ?? 999) - (t.order ?? 999)), [b]), S = (e) => {
+		g(e);
+	}, C = () => {
+		g("/");
+	}, w = /* @__PURE__ */ a("div", {
+		className: "flex items-center gap-icon-gap cursor-pointer",
+		onClick: C,
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), C());
+		},
+		"aria-label": m,
+		children: [/* @__PURE__ */ i("div", {
+			className: "w-8 h-8 bg-action-primary-bg rounded-md flex items-center justify-center flex-shrink-0",
+			children: /* @__PURE__ */ i("span", {
+				className: "text-action-primary-text font-bold text-sm",
+				children: c
+			})
+		}), !v && /* @__PURE__ */ i("h1", {
+			className: "text-heading-h4 font-semibold text-text-primary",
+			children: l
+		})]
+	});
+	return /* @__PURE__ */ i("div", {
+		"data-tour": "sidenav",
+		className: "h-full",
+		children: /* @__PURE__ */ i(n, {
+			items: x,
+			currentPath: _.pathname,
+			collapsed: v,
+			groupOrder: u,
+			groupLabels: d,
+			onItemClick: S,
+			onToggleCollapse: y,
+			collapseLabel: h,
+			mobileActions: f,
+			header: p ?? w
+		})
+	});
+}
+//#endregion
+export { c as ProductSideNav };

package/dist/chrome/ProductSwitcher.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+export interface Product {
+    id: string;
+    name: string;
+    url: string;
+    icon?: string;
+    color?: string;
+}
+export interface ProductSwitcherProps {
+    products: Product[];
+    currentProductId?: string;
+    onProductChange?: (product: Product) => void;
+    /** Show as icon only (for small screens) */
+    compact?: boolean;
+}
+/**
+ * ProductSwitcher Component
+ *
+ * Allows switching between different products:
+ * - FluidGrids
+ * - VibeControls
+ * - BigConsole
+ * - Botlit
+ * etc.
+ *
+ * On small screens (when compact=true), shows as icon with popup
+ */
+export declare const ProductSwitcher: FC<ProductSwitcherProps>;
+//# sourceMappingURL=ProductSwitcher.d.ts.map

package/dist/chrome/ProductSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitcher.d.ts","sourceRoot":"","sources":["../../src/chrome/ProductSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwIpD,CAAC"}

package/dist/chrome/ProductSwitcher.js

@@ -0,0 +1,86 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/chrome/ProductSwitcher.tsx
+var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1 }) => {
+	let [l, u] = n(!1), d = t(null), f = a.find((e) => e.id === o) || a[0];
+	e(() => {
+		let e = (e) => {
+			d.current && !d.current.contains(e.target) && u(!1);
+		};
+		if (l) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [l]);
+	let p = (e) => {
+		s ? s(e) : window.location.href = e.url, u(!1);
+	};
+	return /* @__PURE__ */ i("div", {
+		className: "relative",
+		ref: d,
+		children: [/* @__PURE__ */ i("button", {
+			onClick: () => u(!l),
+			className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${l ? "bg-action-ghost-bg-hover" : ""}`,
+			"aria-label": "Switch product",
+			"aria-expanded": l,
+			children: [
+				/* @__PURE__ */ r("div", {
+					className: "w-6 h-6 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-xs",
+					style: { backgroundColor: f?.color || "#3b82f6" },
+					children: f?.icon || f?.name.charAt(0)
+				}),
+				!c && /* @__PURE__ */ r("span", {
+					className: "text-body-sm font-medium text-text-primary",
+					children: f?.name
+				}),
+				!c && /* @__PURE__ */ r("svg", {
+					className: `w-4 h-4 text-text-secondary transition-transform ${l ? "rotate-180" : ""}`,
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ r("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				})
+			]
+		}), l && /* @__PURE__ */ i("div", {
+			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-64 max-w-64 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50 py-2",
+			children: [/* @__PURE__ */ r("div", {
+				className: "px-4 py-2 border-b border-border-subtle",
+				children: /* @__PURE__ */ r("p", {
+					className: "text-body-xs font-semibold text-text-secondary uppercase",
+					children: "Switch Product"
+				})
+			}), /* @__PURE__ */ r("div", {
+				className: "py-1 max-h-96 overflow-y-auto",
+				children: a.map((e) => /* @__PURE__ */ i("button", {
+					onClick: () => p(e),
+					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.id === o ? "bg-action-ghost-bg-hover text-text-primary font-medium" : "text-text-primary hover:bg-action-ghost-bg-hover"}`,
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "w-8 h-8 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm",
+							style: { backgroundColor: e.color || "#3b82f6" },
+							children: e.icon || e.name.charAt(0)
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "flex-1 text-left",
+							children: e.name
+						}),
+						e.id === o && /* @__PURE__ */ r("svg", {
+							className: "w-5 h-5 text-action-primary-text",
+							fill: "currentColor",
+							viewBox: "0 0 20 20",
+							children: /* @__PURE__ */ r("path", {
+								fillRule: "evenodd",
+								d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+								clipRule: "evenodd"
+							})
+						})
+					]
+				}, e.id))
+			})]
+		})]
+	});
+};
+//#endregion
+export { a as ProductSwitcher };

package/dist/chrome/ProfileSwitcher.d.ts

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+export interface Account {
+    id: string;
+    email: string;
+    name: string;
+    firstName?: string;
+    lastName?: string;
+    avatar?: string;
+    isActive?: boolean;
+}
+export interface ProfileSwitcherProps {
+    user?: {
+        firstName: string;
+        lastName: string;
+        email?: string;
+        avatar?: string;
+    };
+    /** All available accounts (including active) */
+    accounts?: Account[];
+    /** ID of currently active account */
+    activeAccountId?: string;
+    /** Navigate to profile page */
+    onViewProfile?: () => void;
+    /** Logout current user */
+    onLogout?: () => void;
+    /** Switch to a different account */
+    onSwitchAccount?: (account: Account) => void;
+    /** Add a new account */
+    onAddAccount?: () => void;
+    /** Remove an account */
+    onRemoveAccount?: (accountId: string) => void;
+    /** Show as icon only (for small screens) */
+    compact?: boolean;
+}
+/**
+ * ProfileSwitcher Component (Google-style)
+ *
+ * Single account mode:
+ * - Large avatar, greeting, View Profile, Add/Sign out buttons
+ *
+ * Multi-account mode:
+ * - Active account info, View Profile
+ * - "SWITCH ACCOUNT" section with other accounts
+ * - Add/Sign out buttons
+ *
+ * Scrollable when 3+ accounts
+ */
+export declare const ProfileSwitcher: FC<ProfileSwitcherProps>;
+//# sourceMappingURL=ProfileSwitcher.d.ts.map

package/dist/chrome/ProfileSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileSwitcher.d.ts","sourceRoot":"","sources":["../../src/chrome/ProfileSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkTpD,CAAC"}

package/dist/chrome/ProfileSwitcher.js

@@ -0,0 +1,226 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/chrome/ProfileSwitcher.tsx
+var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLogout: u, onSwitchAccount: d, onAddAccount: f, onRemoveAccount: p, compact: m = !1 }) => {
+	let [h, g] = n(!1), _ = t(null);
+	if (e(() => {
+		let e = (e) => {
+			_.current && !_.current.contains(e.target) && g(!1);
+		};
+		if (h) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [h]), !o) return null;
+	let v = `${o.firstName.charAt(0)}${o.lastName.charAt(0)}`.toUpperCase(), y = s.length > 1, b = s.find((e) => e.id === c), x = s.filter((e) => e.id !== c);
+	return /* @__PURE__ */ a("div", {
+		className: "relative",
+		ref: _,
+		children: [/* @__PURE__ */ a("button", {
+			onClick: () => g(!h),
+			className: `flex items-center gap-2 p-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${h ? "bg-action-ghost-bg-hover" : ""}`,
+			"aria-label": "User menu",
+			"aria-expanded": h,
+			children: [
+				/* @__PURE__ */ i("div", {
+					className: "w-8 h-8 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
+					children: o.avatar ? /* @__PURE__ */ i("img", {
+						src: o.avatar,
+						alt: `${o.firstName} ${o.lastName}`,
+						className: "w-full h-full rounded-full object-cover"
+					}) : /* @__PURE__ */ i("span", {
+						className: "text-action-primary-text font-semibold text-sm",
+						children: v
+					})
+				}),
+				!m && /* @__PURE__ */ a("span", {
+					className: "text-body-sm font-medium text-text-primary",
+					children: [
+						o.firstName,
+						" ",
+						o.lastName
+					]
+				}),
+				!m && y && /* @__PURE__ */ i("span", {
+					className: "text-xs bg-action-primary-bg text-action-primary-text rounded-full w-5 h-5 flex items-center justify-center font-semibold",
+					children: s.length
+				}),
+				!m && /* @__PURE__ */ i("svg", {
+					className: `w-4 h-4 text-text-secondary transition-transform ${h ? "rotate-180" : ""}`,
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ i("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				})
+			]
+		}), h && /* @__PURE__ */ a("div", {
+			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-72 max-w-72 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50",
+			children: [
+				!y && /* @__PURE__ */ a("div", {
+					className: "px-6 py-4 text-center border-b border-border-subtle",
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: "w-20 h-20 mx-auto mb-3 rounded-full bg-action-primary-bg flex items-center justify-center",
+							children: o.avatar ? /* @__PURE__ */ i("img", {
+								src: o.avatar,
+								alt: o.firstName,
+								className: "w-full h-full rounded-full object-cover"
+							}) : /* @__PURE__ */ i("span", {
+								className: "text-action-primary-text font-bold text-2xl",
+								children: v
+							})
+						}),
+						/* @__PURE__ */ a("h3", {
+							className: "text-h5 font-semibold text-text-primary mb-1",
+							children: [
+								"Hi, ",
+								o.firstName,
+								"!"
+							]
+						}),
+						o.email && /* @__PURE__ */ i("p", {
+							className: "text-body-sm text-text-secondary truncate",
+							children: o.email
+						})
+					]
+				}),
+				y && b && /* @__PURE__ */ a("div", {
+					className: "px-4 py-3 border-b border-border-subtle",
+					children: [/* @__PURE__ */ a("p", {
+						className: "text-body-sm font-semibold text-text-primary",
+						children: [
+							b.firstName,
+							" ",
+							b.lastName
+						]
+					}), /* @__PURE__ */ i("p", {
+						className: "text-caption text-text-tertiary mt-0.5 truncate",
+						children: b.email
+					})]
+				}),
+				l && /* @__PURE__ */ i("div", {
+					className: "px-4 py-2",
+					children: /* @__PURE__ */ i("button", {
+						onClick: () => {
+							l(), g(!1);
+						},
+						className: "w-full px-4 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+						children: "View Profile"
+					})
+				}),
+				y && x.length > 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+					className: "px-4 pt-2 pb-1",
+					children: /* @__PURE__ */ i("p", {
+						className: "text-caption font-semibold text-text-tertiary uppercase tracking-wide",
+						children: "Switch Account"
+					})
+				}), /* @__PURE__ */ i("div", {
+					className: `${x.length >= 3 ? "max-h-48 overflow-y-auto" : ""}`,
+					children: x.map((e) => {
+						let t = `${e.firstName?.charAt(0) || ""}${e.lastName?.charAt(0) || ""}`.toUpperCase();
+						return /* @__PURE__ */ i("div", {
+							className: "px-4 py-2 hover:bg-action-ghost-bg-hover transition-colors group",
+							children: /* @__PURE__ */ a("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ i("div", {
+										className: "w-10 h-10 rounded-full bg-action-primary-bg flex items-center justify-center flex-shrink-0",
+										children: e.avatar ? /* @__PURE__ */ i("img", {
+											src: e.avatar,
+											alt: e.name,
+											className: "w-full h-full rounded-full object-cover"
+										}) : /* @__PURE__ */ i("span", {
+											className: "text-action-primary-text font-semibold text-sm",
+											children: t
+										})
+									}),
+									/* @__PURE__ */ a("button", {
+										onClick: () => {
+											d && (d(e), g(!1));
+										},
+										className: "flex-1 text-left min-w-0",
+										children: [/* @__PURE__ */ a("p", {
+											className: "text-body-sm font-medium text-text-primary truncate",
+											children: [
+												e.firstName,
+												" ",
+												e.lastName
+											]
+										}), /* @__PURE__ */ i("p", {
+											className: "text-caption text-text-tertiary truncate",
+											children: e.email
+										})]
+									}),
+									p && /* @__PURE__ */ i("button", {
+										onClick: (t) => {
+											t.stopPropagation(), p(e.id);
+										},
+										className: "w-6 h-6 flex items-center justify-center rounded-full hover:bg-status-error-bg/20 text-text-tertiary hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
+										"aria-label": "Remove account",
+										children: /* @__PURE__ */ i("svg", {
+											className: "w-4 h-4",
+											fill: "none",
+											stroke: "currentColor",
+											viewBox: "0 0 24 24",
+											children: /* @__PURE__ */ i("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												d: "M6 18L18 6M6 6l12 12"
+											})
+										})
+									})
+								]
+							})
+						}, e.id);
+					})
+				})] }),
+				/* @__PURE__ */ i("div", {
+					className: "px-4 py-3 border-t border-border-subtle",
+					children: /* @__PURE__ */ a("div", {
+						className: "grid grid-cols-2 gap-2",
+						children: [f && /* @__PURE__ */ a("button", {
+							onClick: () => {
+								f(), g(!1);
+							},
+							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+							children: [/* @__PURE__ */ i("svg", {
+								className: "w-4 h-4",
+								fill: "none",
+								stroke: "currentColor",
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ i("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M12 4v16m8-8H4"
+								})
+							}), /* @__PURE__ */ i("span", { children: "Add account" })]
+						}), u && /* @__PURE__ */ a("button", {
+							onClick: () => {
+								u(), g(!1);
+							},
+							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+							children: [/* @__PURE__ */ i("svg", {
+								className: "w-4 h-4",
+								fill: "none",
+								stroke: "currentColor",
+								viewBox: "0 0 24 24",
+								children: /* @__PURE__ */ i("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+								})
+							}), /* @__PURE__ */ i("span", { children: "Sign out" })]
+						})]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { o as ProfileSwitcher };

package/dist/chrome/ShortcutHelpDialog.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { KeyboardShortcut } from '../shared/keyboard/types';
+export interface ShortcutHelpDialogProps {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Callback when dialog should close */
+    onClose: () => void;
+    /** List of keyboard shortcuts to display */
+    shortcuts: KeyboardShortcut[];
+}
+/**
+ * ShortcutHelpDialog Component
+ *
+ * A modal dialog that displays all available keyboard shortcuts grouped by category.
+ * Automatically detects the user's platform and shows appropriate key labels
+ * (Cmd for Mac, Ctrl for Windows/Linux).
+ *
+ * @example
+ * ```tsx
+ * const shortcuts = [
+ *   { id: 'search', keys: 'mod+k', description: 'Open Search', category: 'Navigation' },
+ *   { id: 'save', keys: 'mod+s', description: 'Save', category: 'Actions' },
+ * ];
+ *
+ * <ShortcutHelpDialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   shortcuts={shortcuts}
+ * />
+ * ```
+ */
+export declare const ShortcutHelpDialog: FC<ShortcutHelpDialogProps>;
+//# sourceMappingURL=ShortcutHelpDialog.d.ts.map

package/dist/chrome/ShortcutHelpDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutHelpDialog.d.ts","sourceRoot":"","sources":["../../src/chrome/ShortcutHelpDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAqB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAuK1D,CAAC"}

package/dist/chrome/ShortcutHelpDialog.js

@@ -0,0 +1,122 @@
+import { detectPlatform as e, getDisplayKeysForPlatform as t } from "../shared/keyboard/utils.js";
+import { useEffect as n, useRef as r } from "react";
+import { X as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/chrome/ShortcutHelpDialog.tsx
+var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
+	let u = r(null), d = r(c);
+	if (n(() => {
+		d.current = c;
+	}), n(() => {
+		if (!s) return;
+		let e = setTimeout(() => {
+			let e = (e) => {
+				(e.key === "Escape" || e.key === "?") && (e.preventDefault(), e.stopPropagation(), d.current());
+			};
+			u.current = e, document.addEventListener("keydown", e);
+		}, 100);
+		return () => {
+			clearTimeout(e), u.current &&= (document.removeEventListener("keydown", u.current), null);
+		};
+	}, [s]), n(() => {
+		if (s) return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = "";
+		};
+	}, [s]), !s) return null;
+	let f = l.reduce((e, t) => {
+		let n = t.category || "Other";
+		return e[n] || (e[n] = []), e[n].push(t), e;
+	}, {}), p = Object.keys(f).sort((e, t) => {
+		let n = {
+			Navigation: 0,
+			Actions: 1,
+			UI: 2
+		}, r = n[e] ?? 99, i = n[t] ?? 99;
+		return r === i ? e.localeCompare(t) : r - i;
+	}), m = e(), h = m === "mac" ? "macOS" : m === "windows" ? "Windows" : "Linux";
+	return /* @__PURE__ */ o("div", {
+		className: "fixed inset-0 z-[9999] flex items-center justify-center animate-in fade-in duration-200",
+		children: [/* @__PURE__ */ a("div", {
+			className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+			onClick: c,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ o("div", {
+			className: "relative bg-bg-surface border border-border-default rounded-lg shadow-2xl max-w-2xl w-full mx-4 max-h-[85dvh] flex flex-col animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-4 duration-300",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "shortcut-dialog-title",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "flex items-center justify-between p-6 border-b border-border-subtle",
+					children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h2", {
+						id: "shortcut-dialog-title",
+						className: "text-lg font-semibold text-text-primary",
+						children: "Keyboard Shortcuts"
+					}), /* @__PURE__ */ a("p", {
+						className: "text-text-secondary text-sm mt-1",
+						children: "Quickly navigate and perform actions using your keyboard"
+					})] }), /* @__PURE__ */ a("button", {
+						onClick: c,
+						className: "p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-secondary transition-colors",
+						"aria-label": "Close",
+						children: /* @__PURE__ */ a(i, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "flex-1 overflow-y-auto p-6",
+					children: /* @__PURE__ */ a("div", {
+						className: "grid grid-cols-1 md:grid-cols-2 gap-8",
+						children: p.map((e) => /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h3", {
+							className: "text-sm font-semibold text-text-primary mb-3",
+							children: e
+						}), /* @__PURE__ */ a("div", {
+							className: "space-y-1",
+							children: f[e].map((e, n) => /* @__PURE__ */ o("div", {
+								className: "flex items-center justify-between py-2 px-3 rounded-md hover:bg-action-ghost-bg-hover transition-all duration-200 hover:translate-x-0.5",
+								style: { animationDelay: `${n * 30}ms` },
+								children: [/* @__PURE__ */ a("span", {
+									className: "text-text-primary text-sm",
+									children: e.description
+								}), /* @__PURE__ */ a("kbd", {
+									className: "ml-4 px-2.5 py-1 bg-bg-elevated border border-border-default rounded text-text-secondary text-xs font-mono whitespace-nowrap transition-all duration-200 hover:scale-105",
+									children: t(e.keys)
+								})]
+							}, e.id))
+						})] }, e))
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "p-4 border-t border-border-subtle bg-bg-sunken/50 rounded-b-lg",
+					children: /* @__PURE__ */ o("div", {
+						className: "flex items-center justify-between text-xs",
+						children: [/* @__PURE__ */ o("p", {
+							className: "text-text-tertiary",
+							children: [h, " shortcuts"]
+						}), /* @__PURE__ */ o("p", {
+							className: "text-text-secondary",
+							children: [
+								"Press",
+								" ",
+								/* @__PURE__ */ a("kbd", {
+									className: "px-1.5 py-0.5 bg-bg-surface border border-border-default rounded font-mono",
+									children: "?"
+								}),
+								" ",
+								"or",
+								" ",
+								/* @__PURE__ */ a("kbd", {
+									className: "px-1.5 py-0.5 bg-bg-surface border border-border-default rounded font-mono",
+									children: "Esc"
+								}),
+								" ",
+								"to close"
+							]
+						})]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { s as ShortcutHelpDialog };