@open-mercato/ui 0.6.6-develop.6314.1.c7b8291aa2 → 0.6.6-develop.6330.1.a261878aa8

package/dist/backend/OrganizationScopeBoundary.js

@@ -0,0 +1,33 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  subscribeOrganizationScopeChanged
+} from "@open-mercato/shared/lib/frontend/organizationEvents";
+function OrganizationScopeBoundary({ active, children }) {
+  const [scopeKey, setScopeKey] = React.useState(0);
+  const lastScopeRef = React.useRef(null);
+  const hasInitializedScopeRef = React.useRef(false);
+  React.useEffect(() => {
+    return subscribeOrganizationScopeChanged((detail) => {
+      const prev = lastScopeRef.current;
+      lastScopeRef.current = detail;
+      if (!hasInitializedScopeRef.current) {
+        hasInitializedScopeRef.current = true;
+        return;
+      }
+      if (prev && prev.organizationId === detail.organizationId && prev.tenantId === detail.tenantId) {
+        return;
+      }
+      setScopeKey((current) => current + 1);
+    });
+  }, []);
+  if (!active) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(React.Fragment, { children }, scopeKey);
+}
+export {
+  OrganizationScopeBoundary
+};
+//# sourceMappingURL=OrganizationScopeBoundary.js.map

package/dist/backend/OrganizationScopeBoundary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/backend/OrganizationScopeBoundary.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport {\n  subscribeOrganizationScopeChanged,\n  type OrganizationScopeChangedDetail,\n} from '@open-mercato/shared/lib/frontend/organizationEvents'\n\nexport type OrganizationScopeBoundaryProps = {\n  active: boolean\n  children: React.ReactNode\n}\n\n/**\n * Remounts its children whenever the active organization/tenant scope changes.\n *\n * The org/tenant switcher already calls `router.refresh()` on a scope change,\n * which re-runs server components but does NOT remount client components \u2014 so\n * settings pages that fetch their data once in a mount `useEffect` keep showing\n * the previous scope's values until a manual reload. Wrapping those pages here\n * forces a fresh mount (and therefore a refetch) on a real scope change.\n *\n * Gated by `active` so only the settings surface remounts; list/CRUD pages keep\n * relying on the smoother `router.refresh()` path that preserves table state.\n */\nexport function OrganizationScopeBoundary({ active, children }: OrganizationScopeBoundaryProps) {\n  const [scopeKey, setScopeKey] = React.useState(0)\n  const lastScopeRef = React.useRef<OrganizationScopeChangedDetail | null>(null)\n  const hasInitializedScopeRef = React.useRef(false)\n\n  React.useEffect(() => {\n    return subscribeOrganizationScopeChanged((detail) => {\n      const prev = lastScopeRef.current\n      lastScopeRef.current = detail\n      if (!hasInitializedScopeRef.current) {\n        hasInitializedScopeRef.current = true\n        return\n      }\n      if (\n        prev &&\n        prev.organizationId === detail.organizationId &&\n        prev.tenantId === detail.tenantId\n      ) {\n        return\n      }\n      setScopeKey((current) => current + 1)\n    })\n  }, [])\n\n  if (!active) {\n    return <>{children}</>\n  }\n\n  return <React.Fragment key={scopeKey}>{children}</React.Fragment>\n}\n"],
+  "mappings": ";AAiDW;AAhDX,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,OAEK;AAmBA,SAAS,0BAA0B,EAAE,QAAQ,SAAS,GAAmC;AAC9F,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,CAAC;AAChD,QAAM,eAAe,MAAM,OAA8C,IAAI;AAC7E,QAAM,yBAAyB,MAAM,OAAO,KAAK;AAEjD,QAAM,UAAU,MAAM;AACpB,WAAO,kCAAkC,CAAC,WAAW;AACnD,YAAM,OAAO,aAAa;AAC1B,mBAAa,UAAU;AACvB,UAAI,CAAC,uBAAuB,SAAS;AACnC,+BAAuB,UAAU;AACjC;AAAA,MACF;AACA,UACE,QACA,KAAK,mBAAmB,OAAO,kBAC/B,KAAK,aAAa,OAAO,UACzB;AACA;AAAA,MACF;AACA,kBAAY,CAAC,YAAY,UAAU,CAAC;AAAA,IACtC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,QAAQ;AACX,WAAO,gCAAG,UAAS;AAAA,EACrB;AAEA,SAAO,oBAAC,MAAM,UAAN,EAA+B,YAAX,QAAoB;AAClD;",
+  "names": []
+}

