@freighttech/ui 0.13.18

package/dist/backend/ProfileDropdown.js

@@ -0,0 +1,341 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { User, LogOut, Bell, Moon, Sun, Globe, Key, Check } from "lucide-react";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
+import { locales } from "@open-mercato/shared/lib/i18n/config";
+import { useTheme } from "@freighttech/ui/theme";
+import { Button } from "../primitives/button.js";
+import { Avatar } from "../primitives-v2/Avatar.js";
+import { useInjectedMenuItems } from "./injection/useInjectedMenuItems.js";
+import { mergeMenuItems } from "./injection/mergeMenuItems.js";
+import { resolveInjectedIcon } from "./injection/resolveInjectedIcon.js";
+import { InjectionSpot } from "./injection/InjectionSpot.js";
+import { BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID } from "./injection/spotIds.js";
+const localeLabels = {
+  en: "English",
+  de: "Deutsch",
+  es: "Espa\xF1ol",
+  pl: "Polski"
+};
+function ProfileDropdown({
+  email,
+  displayName,
+  changePasswordHref = "/backend/profile/change-password",
+  notificationsHref
+}) {
+  const t = useT();
+  const currentLocale = useLocale();
+  const { resolvedTheme, setTheme } = useTheme();
+  const [open, setOpen] = React.useState(false);
+  const [languageOpen, setLanguageOpen] = React.useState(false);
+  const [mounted, setMounted] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const { items: injectedItems } = useInjectedMenuItems("menu:topbar:profile-dropdown");
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const isDark = resolvedTheme === "dark";
+  React.useEffect(() => {
+    if (!open) return;
+    function handleClick(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setOpen(false);
+        setLanguageOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        if (languageOpen) {
+          setLanguageOpen(false);
+        } else {
+          setOpen(false);
+          buttonRef.current?.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, languageOpen]);
+  const handleThemeToggle = () => {
+    setTheme(isDark ? "light" : "dark");
+  };
+  const handleLocaleChange = async (locale) => {
+    try {
+      await fetch("/api/auth/locale", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ locale })
+      });
+      window.location.reload();
+    } catch {
+    }
+  };
+  const menuItemClass = "w-full text-left text-sm cursor-pointer px-3 py-2 rounded hover:bg-accent inline-flex items-center gap-2.5 outline-none focus-visible:ring-1 focus-visible:ring-ring";
+  const resolveMenuLabel = React.useCallback(
+    (item) => {
+      if (item.labelKey && item.label) return t(item.labelKey, item.label);
+      if (item.labelKey) return t(item.labelKey, item.id);
+      if (item.label && item.label.includes(".")) return t(item.label, item.id);
+      return item.label ?? item.id;
+    },
+    [t]
+  );
+  const builtInMenuItems = React.useMemo(
+    () => {
+      const items = [{ id: "change-password" }];
+      if (notificationsHref) items.push({ id: "notifications" });
+      items.push({ id: "theme-toggle", separator: true }, { id: "language" }, { id: "sign-out", separator: true });
+      return items;
+    },
+    [notificationsHref]
+  );
+  const mergedMenuItems = React.useMemo(
+    () => mergeMenuItems(builtInMenuItems, injectedItems),
+    [builtInMenuItems, injectedItems]
+  );
+  const injectionContext = React.useMemo(
+    () => ({
+      email,
+      displayName,
+      locale: currentLocale
+    }),
+    [currentLocale, displayName, email]
+  );
+  const renderInjectedItem = React.useCallback(
+    (item) => {
+      const label = resolveMenuLabel(item);
+      const icon = resolveInjectedIcon(item.icon);
+      if (item.href) {
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: item.href,
+            className: menuItemClass,
+            role: "menuitem",
+            "data-menu-item-id": item.id,
+            onClick: () => setOpen(false),
+            children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { children: label })
+            ]
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "w-full justify-start",
+          role: "menuitem",
+          "data-menu-item-id": item.id,
+          onClick: () => {
+            item.onClick?.();
+            setOpen(false);
+          },
+          children: [
+            icon,
+            /* @__PURE__ */ jsx("span", { children: label })
+          ]
+        },
+        item.id
+      );
+    },
+    [menuItemClass, resolveMenuLabel]
+  );
+  const renderBuiltInItem = React.useCallback(
+    (id) => {
+      if (id === "change-password") {
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: changePasswordHref,
+            className: menuItemClass,
+            role: "menuitem",
+            onClick: () => setOpen(false),
+            children: [
+              /* @__PURE__ */ jsx(Key, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: t("ui.profileMenu.changePassword", "Change Password") })
+            ]
+          },
+          id
+        );
+      }
+      if (id === "notifications" && notificationsHref) {
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: notificationsHref,
+            className: menuItemClass,
+            role: "menuitem",
+            onClick: () => setOpen(false),
+            children: [
+              /* @__PURE__ */ jsx(Bell, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: t("ui.profileMenu.notifications", "Notification Preferences") })
+            ]
+          },
+          id
+        );
+      }
+      if (id === "theme-toggle") {
+        return mounted ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-between",
+            role: "menuitem",
+            onClick: handleThemeToggle,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2.5", children: [
+                isDark ? /* @__PURE__ */ jsx(Moon, { className: "size-4" }) : /* @__PURE__ */ jsx(Sun, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { children: t("ui.profileMenu.theme", "Dark Mode") })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: `w-8 h-4 rounded-full transition-colors ${isDark ? "bg-primary" : "bg-muted"} relative`, children: /* @__PURE__ */ jsx("div", { className: `absolute top-0.5 w-3 h-3 rounded-full bg-background shadow transition-transform ${isDark ? "translate-x-4" : "translate-x-0.5"}` }) })
+            ]
+          },
+          id
+        ) : null;
+      }
+      if (id === "language") {
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "w-full justify-between",
+              role: "menuitem",
+              onClick: () => setLanguageOpen(!languageOpen),
+              "aria-expanded": languageOpen,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsx(Globe, { className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { children: t("ui.profileMenu.language", "Language") })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: localeLabels[currentLocale] })
+              ]
+            }
+          ),
+          languageOpen && /* @__PURE__ */ jsx("div", { className: "mt-1 ml-6 space-y-0.5 border-l pl-2", children: locales.map((locale) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: `w-full justify-start gap-2 ${locale === currentLocale ? "text-primary font-medium" : ""}`,
+              onClick: () => handleLocaleChange(locale),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: localeLabels[locale] }),
+                locale === currentLocale && /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+              ]
+            },
+            locale
+          )) })
+        ] }, id);
+      }
+      if (id === "sign-out") {
+        return /* @__PURE__ */ jsx("form", { action: "/api/auth/logout", method: "POST", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-start",
+            type: "submit",
+            role: "menuitem",
+            children: [
+              /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: t("ui.userMenu.logout", "Sign Out") })
+            ]
+          }
+        ) }, id);
+      }
+      return null;
+    },
+    [
+      changePasswordHref,
+      currentLocale,
+      handleThemeToggle,
+      isDark,
+      languageOpen,
+      menuItemClass,
+      mounted,
+      notificationsHref,
+      t
+    ]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: () => setOpen(!open),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "data-testid": "profile-dropdown-trigger",
+        title: email || t("ui.userMenu.userFallback", "User"),
+        className: "inline-flex cursor-pointer rounded-full outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-2 focus-visible:ring-offset-topbar-v2-bg",
+        children: /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            size: "sm",
+            name: displayName || email,
+            icon: /* @__PURE__ */ jsx(User, {}),
+            className: "border border-topbar-v2-field-border bg-topbar-v2-avatar-bg text-topbar-v2-avatar-text"
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menuRef,
+        className: "absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-50",
+        role: "menu",
+        "data-testid": "profile-dropdown",
+        children: [
+          (displayName || email) && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 border-b mb-1", children: [
+            displayName && /* @__PURE__ */ jsxs("div", { className: "font-medium text-sm flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(User, { className: "size-4" }),
+              displayName
+            ] }),
+            displayName && email && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5 ml-6", children: email }),
+            !displayName && email && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              t("ui.userMenu.loggedInAs", "Logged in as:"),
+              " ",
+              email
+            ] })
+          ] }),
+          mergedMenuItems.map((item) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            item.separator ? /* @__PURE__ */ jsx("div", { className: "my-1 border-t" }) : null,
+            item.source === "injected" ? item.href || item.onClick || item.label || item.labelKey ? renderInjectedItem(item) : null : renderBuiltInItem(item.id)
+          ] }, item.id)),
+          /* @__PURE__ */ jsx(
+            InjectionSpot,
+            {
+              spotId: BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID,
+              context: injectionContext
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ProfileDropdown
+};
+//# sourceMappingURL=ProfileDropdown.js.map

package/dist/backend/ProfileDropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/ProfileDropdown.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { User, LogOut, Bell, Moon, Sun, Globe, Key, Check } from 'lucide-react'\nimport { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'\nimport { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'\nimport { useTheme } from '@freighttech/ui/theme'\nimport { Button } from '../primitives/button'\nimport { Avatar } from '../primitives-v2/Avatar'\nimport { useInjectedMenuItems } from './injection/useInjectedMenuItems'\nimport { mergeMenuItems, type MergedMenuItem } from './injection/mergeMenuItems'\nimport { resolveInjectedIcon } from './injection/resolveInjectedIcon'\nimport { InjectionSpot } from './injection/InjectionSpot'\nimport { BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID } from './injection/spotIds'\n\nexport type ProfileDropdownProps = {\n  email?: string\n  displayName?: string\n  changePasswordHref?: string\n  notificationsHref?: string\n}\n\nconst localeLabels: Record<Locale, string> = {\n  en: 'English',\n  de: 'Deutsch',\n  es: 'Espa\u00F1ol',\n  pl: 'Polski',\n}\n\nexport function ProfileDropdown({\n  email,\n  displayName,\n  changePasswordHref = '/backend/profile/change-password',\n  notificationsHref,\n}: ProfileDropdownProps) {\n  const t = useT()\n  const currentLocale = useLocale()\n  const { resolvedTheme, setTheme } = useTheme()\n  const [open, setOpen] = React.useState(false)\n  const [languageOpen, setLanguageOpen] = React.useState(false)\n  const [mounted, setMounted] = React.useState(false)\n  const buttonRef = React.useRef<HTMLButtonElement>(null)\n  const menuRef = React.useRef<HTMLDivElement>(null)\n  const { items: injectedItems } = useInjectedMenuItems('menu:topbar:profile-dropdown')\n\n  React.useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const isDark = resolvedTheme === 'dark'\n\n  // Close on click outside\n  React.useEffect(() => {\n    if (!open) return\n    function handleClick(event: MouseEvent) {\n      if (\n        menuRef.current &&\n        !menuRef.current.contains(event.target as Node) &&\n        buttonRef.current &&\n        !buttonRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false)\n        setLanguageOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [open])\n\n  // Close on Escape\n  React.useEffect(() => {\n    if (!open) return\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        if (languageOpen) {\n          setLanguageOpen(false)\n        } else {\n          setOpen(false)\n          buttonRef.current?.focus()\n        }\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open, languageOpen])\n\n  const handleThemeToggle = () => {\n    setTheme(isDark ? 'light' : 'dark')\n  }\n\n  const handleLocaleChange = async (locale: Locale) => {\n    try {\n      await fetch('/api/auth/locale', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ locale }),\n      })\n      window.location.reload()\n    } catch {}\n  }\n\n  const menuItemClass =\n    'w-full text-left text-sm cursor-pointer px-3 py-2 rounded hover:bg-accent inline-flex items-center gap-2.5 outline-none focus-visible:ring-1 focus-visible:ring-ring'\n\n  const resolveMenuLabel = React.useCallback(\n    (item: Pick<MergedMenuItem, 'id' | 'label' | 'labelKey'>): string => {\n      if (item.labelKey && item.label) return t(item.labelKey, item.label)\n      if (item.labelKey) return t(item.labelKey, item.id)\n      if (item.label && item.label.includes('.')) return t(item.label, item.id)\n      return item.label ?? item.id\n    },\n    [t],\n  )\n\n  const builtInMenuItems = React.useMemo(\n    () => {\n      const items: Array<{ id: string; separator?: boolean }> = [{ id: 'change-password' }]\n      if (notificationsHref) items.push({ id: 'notifications' })\n      items.push({ id: 'theme-toggle', separator: true }, { id: 'language' }, { id: 'sign-out', separator: true })\n      return items\n    },\n    [notificationsHref],\n  )\n\n  const mergedMenuItems = React.useMemo(\n    () => mergeMenuItems(builtInMenuItems, injectedItems),\n    [builtInMenuItems, injectedItems],\n  )\n  const injectionContext = React.useMemo(\n    () => ({\n      email,\n      displayName,\n      locale: currentLocale,\n    }),\n    [currentLocale, displayName, email],\n  )\n\n  const renderInjectedItem = React.useCallback(\n    (item: MergedMenuItem) => {\n      const label = resolveMenuLabel(item)\n      const icon = resolveInjectedIcon(item.icon)\n      if (item.href) {\n        return (\n          <Link\n            key={item.id}\n            href={item.href}\n            className={menuItemClass}\n            role=\"menuitem\"\n            data-menu-item-id={item.id}\n            onClick={() => setOpen(false)}\n          >\n            {icon}\n            <span>{label}</span>\n          </Link>\n        )\n      }\n      return (\n        <Button\n          key={item.id}\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"w-full justify-start\"\n          role=\"menuitem\"\n          data-menu-item-id={item.id}\n          onClick={() => {\n            item.onClick?.()\n            setOpen(false)\n          }}\n        >\n          {icon}\n          <span>{label}</span>\n        </Button>\n      )\n    },\n    [menuItemClass, resolveMenuLabel],\n  )\n\n  const renderBuiltInItem = React.useCallback(\n    (id: string) => {\n      if (id === 'change-password') {\n        return (\n          <Link\n            key={id}\n            href={changePasswordHref}\n            className={menuItemClass}\n            role=\"menuitem\"\n            onClick={() => setOpen(false)}\n          >\n            <Key className=\"size-4\" />\n            <span>{t('ui.profileMenu.changePassword', 'Change Password')}</span>\n          </Link>\n        )\n      }\n\n      if (id === 'notifications' && notificationsHref) {\n        return (\n          <Link\n            key={id}\n            href={notificationsHref}\n            className={menuItemClass}\n            role=\"menuitem\"\n            onClick={() => setOpen(false)}\n          >\n            <Bell className=\"size-4\" />\n            <span>{t('ui.profileMenu.notifications', 'Notification Preferences')}</span>\n          </Link>\n        )\n      }\n\n      if (id === 'theme-toggle') {\n        return mounted ? (\n          <Button\n            key={id}\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"w-full justify-between\"\n            role=\"menuitem\"\n            onClick={handleThemeToggle}\n          >\n            <span className=\"inline-flex items-center gap-2.5\">\n              {isDark ? <Moon className=\"size-4\" /> : <Sun className=\"size-4\" />}\n              <span>{t('ui.profileMenu.theme', 'Dark Mode')}</span>\n            </span>\n            <div className={`w-8 h-4 rounded-full transition-colors ${isDark ? 'bg-primary' : 'bg-muted'} relative`}>\n              <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-background shadow transition-transform ${isDark ? 'translate-x-4' : 'translate-x-0.5'}`} />\n            </div>\n          </Button>\n        ) : null\n      }\n\n      if (id === 'language') {\n        return (\n          <div key={id} className=\"relative\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-full justify-between\"\n              role=\"menuitem\"\n              onClick={() => setLanguageOpen(!languageOpen)}\n              aria-expanded={languageOpen}\n            >\n              <span className=\"inline-flex items-center gap-2.5\">\n                <Globe className=\"size-4\" />\n                <span>{t('ui.profileMenu.language', 'Language')}</span>\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                {localeLabels[currentLocale]}\n              </span>\n            </Button>\n            {languageOpen && (\n              <div className=\"mt-1 ml-6 space-y-0.5 border-l pl-2\">\n                {locales.map((locale) => (\n                  <Button\n                    key={locale}\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className={`w-full justify-start gap-2 ${locale === currentLocale ? 'text-primary font-medium' : ''}`}\n                    onClick={() => handleLocaleChange(locale)}\n                  >\n                    <span>{localeLabels[locale]}</span>\n                    {locale === currentLocale && <Check className=\"size-3.5\" />}\n                  </Button>\n                ))}\n              </div>\n            )}\n          </div>\n        )\n      }\n\n      if (id === 'sign-out') {\n        return (\n          <form key={id} action=\"/api/auth/logout\" method=\"POST\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-full justify-start\"\n              type=\"submit\"\n              role=\"menuitem\"\n            >\n              <LogOut className=\"size-4\" />\n              <span>{t('ui.userMenu.logout', 'Sign Out')}</span>\n            </Button>\n          </form>\n        )\n      }\n\n      return null\n    },\n    [\n      changePasswordHref,\n      currentLocale,\n      handleThemeToggle,\n      isDark,\n      languageOpen,\n      menuItemClass,\n      mounted,\n      notificationsHref,\n      t,\n    ],\n  )\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        data-testid=\"profile-dropdown-trigger\"\n        title={email || t('ui.userMenu.userFallback', 'User')}\n        className=\"inline-flex cursor-pointer rounded-full outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-2 focus-visible:ring-offset-topbar-v2-bg\"\n      >\n        <Avatar\n          size=\"sm\"\n          name={displayName || email}\n          icon={<User />}\n          className=\"border border-topbar-v2-field-border bg-topbar-v2-avatar-bg text-topbar-v2-avatar-text\"\n        />\n      </button>\n\n      {open && (\n        <div\n          ref={menuRef}\n          className=\"absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-50\"\n          role=\"menu\"\n          data-testid=\"profile-dropdown\"\n        >\n          {/* User info header */}\n          {(displayName || email) && (\n            <div className=\"px-3 py-2.5 border-b mb-1\">\n              {displayName && (\n                <div className=\"font-medium text-sm flex items-center gap-2\">\n                  <User className=\"size-4\" />\n                  {displayName}\n                </div>\n              )}\n              {displayName && email && (\n                <div className=\"text-xs text-muted-foreground mt-0.5 ml-6\">{email}</div>\n              )}\n              {!displayName && email && (\n                <div className=\"text-xs text-muted-foreground\">\n                  {t('ui.userMenu.loggedInAs', 'Logged in as:')} {email}\n                </div>\n              )}\n            </div>\n          )}\n\n          {mergedMenuItems.map((item) => (\n            <React.Fragment key={item.id}>\n              {item.separator ? <div className=\"my-1 border-t\" /> : null}\n              {item.source === 'injected'\n                ? (item.href || item.onClick || item.label || item.labelKey ? renderInjectedItem(item) : null)\n                : renderBuiltInItem(item.id)}\n            </React.Fragment>\n          ))}\n          <InjectionSpot\n            spotId={BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID}\n            context={injectionContext}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/RowActions.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { IconButton } from "../primitives/icon-button.js";
+import { Button } from "../primitives/button.js";
+function RowActions({ items = [] }) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const btnRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const hoverTimeoutRef = React.useRef(null);
+  const [anchorRect, setAnchorRect] = React.useState(null);
+  const [direction, setDirection] = React.useState("down");
+  const updatePosition = React.useCallback(() => {
+    if (!btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    setAnchorRect(rect);
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setDirection(spaceBelow < 180 && spaceAbove > spaceBelow ? "up" : "down");
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    updatePosition();
+    function onDocClick(e) {
+      const t2 = e.target;
+      if (menuRef.current && !menuRef.current.contains(t2) && btnRef.current && !btnRef.current.contains(t2)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        btnRef.current?.focus();
+      }
+    }
+    function onScrollOrResize() {
+      updatePosition();
+    }
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScrollOrResize, true);
+    window.addEventListener("resize", onScrollOrResize);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
+    };
+  }, [open, updatePosition]);
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  if (items.length === 0) return null;
+  const handlePointerEnter = (event) => {
+    if (event.pointerType === "touch") return;
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    setOpen(true);
+  };
+  const handlePointerLeave = (event) => {
+    if (event.pointerType === "touch") return;
+    hoverTimeoutRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 150);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative inline-block text-left",
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      children: [
+        /* @__PURE__ */ jsxs(
+          IconButton,
+          {
+            ref: btnRef,
+            type: "button",
+            variant: "ghost",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen((v) => !v);
+              requestAnimationFrame(updatePosition);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u22EF" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ui.rowActions.openActions", "Open actions") })
+            ]
+          }
+        ),
+        open && anchorRect && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: menuRef,
+              role: "menu",
+              className: "fixed w-44 max-w-[calc(100vw-1rem)] rounded-md border bg-background p-1 shadow focus:outline-none z-[1000]",
+              style: {
+                top: direction === "down" ? anchorRect.bottom + 8 : anchorRect.top - 8,
+                left: Math.min(anchorRect.right, window.innerWidth - 8),
+                transform: `translate(-100%, ${direction === "down" ? "0" : "-100%"})`
+              },
+              onPointerEnter: handlePointerEnter,
+              onPointerLeave: handlePointerLeave,
+              children: items.map((it, idx) => it.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: it.href,
+                  className: `block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent ${it.destructive ? "text-red-600" : ""}`,
+                  role: "menuitem",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setOpen(false);
+                  },
+                  children: it.label
+                },
+                idx
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: `w-full justify-start rounded-none font-normal ${it.destructive ? "text-red-600" : ""}`,
+                  role: "menuitem",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setOpen(false);
+                    it.onSelect?.();
+                  },
+                  children: it.label
+                },
+                idx
+              ))
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  RowActions
+};
+//# sourceMappingURL=RowActions.js.map

