@open-mercato/ui 0.5.1-develop.2800.bfe2178a4f → 0.5.1-develop.2851.2854b4507f

package/dist/backend/messages/SendObjectMessageDialog.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Send } from "lucide-react";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Button } from "../../primitives/button.js";
+import { IconButton } from "../../primitives/icon-button.js";
 import {
   MessageComposer
 } from "./MessageComposer.js";
@@ -13,11 +14,16 @@ function SendObjectMessageDialog({
   lockedType = "messages.defaultWithObjects",
   requiredActionConfig = null,
   disabled = false,
+  buttonVariant = "ghost",
+  buttonSize = "icon",
+  buttonClassName,
+  buttonLabel,
   viewHref: _viewHref = null,
   onSuccess
 }) {
   const t = useT();
   const [open, setOpen] = React.useState(false);
+  const label = buttonLabel ?? t("messages.compose", "Compose message");
   const openComposer = React.useCallback(() => {
     if (disabled) return;
     setOpen(true);
@@ -30,20 +36,35 @@ function SendObjectMessageDialog({
     sourceEntityId: object.sourceEntityId ?? null,
     previewData: object.previewData ?? null
   }), [object.entityId, object.entityModule, object.entityType, object.sourceEntityId, object.sourceEntityType, object.previewData]);
+  const trigger = buttonSize === "icon" && (buttonVariant === "outline" || buttonVariant === "ghost") ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      size: "default",
+      variant: buttonVariant,
+      className: buttonClassName,
+      disabled,
+      onClick: openComposer,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx(Send, { className: "size-4" })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      size: buttonSize,
+      variant: buttonVariant,
+      className: buttonClassName,
+      disabled,
+      onClick: openComposer,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx(Send, { className: "size-4" })
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        size: "icon",
-        variant: "ghost",
-        disabled,
-        onClick: openComposer,
-        "aria-label": t("messages.compose", "Compose message"),
-        title: t("messages.compose", "Compose message"),
-        children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" })
-      }
-    ),
+    trigger,
     /* @__PURE__ */ jsx(
       MessageComposer,
       {

package/dist/backend/messages/SendObjectMessageDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/messages/SendObjectMessageDialog.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Send } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport {\n  MessageComposer,\n  type MessageComposerContextObject,\n  type MessageComposerProps,\n  type MessageComposerRequiredActionConfig,\n} from './MessageComposer'\n\nexport type SendObjectMessageDialogProps = {\n  object: MessageComposerContextObject\n  defaultValues?: MessageComposerProps['defaultValues']\n  lockedType?: string | null\n  requiredActionConfig?: MessageComposerRequiredActionConfig | null\n  disabled?: boolean\n  viewHref?: string | null\n  onSuccess?: MessageComposerProps['onSuccess']\n}\n\nexport function SendObjectMessageDialog({\n  object,\n  defaultValues,\n  lockedType = 'messages.defaultWithObjects',\n  requiredActionConfig = null,\n  disabled = false,\n  viewHref: _viewHref = null,\n  onSuccess,\n}: SendObjectMessageDialogProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n\n  const openComposer = React.useCallback(() => {\n    if (disabled) return\n    setOpen(true)\n  }, [disabled])\n  const contextObject = React.useMemo(() => ({\n    entityModule: object.entityModule,\n    entityType: object.entityType,\n    entityId: object.entityId,\n    sourceEntityType: object.sourceEntityType ?? null,\n    sourceEntityId: object.sourceEntityId ?? null,\n    previewData: object.previewData ?? null,\n  }), [object.entityId, object.entityModule, object.entityType, object.sourceEntityId, object.sourceEntityType, object.previewData])\n\n  return (\n    <>\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"ghost\"\n        disabled={disabled}\n        onClick={openComposer}\n        aria-label={t('messages.compose', 'Compose message')}\n        title={t('messages.compose', 'Compose message')}\n      >\n        <Send className=\"h-4 w-4\" />\n      </Button>\n      <MessageComposer\n        variant=\"compose\"\n        open={open}\n        onOpenChange={setOpen}\n        lockedType={lockedType}\n        contextObject={contextObject}\n        requiredActionConfig={requiredActionConfig}\n        defaultValues={defaultValues}\n        onSuccess={onSuccess}\n      />\n    </>\n  )\n}\n"],
-  "mappings": ";AAiDI,mBAUI,KAVJ;AA/CJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAIK;AAYA,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,WAAW;AAAA,EACX,UAAU,YAAY;AAAA,EACtB;AACF,GAAiC;AAC/B,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,QAAI,SAAU;AACd,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,gBAAgB,MAAM,QAAQ,OAAO;AAAA,IACzC,cAAc,OAAO;AAAA,IACrB,YAAY,OAAO;AAAA,IACnB,UAAU,OAAO;AAAA,IACjB,kBAAkB,OAAO,oBAAoB;AAAA,IAC7C,gBAAgB,OAAO,kBAAkB;AAAA,IACzC,aAAa,OAAO,eAAe;AAAA,EACrC,IAAI,CAAC,OAAO,UAAU,OAAO,cAAc,OAAO,YAAY,OAAO,gBAAgB,OAAO,kBAAkB,OAAO,WAAW,CAAC;AAEjI,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QACT,cAAY,EAAE,oBAAoB,iBAAiB;AAAA,QACnD,OAAO,EAAE,oBAAoB,iBAAiB;AAAA,QAE9C,8BAAC,QAAK,WAAU,WAAU;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Send } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport {\n  MessageComposer,\n  type MessageComposerContextObject,\n  type MessageComposerProps,\n  type MessageComposerRequiredActionConfig,\n} from './MessageComposer'\n\nexport type SendObjectMessageDialogProps = {\n  object: MessageComposerContextObject\n  defaultValues?: MessageComposerProps['defaultValues']\n  lockedType?: string | null\n  requiredActionConfig?: MessageComposerRequiredActionConfig | null\n  disabled?: boolean\n  buttonVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'muted' | 'link'\n  buttonSize?: 'default' | 'sm' | 'lg' | 'icon'\n  buttonClassName?: string\n  buttonLabel?: string\n  viewHref?: string | null\n  onSuccess?: MessageComposerProps['onSuccess']\n}\n\nexport function SendObjectMessageDialog({\n  object,\n  defaultValues,\n  lockedType = 'messages.defaultWithObjects',\n  requiredActionConfig = null,\n  disabled = false,\n  buttonVariant = 'ghost',\n  buttonSize = 'icon',\n  buttonClassName,\n  buttonLabel,\n  viewHref: _viewHref = null,\n  onSuccess,\n}: SendObjectMessageDialogProps) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const label = buttonLabel ?? t('messages.compose', 'Compose message')\n\n  const openComposer = React.useCallback(() => {\n    if (disabled) return\n    setOpen(true)\n  }, [disabled])\n  const contextObject = React.useMemo(() => ({\n    entityModule: object.entityModule,\n    entityType: object.entityType,\n    entityId: object.entityId,\n    sourceEntityType: object.sourceEntityType ?? null,\n    sourceEntityId: object.sourceEntityId ?? null,\n    previewData: object.previewData ?? null,\n  }), [object.entityId, object.entityModule, object.entityType, object.sourceEntityId, object.sourceEntityType, object.previewData])\n\n  const trigger = buttonSize === 'icon' && (buttonVariant === 'outline' || buttonVariant === 'ghost')\n    ? (\n      <IconButton\n        type=\"button\"\n        size=\"default\"\n        variant={buttonVariant}\n        className={buttonClassName}\n        disabled={disabled}\n        onClick={openComposer}\n        aria-label={label}\n        title={label}\n      >\n        <Send className=\"size-4\" />\n      </IconButton>\n    )\n    : (\n      <Button\n        type=\"button\"\n        size={buttonSize}\n        variant={buttonVariant}\n        className={buttonClassName}\n        disabled={disabled}\n        onClick={openComposer}\n        aria-label={label}\n        title={label}\n      >\n        <Send className=\"size-4\" />\n      </Button>\n    )\n\n  return (\n    <>\n      {trigger}\n      <MessageComposer\n        variant=\"compose\"\n        open={open}\n        onOpenChange={setOpen}\n        lockedType={lockedType}\n        contextObject={contextObject}\n        requiredActionConfig={requiredActionConfig}\n        defaultValues={defaultValues}\n        onSuccess={onSuccess}\n      />\n    </>\n  )\n}\n"],
+  "mappings": ";AAsEQ,SAmBJ,UAnBI,KAmBJ,YAnBI;AApER,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,OAIK;AAgBA,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AACF,GAAiC;AAC/B,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,eAAe,EAAE,oBAAoB,iBAAiB;AAEpE,QAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,QAAI,SAAU;AACd,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,gBAAgB,MAAM,QAAQ,OAAO;AAAA,IACzC,cAAc,OAAO;AAAA,IACrB,YAAY,OAAO;AAAA,IACnB,UAAU,OAAO;AAAA,IACjB,kBAAkB,OAAO,oBAAoB;AAAA,IAC7C,gBAAgB,OAAO,kBAAkB;AAAA,IACzC,aAAa,OAAO,eAAe;AAAA,EACrC,IAAI,CAAC,OAAO,UAAU,OAAO,cAAc,OAAO,YAAY,OAAO,gBAAgB,OAAO,kBAAkB,OAAO,WAAW,CAAC;AAEjI,QAAM,UAAU,eAAe,WAAW,kBAAkB,aAAa,kBAAkB,WAEvF;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,OAAO;AAAA,MAEP,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,EAC3B,IAGA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,OAAO;AAAA,MAEP,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,EAC3B;AAGJ,SACE,iCACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/backend/version-history/VersionHistoryAction.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Clock } from "lucide-react";
-import { Button } from "../../primitives/button.js";
+import { IconButton } from "../../primitives/icon-button.js";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { useVersionHistory } from "./useVersionHistory.js";
 import { VersionHistoryPanel } from "./VersionHistoryPanel.js";
@@ -32,11 +32,11 @@ function VersionHistoryAction({
   if (!enabled) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Button,
+      IconButton,
       {
         type: "button",
         variant: "ghost",
-        size: "icon",
+        size: "default",
         onClick: () => setOpen(true),
         "aria-label": t("audit_logs.version_history.title"),
         title: t("audit_logs.version_history.title"),

package/dist/backend/version-history/VersionHistoryAction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/version-history/VersionHistoryAction.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Clock } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { VersionHistoryConfig } from './types'\nimport { useVersionHistory } from './useVersionHistory'\nimport { VersionHistoryPanel } from './VersionHistoryPanel'\n\nexport type VersionHistoryActionProps = {\n  config: VersionHistoryConfig | null\n  t: TranslateFn\n  buttonClassName?: string\n  iconClassName?: string\n  canUndoRedo?: boolean\n  autoCheckAcl?: boolean\n}\n\nexport function VersionHistoryAction({\n  config,\n  t,\n  buttonClassName,\n  iconClassName,\n  canUndoRedo,\n  autoCheckAcl,\n}: VersionHistoryActionProps) {\n  const enabled = Boolean(\n    config?.resourceKind\n      && config?.resourceId\n      && String(config.resourceId).trim().length > 0\n  )\n  const [open, setOpen] = React.useState(false)\n  const stableConfig = React.useMemo<VersionHistoryConfig | null>(() => {\n    if (!enabled || !config) return null\n    return {\n      resourceKind: config.resourceKind,\n      resourceId: config.resourceId,\n      resourceIdFallback: config.resourceIdFallback,\n      organizationId: config.organizationId,\n      includeRelated: config.includeRelated,\n    }\n  }, [enabled, config?.resourceKind, config?.resourceId, config?.resourceIdFallback, config?.organizationId, config?.includeRelated])\n  const historyData = useVersionHistory(stableConfig, open)\n\n  if (!enabled) return null\n\n  return (\n    <>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => setOpen(true)}\n        aria-label={t('audit_logs.version_history.title')}\n        title={t('audit_logs.version_history.title')}\n        className={buttonClassName}\n      >\n        <Clock className={cn('size-4', iconClassName)} />\n      </Button>\n      <VersionHistoryPanel\n        open={open}\n        onOpenChange={setOpen}\n        entries={historyData.entries}\n        isLoading={historyData.isLoading}\n        error={historyData.error}\n        hasMore={historyData.hasMore}\n        onLoadMore={historyData.loadMore}\n        t={t}\n        canUndoRedo={canUndoRedo}\n        autoCheckAcl={autoCheckAcl}\n      />\n    </>\n  )\n}\n"],
-  "mappings": ";AAiDI,mBAUI,KAVJ;AA/CJ,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,UAAU;AAGnB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAW7B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,UAAU;AAAA,IACd,QAAQ,gBACH,QAAQ,cACR,OAAO,OAAO,UAAU,EAAE,KAAK,EAAE,SAAS;AAAA,EACjD;AACA,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,eAAe,MAAM,QAAqC,MAAM;AACpE,QAAI,CAAC,WAAW,CAAC,OAAQ,QAAO;AAChC,WAAO;AAAA,MACL,cAAc,OAAO;AAAA,MACrB,YAAY,OAAO;AAAA,MACnB,oBAAoB,OAAO;AAAA,MAC3B,gBAAgB,OAAO;AAAA,MACvB,gBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,cAAc,QAAQ,YAAY,QAAQ,oBAAoB,QAAQ,gBAAgB,QAAQ,cAAc,CAAC;AAClI,QAAM,cAAc,kBAAkB,cAAc,IAAI;AAExD,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,cAAY,EAAE,kCAAkC;AAAA,QAChD,OAAO,EAAE,kCAAkC;AAAA,QAC3C,WAAW;AAAA,QAEX,8BAAC,SAAM,WAAW,GAAG,UAAU,aAAa,GAAG;AAAA;AAAA,IACjD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc;AAAA,QACd,SAAS,YAAY;AAAA,QACrB,WAAW,YAAY;AAAA,QACvB,OAAO,YAAY;AAAA,QACnB,SAAS,YAAY;AAAA,QACrB,YAAY,YAAY;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Clock } from 'lucide-react'\nimport { IconButton } from '../../primitives/icon-button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { VersionHistoryConfig } from './types'\nimport { useVersionHistory } from './useVersionHistory'\nimport { VersionHistoryPanel } from './VersionHistoryPanel'\n\nexport type VersionHistoryActionProps = {\n  config: VersionHistoryConfig | null\n  t: TranslateFn\n  buttonClassName?: string\n  iconClassName?: string\n  canUndoRedo?: boolean\n  autoCheckAcl?: boolean\n}\n\nexport function VersionHistoryAction({\n  config,\n  t,\n  buttonClassName,\n  iconClassName,\n  canUndoRedo,\n  autoCheckAcl,\n}: VersionHistoryActionProps) {\n  const enabled = Boolean(\n    config?.resourceKind\n      && config?.resourceId\n      && String(config.resourceId).trim().length > 0\n  )\n  const [open, setOpen] = React.useState(false)\n  const stableConfig = React.useMemo<VersionHistoryConfig | null>(() => {\n    if (!enabled || !config) return null\n    return {\n      resourceKind: config.resourceKind,\n      resourceId: config.resourceId,\n      resourceIdFallback: config.resourceIdFallback,\n      organizationId: config.organizationId,\n      includeRelated: config.includeRelated,\n    }\n  }, [enabled, config?.resourceKind, config?.resourceId, config?.resourceIdFallback, config?.organizationId, config?.includeRelated])\n  const historyData = useVersionHistory(stableConfig, open)\n\n  if (!enabled) return null\n\n  return (\n    <>\n      <IconButton\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"default\"\n        onClick={() => setOpen(true)}\n        aria-label={t('audit_logs.version_history.title')}\n        title={t('audit_logs.version_history.title')}\n        className={buttonClassName}\n      >\n        <Clock className={cn('size-4', iconClassName)} />\n      </IconButton>\n      <VersionHistoryPanel\n        open={open}\n        onOpenChange={setOpen}\n        entries={historyData.entries}\n        isLoading={historyData.isLoading}\n        error={historyData.error}\n        hasMore={historyData.hasMore}\n        onLoadMore={historyData.loadMore}\n        t={t}\n        canUndoRedo={canUndoRedo}\n        autoCheckAcl={autoCheckAcl}\n      />\n    </>\n  )\n}\n"],
+  "mappings": ";AAiDI,mBAUI,KAVJ;AA/CJ,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAGnB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAW7B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,UAAU;AAAA,IACd,QAAQ,gBACH,QAAQ,cACR,OAAO,OAAO,UAAU,EAAE,KAAK,EAAE,SAAS;AAAA,EACjD;AACA,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,eAAe,MAAM,QAAqC,MAAM;AACpE,QAAI,CAAC,WAAW,CAAC,OAAQ,QAAO;AAChC,WAAO;AAAA,MACL,cAAc,OAAO;AAAA,MACrB,YAAY,OAAO;AAAA,MACnB,oBAAoB,OAAO;AAAA,MAC3B,gBAAgB,OAAO;AAAA,MACvB,gBAAgB,OAAO;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,cAAc,QAAQ,YAAY,QAAQ,oBAAoB,QAAQ,gBAAgB,QAAQ,cAAc,CAAC;AAClI,QAAM,cAAc,kBAAkB,cAAc,IAAI;AAExD,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,cAAY,EAAE,kCAAkC;AAAA,QAChD,OAAO,EAAE,kCAAkC;AAAA,QAC3C,WAAW;AAAA,QAEX,8BAAC,SAAM,WAAW,GAAG,UAAU,aAAa,GAAG;AAAA;AAAA,IACjD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc;AAAA,QACd,SAAS,YAAY;AAAA,QACrB,WAAW,YAAY;AAAA,QACvB,OAAO,YAAY;AAAA,QACnB,SAAS,YAAY;AAAA,QACrB,YAAY,YAAY;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2800.bfe2178a4f",
+  "version": "0.5.1-develop.2851.2854b4507f",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -132,12 +132,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2800.bfe2178a4f",
+    "@open-mercato/shared": "0.5.1-develop.2851.2854b4507f",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2800.bfe2178a4f",
+    "@open-mercato/shared": "0.5.1-develop.2851.2854b4507f",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/DataTable.tsx

@@ -204,6 +204,7 @@ export type DataTableProps<T> = {
   rowClickActionIds?: string[]
   disableRowClick?: boolean
   bulkActions?: BulkAction<T>[]
+  selectionScopeKey?: string
 
   // Auto FilterBar options (rendered as toolbar when provided and no custom toolbar passed)
   searchValue?: string
@@ -861,6 +862,7 @@ export function DataTable<T>({
   rowClickActionIds,
   disableRowClick = false,
   bulkActions: bulkActionsProp,
+  selectionScopeKey,
   searchValue,
   onSearchChange,
   searchPlaceholder,
@@ -1289,6 +1291,7 @@ export function DataTable<T>({
   const hasPropBulkActions = Array.isArray(bulkActionsProp) && bulkActionsProp.length > 0
   const hasInjectedBulkActions = injectedBulkActions.length > 0 || hasPropBulkActions
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const selectionScopeKeyRef = React.useRef<string | undefined>(selectionScopeKey)
   const table = useReactTable<T>({
     data: clientFilteredData,
     columns: mergedColumns,
@@ -1313,6 +1316,19 @@ export function DataTable<T>({
     onRowSelectionChange: setRowSelection,
   })
   React.useEffect(() => { if (sortingProp) setSorting(sortingProp) }, [sortingProp])
+  React.useEffect(() => {
+    if (selectionScopeKey === undefined) {
+      selectionScopeKeyRef.current = undefined
+      return
+    }
+    if (selectionScopeKeyRef.current === undefined) {
+      selectionScopeKeyRef.current = selectionScopeKey
+      return
+    }
+    if (selectionScopeKeyRef.current === selectionScopeKey) return
+    selectionScopeKeyRef.current = selectionScopeKey
+    setRowSelection({})
+  }, [selectionScopeKey])
   React.useEffect(() => {
     if (hasInjectedBulkActions) return
     if (Object.keys(rowSelection).length === 0) return

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

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { User } from 'lucide-react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { CollapsibleZoneLayout } from '../crud/CollapsibleZoneLayout'
 
@@ -76,6 +77,19 @@ describe('CollapsibleZoneLayout', () => {
       writable: true,
       value: currentWidth,
     })
+    const requestAnimationFrameMock = (callback: FrameRequestCallback) => {
+      return window.setTimeout(() => callback(0), 0)
+    }
+    Object.defineProperty(window, 'requestAnimationFrame', {
+      configurable: true,
+      writable: true,
+      value: requestAnimationFrameMock,
+    })
+    Object.defineProperty(globalThis, 'requestAnimationFrame', {
+      configurable: true,
+      writable: true,
+      value: requestAnimationFrameMock,
+    })
 
     Object.defineProperty(window, 'matchMedia', {
       configurable: true,
@@ -168,4 +182,50 @@ describe('CollapsibleZoneLayout', () => {
     expect(zone1.compareDocumentPosition(zone2) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0)
     expect(screen.getByRole('button', { name: 'Collapse form panel' })).toBeInTheDocument()
   })
+
+  it('expands and navigates to a section from the collapsed rail', async () => {
+    currentWidth = 1180
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      writable: true,
+      value: currentWidth,
+    })
+    const scrollIntoView = jest.fn()
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      configurable: true,
+      writable: true,
+      value: scrollIntoView,
+    })
+
+    const { container } = renderWithProviders(
+      <CollapsibleZoneLayout
+        zone1={(
+          <div id="collapsible-group-wrapper-personalData">
+            <button type="button" aria-controls="collapsible-group-personalData">Personal group</button>
+          </div>
+        )}
+        zone2={<div>Zone 2</div>}
+        entityName="Ada Lovelace"
+        pageType="person-v2"
+        sections={[
+          { id: 'personalData', icon: User, label: 'Personal data' },
+        ]}
+      />,
+      { dict: {} },
+    )
+
+    const layout = container.firstElementChild as HTMLElement
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'collapsed')
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Personal data' }))
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'stacked')
+      expect(screen.getByText('Personal group')).toHaveFocus()
+    })
+    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth', block: 'start' })
+  })
 })

package/src/backend/__tests__/DataTable.extensions.test.tsx

@@ -41,19 +41,21 @@ class ResizeObserverMock {
 
 function renderTable(elementProps: Record<string, unknown>) {
   const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
-  const view = render(
+  const renderElement = (props: Record<string, unknown>) => React.createElement(
+    QueryClientProvider as any,
+    { client: queryClient },
     React.createElement(
-      QueryClientProvider as any,
-      { client: queryClient },
-      React.createElement(
-        I18nProvider as any,
-        { locale: 'en', dict: {} },
-        React.createElement(DataTable as any, elementProps),
-      ),
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(DataTable as any, props),
     ),
   )
+  const view = render(
+    renderElement(elementProps),
+  )
   return {
     ...view,
+    rerenderTable: (nextProps: Record<string, unknown>) => view.rerender(renderElement(nextProps)),
     cleanupQueryClient: () => queryClient.clear(),
   }
 }
@@ -315,6 +317,57 @@ describe('DataTable extensions', () => {
     }
   })
 
+  it('clears selection when selectionScopeKey changes', async () => {
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [{ id: 'bulk', label: 'Bulk', onExecute: jest.fn() }],
+      selectionScopeKey: 'scope-1',
+    })
+
+    try {
+      fireEvent.click(screen.getByRole('checkbox', { name: 'Select all rows' }))
+
+      await waitFor(() => expect(screen.getByText('1 selected')).toBeInTheDocument())
+
+      rendered.rerenderTable({
+        columns: [{ accessorKey: 'name', header: 'Name' }],
+        data: [{ id: 'r1', name: 'Alice' }],
+        bulkActions: [{ id: 'bulk', label: 'Bulk', onExecute: jest.fn() }],
+        selectionScopeKey: 'scope-2',
+      })
+
+      await waitFor(() => expect(screen.queryByText('1 selected')).not.toBeInTheDocument())
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
+  it('keeps selection unchanged when selectionScopeKey is omitted', async () => {
+    const rendered = renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Alice' }],
+      bulkActions: [{ id: 'bulk', label: 'Bulk', onExecute: jest.fn() }],
+    })
+
+    try {
+      fireEvent.click(screen.getByRole('checkbox', { name: 'Select all rows' }))
+
+      await waitFor(() => expect(screen.getByText('1 selected')).toBeInTheDocument())
+
+      rendered.rerenderTable({
+        columns: [{ accessorKey: 'name', header: 'Name' }],
+        data: [{ id: 'r1', name: 'Alice' }],
+        bulkActions: [{ id: 'bulk', label: 'Bulk', onExecute: jest.fn() }],
+        title: 'Messages',
+      })
+
+      await waitFor(() => expect(screen.getByText('1 selected')).toBeInTheDocument())
+    } finally {
+      rendered.cleanupQueryClient()
+    }
+  })
+
   it('applies sticky positioning to the actions column when enabled', () => {
     const rendered = renderTable({
       columns: [{ accessorKey: 'name', header: 'Name' }],

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -188,7 +188,7 @@ export function ConfirmDialog({
         onClick={handleBackdropClick}
         className={cn(
           // Reset dialog defaults
-          "m-0 p-0 max-w-none bg-transparent border-none",
+          "m-0 p-0 max-w-none bg-transparent border-none pointer-events-auto",
           // Backdrop styling
           "backdrop:bg-black/50 backdrop:backdrop-blur-sm backdrop:transition-opacity",
           // Mobile: bottom sheet

package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx

@@ -0,0 +1,44 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { ConfirmDialog } from '../ConfirmDialog'
+
+function installDialogPolyfill() {
+  Object.defineProperty(HTMLDialogElement.prototype, 'showModal', {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.setAttribute('open', '')
+    },
+  })
+  Object.defineProperty(HTMLDialogElement.prototype, 'close', {
+    configurable: true,
+    value(this: HTMLDialogElement) {
+      this.removeAttribute('open')
+    },
+  })
+}
+
+describe('ConfirmDialog', () => {
+  beforeEach(() => {
+    installDialogPolyfill()
+  })
+
+  it('restores pointer events for nested modal confirmations', () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Discard unsaved changes?"
+        text="Changes will be discarded."
+        confirmText="Discard"
+        cancelText="Cancel"
+      />,
+    )
+
+    expect(screen.getByRole('alertdialog').className).toEqual(expect.stringContaining('pointer-events-auto'))
+  })
+})

package/src/backend/crud/CollapsibleGroup.tsx

@@ -25,7 +25,7 @@ export interface CollapsibleGroupHandle {
 export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, CollapsibleGroupProps>(
   function CollapsibleGroup({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = 'right', icon, children }, ref) {
     const t = useT()
-    const { expanded, toggle, setExpanded } = useGroupCollapse(pageType, groupId, defaultExpanded)
+    const { expanded, toggle, setExpanded, isHydrated } = useGroupCollapse(pageType, groupId, defaultExpanded)
     const contentId = `collapsible-group-${groupId}`
 
     React.useImperativeHandle(ref, () => ({
@@ -58,7 +58,17 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
     ) : null
 
     return (
-      <div className={cn('rounded-lg border bg-card', errorCount > 0 && 'border-destructive')}>
+      <div
+        id={`collapsible-group-wrapper-${groupId}`}
+        className={cn(
+          'rounded-lg border bg-card',
+          !isHydrated && 'invisible',
+          errorCount > 0 && 'border-destructive',
+        )}
+        data-collapsible-group-id={groupId}
+        data-persistence-hydrated={isHydrated ? 'true' : 'false'}
+        aria-hidden={isHydrated ? undefined : true}
+      >
         {title && (
           <Button
             type="button"

package/src/backend/crud/CollapsibleZoneLayout.tsx

@@ -4,6 +4,7 @@ import { ChevronsLeft, ChevronsRight } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Button } from '../../primitives/button'
+import { IconButton } from '../../primitives/icon-button'
 import { useZoneCollapse } from './useZoneCollapse'
 import type { LucideIcon } from 'lucide-react'
 
@@ -13,6 +14,8 @@ export interface ZoneSectionDescriptor {
   id: string
   icon: LucideIcon
   label: string
+  targetId?: string
+  ariaLabel?: string
   errorCount?: number
 }
 
@@ -53,7 +56,7 @@ export function CollapsibleZoneLayout({
   sections,
 }: CollapsibleZoneLayoutProps) {
   const t = useT()
-  const { collapsed, setCollapsed } = useZoneCollapse(pageType)
+  const { collapsed, setCollapsed, isHydrated } = useZoneCollapse(pageType)
   const canCollapse = React.useSyncExternalStore(
     subscribeViewport,
     getViewportSnapshot,
@@ -114,6 +117,20 @@ export function CollapsibleZoneLayout({
     setExpandedWhileConstrained(!canShowSideBySide)
   }, [canCollapse, canShowSideBySide, setCollapsed])
 
+  const handleSectionActivate = React.useCallback((section: ZoneSectionDescriptor) => {
+    if (!canCollapse) return
+    setCollapsed(false)
+    setExpandedWhileConstrained(!canShowSideBySide)
+    requestAnimationFrame(() => {
+      const target =
+        document.getElementById(section.targetId ?? `collapsible-group-wrapper-${section.id}`)
+        ?? document.getElementById(`collapsible-group-${section.id}`)
+      const headingButton = target?.querySelector<HTMLButtonElement>('button[aria-controls]')
+      target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      headingButton?.focus({ preventScroll: true })
+    })
+  }, [canCollapse, canShowSideBySide, setCollapsed])
+
   const handleCollapse = React.useCallback(() => {
     if (!canCollapse) return
     setExpandedWhileConstrained(false)
@@ -127,8 +144,11 @@ export function CollapsibleZoneLayout({
     <div
       ref={layoutRef}
       data-zone-layout-mode={layoutMode}
+      data-persistence-hydrated={isHydrated ? 'true' : 'false'}
+      aria-hidden={isHydrated ? undefined : true}
       className={cn(
         'flex gap-4',
+        !isHydrated && 'invisible',
         showStackedExpanded ? 'flex-col' : 'flex-col lg:flex-row',
       )}
     >
@@ -152,16 +172,21 @@ export function CollapsibleZoneLayout({
                   const SectionIcon = section.icon
                   const hasErrors = Boolean(section.errorCount && section.errorCount > 0)
                   return (
-                    <div
+                    <IconButton
                       key={section.id}
-                      className="relative flex size-9 items-center justify-center rounded-[10px] border border-transparent bg-muted/70 text-muted-foreground"
+                      type="button"
+                      variant="ghost"
+                      size="default"
+                      onClick={() => handleSectionActivate(section)}
+                      className="relative size-9 rounded-[10px] border border-transparent bg-muted/70 text-muted-foreground hover:border-border hover:bg-accent hover:text-accent-foreground"
                       title={section.label}
+                      aria-label={section.ariaLabel ?? section.label}
                     >
                       <SectionIcon className="size-4" />
                       {hasErrors ? (
                         <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-destructive" />
                       ) : null}
-                    </div>
+                    </IconButton>
                   )
                 })}
               </div>

package/src/backend/crud/__tests__/usePersistedBooleanFlag.test.ts

@@ -1,5 +1,8 @@
 /** @jest-environment jsdom */
-import { act, renderHook } from '@testing-library/react'
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { hydrateRoot } from 'react-dom/client'
+import { act, render, renderHook, waitFor } from '@testing-library/react'
 import { usePersistedBooleanFlag } from '../usePersistedBooleanFlag'
 
 describe('usePersistedBooleanFlag', () => {
@@ -39,11 +42,84 @@ describe('usePersistedBooleanFlag', () => {
     expect(localStorage.getItem('test:e')).toBe(JSON.stringify('0'))
   })
 
-  it('writes initial value to storage on mount', () => {
-    // React runs all effects on the same render cycle, so the "set mounted=true"
-    // effect fires before the write effect checks mounted.current. The hook DOES
-    // write the initial value on mount — this test locks in that observed behavior.
-    renderHook(() => usePersistedBooleanFlag('test:f', true))
-    expect(localStorage.getItem('test:f')).toBe(JSON.stringify('1'))
+  it('supports the functional setValue(prev => next) form', () => {
+    localStorage.setItem('test:functional', JSON.stringify('1'))
+    const { result } = renderHook(() => usePersistedBooleanFlag('test:functional', false))
+    act(() => { result.current.setValue((prev) => !prev) })
+    expect(result.current.value).toBe(false)
+    expect(localStorage.getItem('test:functional')).toBe(JSON.stringify('0'))
+  })
+
+  it('does NOT write the default value to storage when nothing was touched', () => {
+    renderHook(() => usePersistedBooleanFlag('test:no-write-on-mount', true))
+    expect(localStorage.getItem('test:no-write-on-mount')).toBeNull()
+  })
+
+  it('reflects stored value on the very first render (no useEffect flicker)', () => {
+    localStorage.setItem('test:first-render', JSON.stringify('1'))
+
+    const captured: boolean[] = []
+    function Probe() {
+      const { value } = usePersistedBooleanFlag('test:first-render', false)
+      captured.push(value)
+      return null
+    }
+    render(React.createElement(Probe))
+
+    expect(captured.length).toBeGreaterThanOrEqual(1)
+    expect(captured[0]).toBe(true)
+    expect(captured.every((v) => v === true)).toBe(true)
+  })
+
+  it('keeps SSR markup hidden until the client storage snapshot is known', async () => {
+    const storageKey = 'test:ssr-hidden'
+    function Probe() {
+      const { value, isHydrated } = usePersistedBooleanFlag(storageKey, false)
+      return React.createElement(
+        'div',
+        {
+          className: isHydrated ? 'ready' : 'invisible',
+          'data-ready': isHydrated ? 'true' : 'false',
+          'data-testid': 'probe',
+        },
+        value ? 'stored' : 'default',
+      )
+    }
+
+    const html = renderToString(React.createElement(Probe))
+    expect(html).toContain('data-ready="false"')
+    expect(html).toContain('invisible')
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    document.body.appendChild(container)
+    localStorage.setItem(storageKey, JSON.stringify('1'))
+
+    let root: ReturnType<typeof hydrateRoot> | null = null
+    await act(async () => {
+      root = hydrateRoot(container, React.createElement(Probe))
+    })
+
+    await waitFor(() => {
+      const probe = container.querySelector('[data-testid="probe"]')
+      expect(probe?.getAttribute('data-ready')).toBe('true')
+      expect(probe?.className).not.toContain('invisible')
+      expect(probe?.textContent).toBe('stored')
+    })
+
+    await act(async () => {
+      root?.unmount()
+    })
+    container.remove()
+  })
+
+  it('re-renders when another instance writes the same key (same-tab sync)', () => {
+    const { result: a } = renderHook(() => usePersistedBooleanFlag('test:sync', false))
+    const { result: b } = renderHook(() => usePersistedBooleanFlag('test:sync', false))
+    expect(a.current.value).toBe(false)
+    expect(b.current.value).toBe(false)
+    act(() => { a.current.setValue(true) })
+    expect(a.current.value).toBe(true)
+    expect(b.current.value).toBe(true)
   })
 })