package/dist/backend/notifications/NotificationPanel.js

@@ -6,6 +6,7 @@ import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from "luci
 import { Button } from "../../primitives/button.js";
 import { IconButton } from "../../primitives/icon-button.js";
 import { Sheet, SheetContent, SheetTitle } from "../../primitives/sheet.js";
+import { Tabs, TabsList, TabsTrigger } from "../../primitives/tabs.js";
 import { NotificationItem } from "./NotificationItem.js";
 function NotificationPanel({
   open,
@@ -43,6 +44,11 @@ function NotificationPanel({
       setMarkingAllRead(false);
     }
   };
+  const handleFilterChange = React.useCallback((next) => {
+    if (next === "all" || next === "unread" || next === "action") {
+      setFilter(next);
+    }
+  }, []);
   React.useEffect(() => {
     if (!open || typeof document === "undefined") return;
     const previous = document.body.style.overflow;
@@ -63,12 +69,14 @@ function NotificationPanel({
           /* @__PURE__ */ jsx(SheetTitle, { className: "text-base font-medium leading-6 tracking-tight text-foreground", children: t("notifications.title", "Notifications") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             unreadCount > 0 ? /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
                 type: "button",
+                variant: "link",
+                size: "sm",
                 onClick: handleMarkAllRead,
                 disabled: markingAllRead,
-                className: "inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50",
+                className: "gap-1 px-1 text-accent-indigo hover:text-accent-indigo/80 hover:no-underline",
                 children: [
                   markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : null,
                   t("notifications.markAllRead", "Mark all read")
@@ -88,33 +96,11 @@ function NotificationPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-center gap-5 border-b px-5 py-3.5", children: ["all", "unread", "action"].map((value) => {
-          const isActive = filter === value;
+        /* @__PURE__ */ jsx(Tabs, { value: filter, onValueChange: handleFilterChange, variant: "underline", children: /* @__PURE__ */ jsx(TabsList, { className: "flex w-full px-5", children: ["all", "unread", "action"].map((value) => {
           const label = value === "all" ? t("notifications.filters.all", "All") : value === "unread" ? t("notifications.filters.unread", "Unread") : t("notifications.filters.actionRequired", "Action Required");
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "tab",
-              "aria-selected": isActive,
-              onClick: () => setFilter(value),
-              className: "relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground",
-              "data-active": isActive,
-              children: [
-                /* @__PURE__ */ jsx("span", { children: label }),
-                value === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground", children: unreadCount > 99 ? "99+" : unreadCount }) : null,
-                isActive ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground",
-                    "aria-hidden": "true"
-                  }
-                ) : null
-              ]
-            },
-            value
-          );
-        }) }),
+          const count = value === "unread" && unreadCount > 0 ? unreadCount > 99 ? "99+" : unreadCount : void 0;
+          return /* @__PURE__ */ jsx(TabsTrigger, { value, count, children: label }, value);
+        }) }) }),
         dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/50 px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsx("span", { children: t("notifications.toast.dismissed", "Notification dismissed") }),
           /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onUndoDismiss(), children: [

package/dist/backend/notifications/NotificationPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/NotificationPanel.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  // Preserve the body scroll lock contract that consumers (and integration\n  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which\n  // does not set `document.body.style.overflow` \u2014 we set it ourselves so the\n  // contract is observable.\n  React.useEffect(() => {\n    if (!open || typeof document === 'undefined') return\n    const previous = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = previous\n    }\n  }, [open])\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"gap-0 p-0\"\n        hideClose\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b px-5 py-4\">\n          <SheetTitle className=\"text-base font-medium leading-6 tracking-tight text-foreground\">\n            {t('notifications.title', 'Notifications')}\n          </SheetTitle>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <button\n                type=\"button\"\n                onClick={handleMarkAllRead}\n                disabled={markingAllRead}\n                className=\"inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50\"\n              >\n                {markingAllRead ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n                {t('notifications.markAllRead', 'Mark all read')}\n              </button>\n            ) : null}\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onOpenChange(false)}\n              aria-label={t('notifications.close', 'Close notifications')}\n            >\n              <X className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        <div role=\"tablist\" className=\"flex items-center gap-5 border-b px-5 py-3.5\">\n          {(['all', 'unread', 'action'] as const).map((value) => {\n            const isActive = filter === value\n            const label =\n              value === 'all'\n                ? t('notifications.filters.all', 'All')\n                : value === 'unread'\n                  ? t('notifications.filters.unread', 'Unread')\n                  : t('notifications.filters.actionRequired', 'Action Required')\n            return (\n              <button\n                key={value}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => setFilter(value)}\n                className=\"relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground\"\n                data-active={isActive}\n              >\n                <span>{label}</span>\n                {value === 'unread' && unreadCount > 0 ? (\n                  <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground\">\n                    {unreadCount > 99 ? '99+' : unreadCount}\n                  </span>\n                ) : null}\n                {isActive ? (\n                  <span\n                    className=\"absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n\n        {dismissUndo && onUndoDismiss && (\n          <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>\n                {t('notifications.toast.dismissed', 'Notification dismissed')}\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                <RotateCcw className=\"mr-1 h-3 w-3\" />\n                {t('notifications.actions.undo', 'Undo')}\n              </Button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n          {filteredNotifications.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-muted/50\">\n                <Bell className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <p className=\"text-sm\">{t('notifications.empty', 'No notifications')}</p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-1 p-2\">\n              {filteredNotifications.map((notification, idx) => (\n                <React.Fragment key={notification.id}>\n                  {idx > 0 ? <div className=\"my-px h-px bg-border\" aria-hidden=\"true\" /> : null}\n                  <NotificationItem\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground\">\n          <div className=\"flex items-center gap-2\">\n            <span>{t('notifications.footer.useHint', 'Use')}</span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowUp className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowDown className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>\n          </div>\n          <Link\n            href=\"/backend/config/notifications\"\n            onClick={() => onOpenChange(false)}\n            className=\"inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Settings2 className=\"size-3.5\" aria-hidden=\"true\" />\n            {t('notifications.footer.manage', 'Manage notifications')}\n          </Link>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'\nimport { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  const handleFilterChange = React.useCallback((next: string) => {\n    if (next === 'all' || next === 'unread' || next === 'action') {\n      setFilter(next)\n    }\n  }, [])\n\n  // Preserve the body scroll lock contract that consumers (and integration\n  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which\n  // does not set `document.body.style.overflow` \u2014 we set it ourselves so the\n  // contract is observable.\n  React.useEffect(() => {\n    if (!open || typeof document === 'undefined') return\n    const previous = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = previous\n    }\n  }, [open])\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"gap-0 p-0\"\n        hideClose\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b px-5 py-4\">\n          <SheetTitle className=\"text-base font-medium leading-6 tracking-tight text-foreground\">\n            {t('notifications.title', 'Notifications')}\n          </SheetTitle>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                onClick={handleMarkAllRead}\n                disabled={markingAllRead}\n                className=\"gap-1 px-1 text-accent-indigo hover:text-accent-indigo/80 hover:no-underline\"\n              >\n                {markingAllRead ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n                {t('notifications.markAllRead', 'Mark all read')}\n              </Button>\n            ) : null}\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onOpenChange(false)}\n              aria-label={t('notifications.close', 'Close notifications')}\n            >\n              <X className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        <Tabs value={filter} onValueChange={handleFilterChange} variant=\"underline\">\n          <TabsList className=\"flex w-full px-5\">\n            {(['all', 'unread', 'action'] as const).map((value) => {\n              const label =\n                value === 'all'\n                  ? t('notifications.filters.all', 'All')\n                  : value === 'unread'\n                    ? t('notifications.filters.unread', 'Unread')\n                    : t('notifications.filters.actionRequired', 'Action Required')\n              const count =\n                value === 'unread' && unreadCount > 0\n                  ? unreadCount > 99\n                    ? '99+'\n                    : unreadCount\n                  : undefined\n              return (\n                <TabsTrigger key={value} value={value} count={count}>\n                  {label}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n\n        {dismissUndo && onUndoDismiss && (\n          <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>\n                {t('notifications.toast.dismissed', 'Notification dismissed')}\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                <RotateCcw className=\"mr-1 h-3 w-3\" />\n                {t('notifications.actions.undo', 'Undo')}\n              </Button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n          {filteredNotifications.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-muted/50\">\n                <Bell className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <p className=\"text-sm\">{t('notifications.empty', 'No notifications')}</p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-1 p-2\">\n              {filteredNotifications.map((notification, idx) => (\n                <React.Fragment key={notification.id}>\n                  {idx > 0 ? <div className=\"my-px h-px bg-border\" aria-hidden=\"true\" /> : null}\n                  <NotificationItem\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground\">\n          <div className=\"flex items-center gap-2\">\n            <span>{t('notifications.footer.useHint', 'Use')}</span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowUp className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowDown className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>\n          </div>\n          <Link\n            href=\"/backend/config/notifications\"\n            onClick={() => onOpenChange(false)}\n            className=\"inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Settings2 className=\"size-3.5\" aria-hidden=\"true\" />\n            {t('notifications.footer.manage', 'Manage notifications')}\n          </Link>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.6314.1.c7b8291aa2",
+  "version": "0.6.6-develop.6330.1.a261878aa8",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6314.1.c7b8291aa2",
+    "@open-mercato/shared": "0.6.6-develop.6330.1.a261878aa8",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6314.1.c7b8291aa2",
+    "@open-mercato/shared": "0.6.6-develop.6330.1.a261878aa8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -29,6 +29,7 @@ import { dismissRecordConflict } from './conflicts/store'
 import { ProgressTopBar } from './progress/ProgressTopBar'
 import { UpgradeActionBanner } from './upgrades/UpgradeActionBanner'
 import { PartialIndexBanner } from './indexes/PartialIndexBanner'
+import { OrganizationScopeBoundary } from './OrganizationScopeBoundary'
 import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
 import { slugifySidebarId } from '@open-mercato/shared/modules/navigation/sidebarPreferences'
 import { readVersionedPreference, writeVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
@@ -1399,7 +1400,9 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             context={injectionContext}
           />
           <div id="om-top-banners" className="mb-3 space-y-2" />
-          {children}
+          <OrganizationScopeBoundary active={isOnSettingsPath}>
+            {children}
+          </OrganizationScopeBoundary>
           <InjectionSpot spotId={BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID} context={injectionContext} />
         </main>
         <footer className="border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-4 py-3 flex flex-wrap items-center justify-end gap-4">

package/src/backend/CrudForm.tsx

@@ -73,6 +73,7 @@ import {
 } from 'lucide-react'
 import { loadGeneratedFieldRegistrations } from './fields/registry'
 import type { CustomFieldDefDto, CustomFieldDefinitionsPayload, CustomFieldsetDto } from './utils/customFieldDefs'
+import { isDefVisible } from './utils/customFieldDefs'
 import { buildFormFieldsFromCustomFields, buildFormFieldFromCustomFieldDef } from './utils/customFieldForms'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TagsInput } from './inputs/TagsInput'
@@ -1553,7 +1554,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           fieldsetGroupMap.set(group.code, { code: group.code, title: group.title, hint: group.hint })
         })
       }