package/dist/backend/RowActions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/RowActions.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { IconButton } from '../primitives/icon-button'\nimport { Button } from '../primitives/button'\n\nexport type RowActionItem = {\n  id?: string\n  label: string\n  onSelect?: () => void\n  href?: string\n  destructive?: boolean\n}\n\nexport function RowActions({ items = [] }: { items?: RowActionItem[] }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const btnRef = React.useRef<HTMLButtonElement>(null)\n  const menuRef = React.useRef<HTMLDivElement>(null)\n  const hoverTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)\n  const [anchorRect, setAnchorRect] = React.useState<DOMRect | null>(null)\n  const [direction, setDirection] = React.useState<'down' | 'up'>('down')\n\n  const updatePosition = React.useCallback(() => {\n    if (!btnRef.current) return\n    const rect = btnRef.current.getBoundingClientRect()\n    setAnchorRect(rect)\n    // Decide whether to open up or down based on available viewport space\n    const spaceBelow = window.innerHeight - rect.bottom\n    const spaceAbove = rect.top\n    setDirection(spaceBelow < 180 && spaceAbove > spaceBelow ? 'up' : 'down')\n  }, [])\n\n  React.useEffect(() => {\n    if (!open) return\n    updatePosition()\n    function onDocClick(e: MouseEvent) {\n      const t = e.target as Node\n      if (menuRef.current && !menuRef.current.contains(t) && btnRef.current && !btnRef.current.contains(t)) {\n        setOpen(false)\n      }\n    }\n    function onKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        setOpen(false)\n        btnRef.current?.focus()\n      }\n    }\n    function onScrollOrResize() {\n      updatePosition()\n    }\n    document.addEventListener('mousedown', onDocClick)\n    document.addEventListener('keydown', onKey)\n    window.addEventListener('scroll', onScrollOrResize, true)\n    window.addEventListener('resize', onScrollOrResize)\n    return () => {\n      document.removeEventListener('mousedown', onDocClick)\n      document.removeEventListener('keydown', onKey)\n      window.removeEventListener('scroll', onScrollOrResize, true)\n      window.removeEventListener('resize', onScrollOrResize)\n    }\n  }, [open, updatePosition])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current)\n      }\n    }\n  }, [])\n\n  if (items.length === 0) return null\n\n  const handlePointerEnter = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current)\n    }\n    setOpen(true)\n  }\n\n  const handlePointerLeave = (event: React.PointerEvent) => {\n    if (event.pointerType === 'touch') return\n    hoverTimeoutRef.current = setTimeout(() => {\n      setOpen(false)\n    }, 150)\n  }\n\n  return (\n    <div\n      className=\"relative inline-block text-left\"\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      <IconButton\n        ref={btnRef}\n        type=\"button\"\n        variant=\"ghost\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); requestAnimationFrame(updatePosition) }}\n      >\n        <span aria-hidden=\"true\">\u22EF</span>\n        <span className=\"sr-only\">{t('ui.rowActions.openActions', 'Open actions')}</span>\n      </IconButton>\n      {open && anchorRect && createPortal(\n        <div\n          ref={menuRef}\n          role=\"menu\"\n          className=\"fixed w-44 max-w-[calc(100vw-1rem)] rounded-md border bg-background p-1 shadow focus:outline-none z-[1000]\"\n          style={{\n            top: direction === 'down' ? anchorRect.bottom + 8 : anchorRect.top - 8,\n            left: Math.min(anchorRect.right, window.innerWidth - 8),\n            transform: `translate(-100%, ${direction === 'down' ? '0' : '-100%'})`,\n          }}\n          onPointerEnter={handlePointerEnter}\n          onPointerLeave={handlePointerLeave}\n        >\n          {items.map((it, idx) => (\n            it.href ? (\n              <a\n                key={idx}\n                href={it.href}\n                className={`block w-full text-left px-2 py-1 text-sm rounded hover:bg-accent ${it.destructive ? 'text-red-600' : ''}`}\n                role=\"menuitem\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                  setOpen(false)\n                }}\n              >\n                {it.label}\n              </a>\n            ) : (\n              <Button\n                key={idx}\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className={`w-full justify-start rounded-none font-normal ${it.destructive ? 'text-red-600' : ''}`}\n                role=\"menuitem\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                  setOpen(false)\n                  it.onSelect?.()\n                }}\n              >\n                {it.label}\n              </Button>\n            )\n          ))}\n        </div>,\n        document.body\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["t"]
+}

package/dist/backend/SectionHeader.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { Badge } from "../primitives/badge.js";
+import { cn } from "@open-mercato/shared/lib/utils";
+function SectionHeader({
+  title,
+  count,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: title }),
+      count != null && /* @__PURE__ */ jsx(Badge, { variant: "muted", className: "text-xs tabular-nums", children: count })
+    ] }),
+    action ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: action }) : null
+  ] });
+}
+function CollapsibleSection({
+  title,
+  count,
+  action,
+  defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  children,
+  className,
+  contentClassName
+}) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+  const isControlled = controlledCollapsed !== void 0;
+  const isCollapsed = isControlled ? controlledCollapsed : internalCollapsed;
+  const toggle = React.useCallback(() => {
+    const next = !isCollapsed;
+    if (!isControlled) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  }, [isCollapsed, isControlled, onCollapsedChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          className: "flex items-center gap-2 group",
+          "aria-expanded": !isCollapsed,
+          "aria-label": `${isCollapsed ? "Expand" : "Collapse"} ${title} section`,
+          children: [
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                  isCollapsed && "-rotate-90"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: title }),
+            count != null && /* @__PURE__ */ jsx(Badge, { variant: "muted", className: "text-xs tabular-nums", children: count })
+          ]
+        }
+      ),
+      action ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: action }) : null
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
+  ] });
+}
+export {
+  CollapsibleSection,
+  SectionHeader
+};
+//# sourceMappingURL=SectionHeader.js.map