-      const sortedDefs = [...defList].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
+      const sortedDefs = [...defList]
+        .filter((definition) => isDefVisible(definition, 'form'))
+        .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
       const ensureBucket = (code: string | null, def: CustomFieldDefDto): CustomFieldGroupLayout => {
         const key = code ?? '__default__'
         let bucket = groupsMap.get(key)

package/src/backend/OrganizationScopeBoundary.tsx

@@ -0,0 +1,54 @@
+'use client'
+import * as React from 'react'
+import {
+  subscribeOrganizationScopeChanged,
+  type OrganizationScopeChangedDetail,
+} from '@open-mercato/shared/lib/frontend/organizationEvents'
+
+export type OrganizationScopeBoundaryProps = {
+  active: boolean
+  children: React.ReactNode
+}
+
+/**
+ * Remounts its children whenever the active organization/tenant scope changes.
+ *
+ * The org/tenant switcher already calls `router.refresh()` on a scope change,
+ * which re-runs server components but does NOT remount client components — so
+ * settings pages that fetch their data once in a mount `useEffect` keep showing
+ * the previous scope's values until a manual reload. Wrapping those pages here
+ * forces a fresh mount (and therefore a refetch) on a real scope change.
+ *
+ * Gated by `active` so only the settings surface remounts; list/CRUD pages keep
+ * relying on the smoother `router.refresh()` path that preserves table state.
+ */
+export function OrganizationScopeBoundary({ active, children }: OrganizationScopeBoundaryProps) {
+  const [scopeKey, setScopeKey] = React.useState(0)
+  const lastScopeRef = React.useRef<OrganizationScopeChangedDetail | null>(null)
+  const hasInitializedScopeRef = React.useRef(false)
+
+  React.useEffect(() => {
+    return subscribeOrganizationScopeChanged((detail) => {
+      const prev = lastScopeRef.current
+      lastScopeRef.current = detail
+      if (!hasInitializedScopeRef.current) {
+        hasInitializedScopeRef.current = true
+        return
+      }
+      if (
+        prev &&
+        prev.organizationId === detail.organizationId &&
+        prev.tenantId === detail.tenantId
+      ) {
+        return
+      }
+      setScopeKey((current) => current + 1)
+    })
+  }, [])
+
+  if (!active) {
+    return <>{children}</>
+  }
+
+  return <React.Fragment key={scopeKey}>{children}</React.Fragment>
+}

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -275,6 +275,65 @@ describe('CrudForm custom field loading', () => {
     expect(container.querySelector('[data-crud-field-id="cf_renewal_quarter"]')?.textContent).toContain('Q3')
   })
 
+  it('omits custom fields with formEditable:false from the generated custom-fields section', async () => {
+    buildFormFieldFromCustomFieldDefMock.mockImplementation((definition: any) => ({
+      id: `cf_${definition.key}`,
+      label: definition.label ?? definition.key,
+      type: 'text',
+    }))
+    fetchCustomFieldFormStructureMock.mockResolvedValue({
+      fields: [],
+      definitions: [
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'editable_note',
+          label: 'Editable note',
+          kind: 'text',
+          formEditable: true,
+        },
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'readonly_note',
+          label: 'Readonly note',
+          kind: 'text',
+          formEditable: false,
+        },
+      ],
+      metadata: {
+        items: [],
+        fieldsetsByEntity: {},
+        entitySettings: {},
+      },
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        embedded
+        title="Form"
+        entityId="customers:customer_company_profile"
+        fields={fields}
+        groups={groups}
+        initialValues={{ name: 'Acme', editable_note: 'x', readonly_note: 'y' }}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'entities.customFields.manageFieldset': 'Manage fields',
+        },
+      },
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="cf_editable_note"]')).not.toBeNull()
+    })
+    expect(container.querySelector('[data-crud-field-id="cf_readonly_note"]')).toBeNull()
+    expect(buildFormFieldFromCustomFieldDefMock).not.toHaveBeenCalledWith(
+      expect.objectContaining({ key: 'readonly_note' }),
+      expect.anything(),
+    )
+  })
+
   it('submits custom entity values without loaded record metadata', async () => {
     const handleSubmit = jest.fn().mockResolvedValue(undefined)
 

package/src/backend/__tests__/OrganizationScopeBoundary.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, render } from '@testing-library/react'
+import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
+import { OrganizationScopeBoundary } from '../OrganizationScopeBoundary'
+
+let mountCount = 0
+
+function MountCounter() {
+  React.useEffect(() => {
+    mountCount += 1
+  }, [])
+  return <span data-testid="child">child</span>
+}
+
+describe('<OrganizationScopeBoundary>', () => {
+  beforeEach(() => {
+    mountCount = 0
+  })
+
+  it('remounts children on a real scope change when active', () => {
+    render(
+      <OrganizationScopeBoundary active>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    expect(mountCount).toBe(1)
+
+    // First scope event after mount only establishes the baseline.
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-a', tenantId: 'tenant-a' })
+    })
+    expect(mountCount).toBe(1)
+
+    // A genuine change remounts the subtree, re-running mount effects.
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-b', tenantId: 'tenant-a' })
+    })
+    expect(mountCount).toBe(2)
+  })
+
+  it('does not remount children when the scope is unchanged', () => {
+    render(
+      <OrganizationScopeBoundary active>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-c', tenantId: 'tenant-c' })
+    })
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-c', tenantId: 'tenant-c' })
+    })
+    expect(mountCount).toBe(1)
+  })
+
+  it('does not remount children on a scope change when inactive', () => {
+    render(
+      <OrganizationScopeBoundary active={false}>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-d', tenantId: 'tenant-d' })
+    })
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-e', tenantId: 'tenant-e' })
+    })
+    expect(mountCount).toBe(1)
+  })
+})

package/src/backend/notifications/NotificationPanel.tsx

@@ -5,6 +5,7 @@ import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'luci
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'
 import { NotificationItem } from './NotificationItem'
 import type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
@@ -97,6 +98,12 @@ export function NotificationPanel({
     }
   }
 
+  const handleFilterChange = React.useCallback((next: string) => {
+    if (next === 'all' || next === 'unread' || next === 'action') {
+      setFilter(next)
+    }
+  }, [])
+
   // Preserve the body scroll lock contract that consumers (and integration
   // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which
   // does not set `document.body.style.overflow` — we set it ourselves so the
@@ -124,15 +131,17 @@ export function NotificationPanel({
           </SheetTitle>
           <div className="flex items-center gap-1">
             {unreadCount > 0 ? (
-              <button
+              <Button
                 type="button"
+                variant="link"
+                size="sm"
                 onClick={handleMarkAllRead}
                 disabled={markingAllRead}
-                className="inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50"
+                className="gap-1 px-1 text-accent-indigo hover:text-accent-indigo/80 hover:no-underline"
               >
                 {markingAllRead ? <Loader2 className="size-3.5 animate-spin" /> : null}
                 {t('notifications.markAllRead', 'Mark all read')}
-              </button>
+              </Button>
             ) : null}
             <IconButton
               type="button"
@@ -146,41 +155,29 @@ export function NotificationPanel({
           </div>
         </div>
 
-        <div role="tablist" className="flex items-center gap-5 border-b px-5 py-3.5">
-          {(['all', 'unread', 'action'] as const).map((value) => {
-            const isActive = filter === value
-            const label =
-              value === 'all'
-                ? t('notifications.filters.all', 'All')
-                : value === 'unread'
-                  ? t('notifications.filters.unread', 'Unread')
-                  : t('notifications.filters.actionRequired', 'Action Required')
-            return (
-              <button
-                key={value}
-                type="button"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => setFilter(value)}
-                className="relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
-                data-active={isActive}
-              >
-                <span>{label}</span>
-                {value === 'unread' && unreadCount > 0 ? (
-                  <span className="inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground">
-                    {unreadCount > 99 ? '99+' : unreadCount}
-                  </span>
-                ) : null}
-                {isActive ? (
-                  <span
-                    className="absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground"
-                    aria-hidden="true"
-                  />
-                ) : null}
-              </button>
-            )
-          })}
-        </div>
+        <Tabs value={filter} onValueChange={handleFilterChange} variant="underline">
+          <TabsList className="flex w-full px-5">
+            {(['all', 'unread', 'action'] as const).map((value) => {
+              const label =
+                value === 'all'
+                  ? t('notifications.filters.all', 'All')
+                  : value === 'unread'
+                    ? t('notifications.filters.unread', 'Unread')
+                    : t('notifications.filters.actionRequired', 'Action Required')
+              const count =
+                value === 'unread' && unreadCount > 0
+                  ? unreadCount > 99
+                    ? '99+'
+                    : unreadCount
+                  : undefined
+              return (
+                <TabsTrigger key={value} value={value} count={count}>
+                  {label}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+        </Tabs>
 
         {dismissUndo && onUndoDismiss && (
           <div className="border-b bg-muted/50 px-4 py-2 text-sm">