package/dist/backend/SectionHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/SectionHeader.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { Badge } from '../primitives/badge'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type SectionHeaderProps = {\n  /** Section title */\n  title: string\n  /** Optional item count \u2014 displayed as muted badge */\n  count?: number\n  /** Action element(s) on the right \u2014 typically Button or IconButton */\n  action?: React.ReactNode\n  /** Additional className */\n  className?: string\n}\n\nexport function SectionHeader({\n  title,\n  count,\n  action,\n  className,\n}: SectionHeaderProps) {\n  return (\n    <div className={cn('flex items-center justify-between', className)}>\n      <div className=\"flex items-center gap-2\">\n        <h3 className=\"text-sm font-semibold\">{title}</h3>\n        {count != null && (\n          <Badge variant=\"muted\" className=\"text-xs tabular-nums\">\n            {count}\n          </Badge>\n        )}\n      </div>\n      {action ? (\n        <div className=\"flex items-center gap-1\">\n          {action}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport type CollapsibleSectionProps = {\n  /** Section title */\n  title: string\n  count?: number\n  action?: React.ReactNode\n  /** Collapse behavior */\n  defaultCollapsed?: boolean\n  collapsed?: boolean\n  onCollapsedChange?: (collapsed: boolean) => void\n  /** Content */\n  children?: React.ReactNode\n  /** Additional className on root */\n  className?: string\n  /** Additional className on content wrapper */\n  contentClassName?: string\n}\n\nexport function CollapsibleSection({\n  title,\n  count,\n  action,\n  defaultCollapsed = false,\n  collapsed: controlledCollapsed,\n  onCollapsedChange,\n  children,\n  className,\n  contentClassName,\n}: CollapsibleSectionProps) {\n  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)\n  const isControlled = controlledCollapsed !== undefined\n  const isCollapsed = isControlled ? controlledCollapsed : internalCollapsed\n\n  const toggle = React.useCallback(() => {\n    const next = !isCollapsed\n    if (!isControlled) setInternalCollapsed(next)\n    onCollapsedChange?.(next)\n  }, [isCollapsed, isControlled, onCollapsedChange])\n\n  return (\n    <div className={cn('space-y-3', className)}>\n      <div className=\"flex items-center justify-between\">\n        <button\n          type=\"button\"\n          onClick={toggle}\n          className=\"flex items-center gap-2 group\"\n          aria-expanded={!isCollapsed}\n          aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${title} section`}\n        >\n          <ChevronDown\n            className={cn(\n              'h-4 w-4 text-muted-foreground transition-transform duration-200',\n              isCollapsed && '-rotate-90',\n            )}\n          />\n          <h3 className=\"text-sm font-semibold\">{title}</h3>\n          {count != null && (\n            <Badge variant=\"muted\" className=\"text-xs tabular-nums\">\n              {count}\n            </Badge>\n          )}\n        </button>\n        {action ? (\n          <div className=\"flex items-center gap-1\">\n            {action}\n          </div>\n        ) : null}\n      </div>\n\n      {!isCollapsed && (\n        <div className={contentClassName}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA0BM,SACE,KADF;AAxBN,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,UAAU;AAaZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,qBAAC,SAAI,WAAW,GAAG,qCAAqC,SAAS,GAC/D;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,MAC5C,SAAS,QACR,oBAAC,SAAM,SAAQ,SAAQ,WAAU,wBAC9B,iBACH;AAAA,OAEJ;AAAA,IACC,SACC,oBAAC,SAAI,WAAU,2BACZ,kBACH,IACE;AAAA,KACN;AAEJ;AAmBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,gBAAgB;AACjF,QAAM,eAAe,wBAAwB;AAC7C,QAAM,cAAc,eAAe,sBAAsB;AAEzD,QAAM,SAAS,MAAM,YAAY,MAAM;AACrC,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,sBAAqB,IAAI;AAC5C,wBAAoB,IAAI;AAAA,EAC1B,GAAG,CAAC,aAAa,cAAc,iBAAiB,CAAC;AAEjD,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,iBAAe,CAAC;AAAA,UAChB,cAAY,GAAG,cAAc,WAAW,UAAU,IAAI,KAAK;AAAA,UAE3D;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,eAAe;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,YAC5C,SAAS,QACR,oBAAC,SAAM,SAAQ,SAAQ,WAAU,wBAC9B,iBACH;AAAA;AAAA;AAAA,MAEJ;AAAA,MACC,SACC,oBAAC,SAAI,WAAU,2BACZ,kBACH,IACE;AAAA,OACN;AAAA,IAEC,CAAC,eACA,oBAAC,SAAI,WAAW,kBACb,UACH;AAAA,KAEJ;AAEJ;",
+  "names": []
+}