@open-mercato/ui 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/dist/backend/Page.js

@@ -1,7 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@open-mercato/shared/lib/utils";
-function Page({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
+function Page({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), ...props, children });
 }
 function PageHeader({
   title,
@@ -16,8 +20,12 @@ function PageHeader({
     actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null
   ] });
 }
-function PageBody({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), children });
+function PageBody({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), ...props, children });
 }
 export {
   Page,

package/dist/backend/Page.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/backend/Page.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function Page({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-6', className)}>{children}</div>\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n}: {\n  title: string\n  description?: string\n  actions?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\">\n      <div className=\"min-w-0\">\n        <h1 className=\"text-xl sm:text-2xl font-semibold leading-tight\">{title}</h1>\n        {description ? <p className=\"text-sm text-muted-foreground mt-1\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  )\n}\n\nexport function PageBody({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('space-y-4', className)}>{children}</div>\n}\n"],
-  "mappings": "AAIS,cAcH,YAdG;AAHT,SAAS,UAAU;AAEZ,SAAS,KAAK,EAAE,UAAU,UAAU,GAAsD;AAC/F,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,8EACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACtE,cAAc,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAAO;AAAA,OACvF;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,qCAAqC,mBAAQ,IAAS;AAAA,KAClF;AAEJ;AAEO,SAAS,SAAS,EAAE,UAAU,UAAU,GAAsD;AACnG,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;",
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport function Page({\n  children,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn('space-y-6', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport function PageHeader({\n  title,\n  description,\n  actions,\n}: {\n  title: string\n  description?: string\n  actions?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\">\n      <div className=\"min-w-0\">\n        <h1 className=\"text-xl sm:text-2xl font-semibold leading-tight\">{title}</h1>\n        {description ? <p className=\"text-sm text-muted-foreground mt-1\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  )\n}\n\nexport function PageBody({\n  children,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn('space-y-4', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n"],
+  "mappings": "AASI,cAiBE,YAjBF;AARJ,SAAS,UAAU;AAEZ,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAC7C,UACH;AAEJ;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,8EACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,mDAAmD,iBAAM;AAAA,MACtE,cAAc,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAAO;AAAA,OACvF;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,qCAAqC,mBAAQ,IAAS;AAAA,KAClF;AAEJ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAC7C,UACH;AAEJ;",
   "names": []
 }

package/dist/backend/confirm-dialog/ConfirmDialog.js

@@ -24,6 +24,9 @@ function ConfirmDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const cancelButtonRef = React.useRef(null);
   const confirmButtonRef = React.useRef(null);
+  const reactId = React.useId();
+  const titleId = `confirm-dialog-title-${reactId}`;
+  const descriptionId = `confirm-dialog-description-${reactId}`;
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
   const setOpen = isControlled ? onOpenChange || (() => {
@@ -111,8 +114,8 @@ function ConfirmDialog({
       {
         ref: dialogRef,
         role: "alertdialog",
-        "aria-labelledby": "confirm-dialog-title",
-        "aria-describedby": text ? "confirm-dialog-description" : void 0,
+        "aria-labelledby": titleId,
+        "aria-describedby": text ? descriptionId : void 0,
         onClick: handleBackdropClick,
         className: cn(
           // Reset dialog defaults
@@ -157,7 +160,7 @@ function ConfirmDialog({
               /* @__PURE__ */ jsx(
                 "h2",
                 {
-                  id: "confirm-dialog-title",
+                  id: titleId,
                   className: cn(
                     "text-sm font-medium leading-snug tracking-tight pr-6",
                     // Mobile: centered, Desktop: left-aligned
@@ -169,7 +172,7 @@ function ConfirmDialog({
               text && /* @__PURE__ */ jsx(
                 "p",
                 {
-                  id: "confirm-dialog-description",
+                  id: descriptionId,
                   className: "text-sm font-medium leading-snug text-muted-foreground",
                   children: text
                 }

package/dist/backend/confirm-dialog/ConfirmDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/confirm-dialog/ConfirmDialog.tsx"],
-  "sourcesContent": ["\"use client\";\nimport * as React from \"react\";\nimport { useT } from \"@open-mercato/shared/lib/i18n/context\";\nimport { Button } from \"@open-mercato/ui/primitives/button\";\nimport { IconButton } from \"../../primitives/icon-button\";\nimport { cn } from \"@open-mercato/shared/lib/utils\";\nimport { Loader2, X } from \"lucide-react\";\n\nexport type ConfirmDialogProps = {\n  /** Whether the dialog is open (controlled mode \u2014 used by useConfirmDialog) */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode) */\n  onOpenChange?: (open: boolean) => void;\n  /** Callback when user confirms */\n  onConfirm: () => void | Promise<void>;\n  /** Callback when user cancels (optional, defaults to closing) */\n  onCancel?: () => void;\n  /** Dialog title. Defaults to i18n key \"ui.dialogs.confirm.defaultTitle\" (\"Are you sure?\") */\n  title?: string;\n  /** Dialog body text / description */\n  text?: string;\n  /** Confirm button label. Defaults to i18n \"ui.dialogs.confirm.confirmText\" (\"Confirm\").\n   *  Pass `false` to hide the confirm button entirely. */\n  confirmText?: string | false;\n  /** Cancel button label. Defaults to i18n \"ui.dialogs.confirm.cancelText\" (\"Cancel\").\n   *  Pass `false` to hide the cancel button entirely. */\n  cancelText?: string | false;\n  /** Visual variant \u2014 \"destructive\" renders the confirm button in red */\n  variant?: \"default\" | \"destructive\";\n  /** Whether the confirm button shows a loading spinner.\n   *  Useful for async onConfirm handlers (e.g., waiting for API response before closing). */\n  loading?: boolean;\n  /** Trigger element \u2014 when provided, component manages its own open state (declarative mode).\n   *  Clicking the trigger opens the dialog. */\n  trigger?: React.ReactNode;\n};\n\nexport function ConfirmDialog({\n  open: controlledOpen,\n  onOpenChange,\n  onConfirm,\n  onCancel,\n  title,\n  text,\n  confirmText,\n  cancelText,\n  variant = \"default\",\n  loading = false,\n  trigger,\n}: ConfirmDialogProps) {\n  const t = useT();\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\n  const confirmButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  // Determine if we're in controlled mode (open prop provided) or declarative mode (trigger provided)\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const setOpen = isControlled\n    ? onOpenChange || (() => {})\n    : setInternalOpen;\n  const handleCancelCallback = React.useCallback(() => {\n    if (!isControlled) {\n      onCancel?.();\n    }\n  }, [isControlled, onCancel]);\n\n  // Default text values from i18n\n  const resolvedTitle =\n    title ?? t(\"ui.dialogs.confirm.defaultTitle\", \"Are you sure?\");\n  const resolvedConfirmText =\n    confirmText === false\n      ? false\n      : confirmText ?? t(\"ui.dialogs.confirm.confirmText\", \"Confirm\");\n  const resolvedCancelText =\n    cancelText === false\n      ? false\n      : cancelText ?? t(\"ui.dialogs.confirm.cancelText\", \"Cancel\");\n  const closeAriaLabel = t(\"ui.dialog.close.ariaLabel\", \"Close\");\n  const requestClose = React.useCallback(() => {\n    setOpen(false);\n    handleCancelCallback();\n  }, [setOpen, handleCancelCallback]);\n\n  // Handle dialog open/close with native showModal/close\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n        // Focus cancel button (safe default) or confirm if no cancel\n        setTimeout(() => {\n          if (resolvedCancelText !== false && cancelButtonRef.current) {\n            cancelButtonRef.current.focus();\n          } else if (confirmButtonRef.current) {\n            confirmButtonRef.current.focus();\n          }\n        }, 0);\n      }\n    } else {\n      if (dialog.open) {\n        dialog.close();\n      }\n    }\n  }, [open, resolvedCancelText]);\n\n  // Handle native cancel event (Escape key)\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    const handleCancel = (e: Event) => {\n      // Prevent close if loading\n      if (loading) {\n        e.preventDefault();\n        return;\n      }\n      requestClose();\n    };\n\n    dialog.addEventListener(\"cancel\", handleCancel);\n    return () => dialog.removeEventListener(\"cancel\", handleCancel);\n  }, [loading, requestClose]);\n\n  // Handle backdrop click\n  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    // Only close if clicking directly on the dialog (backdrop), not its children\n    if (e.target === dialogRef.current && !loading) {\n      requestClose();\n    }\n  };\n\n  // Handle keyboard shortcuts\n  React.useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Cmd/Ctrl+Enter confirms\n      if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\" && !loading) {\n        e.preventDefault();\n        handleConfirm();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, loading]);\n\n  const handleConfirm = async () => {\n    await onConfirm();\n    // Don't auto-close if loading \u2014 let the parent control when to close\n    if (!loading) {\n      setOpen(false);\n    }\n  };\n\n  const handleCancel = () => {\n    requestClose();\n  };\n\n  const handleTriggerClick = () => {\n    if (trigger) {\n      setOpen(true);\n    }\n  };\n\n  return (\n    <>\n      {trigger && (\n        <div onClick={handleTriggerClick} className=\"inline-block\" role=\"presentation\">\n          {trigger}\n        </div>\n      )}\n\n      <dialog\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-labelledby=\"confirm-dialog-title\"\n        aria-describedby={text ? \"confirm-dialog-description\" : undefined}\n        onClick={handleBackdropClick}\n        className={cn(\n          // Reset dialog defaults\n          \"m-0 p-0 max-w-none bg-transparent border-none\",\n          // Backdrop styling\n          \"backdrop:bg-black/50 backdrop:backdrop-blur-sm backdrop:transition-opacity\",\n          // Mobile: bottom sheet\n          \"fixed inset-x-0 bottom-0 top-auto w-full\",\n          // Desktop: centered\n          \"sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2\",\n          // Animation with reduced motion support\n          \"motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4\",\n          \"sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95\",\n          // Duration\n          \"motion-safe:open:duration-300\"\n        )}\n      >\n        <div\n          role=\"document\"\n          className={cn(\n            // Panel container\n            \"flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg\",\n            \"sm:rounded-xl sm:border\",\n            // Relative positioning for close button\n            \"relative\"\n          )}\n        >\n          {/* Close button */}\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCancel}\n            disabled={loading}\n            aria-label={closeAriaLabel}\n            className=\"absolute right-4 top-4 opacity-70 hover:opacity-100\"\n          >\n            <X className=\"h-4 w-4\" />\n          </IconButton>\n\n          {/* Title */}\n          <h2\n            id=\"confirm-dialog-title\"\n            className={cn(\n              \"text-sm font-medium leading-snug tracking-tight pr-6\",\n              // Mobile: centered, Desktop: left-aligned\n              \"text-center sm:text-left\"\n            )}\n          >\n            {resolvedTitle}\n          </h2>\n\n          {/* Description (optional) */}\n          {text && (\n            <p\n              id=\"confirm-dialog-description\"\n              className=\"text-sm font-medium leading-snug text-muted-foreground\"\n            >\n              {text}\n            </p>\n          )}\n\n          {/* Actions */}\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            {resolvedCancelText !== false && (\n              <Button\n                ref={cancelButtonRef}\n                variant=\"outline\"\n                onClick={handleCancel}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {resolvedCancelText}\n              </Button>\n            )}\n            {resolvedConfirmText !== false && (\n              <Button\n                ref={confirmButtonRef}\n                variant={variant === \"destructive\" ? \"destructive\" : \"default\"}\n                onClick={handleConfirm}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {loading && <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />}\n                {resolvedConfirmText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </dialog>\n    </>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\";\nimport * as React from \"react\";\nimport { useT } from \"@open-mercato/shared/lib/i18n/context\";\nimport { Button } from \"@open-mercato/ui/primitives/button\";\nimport { IconButton } from \"../../primitives/icon-button\";\nimport { cn } from \"@open-mercato/shared/lib/utils\";\nimport { Loader2, X } from \"lucide-react\";\n\nexport type ConfirmDialogProps = {\n  /** Whether the dialog is open (controlled mode \u2014 used by useConfirmDialog) */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode) */\n  onOpenChange?: (open: boolean) => void;\n  /** Callback when user confirms */\n  onConfirm: () => void | Promise<void>;\n  /** Callback when user cancels (optional, defaults to closing) */\n  onCancel?: () => void;\n  /** Dialog title. Defaults to i18n key \"ui.dialogs.confirm.defaultTitle\" (\"Are you sure?\") */\n  title?: string;\n  /** Dialog body text / description */\n  text?: string;\n  /** Confirm button label. Defaults to i18n \"ui.dialogs.confirm.confirmText\" (\"Confirm\").\n   *  Pass `false` to hide the confirm button entirely. */\n  confirmText?: string | false;\n  /** Cancel button label. Defaults to i18n \"ui.dialogs.confirm.cancelText\" (\"Cancel\").\n   *  Pass `false` to hide the cancel button entirely. */\n  cancelText?: string | false;\n  /** Visual variant \u2014 \"destructive\" renders the confirm button in red */\n  variant?: \"default\" | \"destructive\";\n  /** Whether the confirm button shows a loading spinner.\n   *  Useful for async onConfirm handlers (e.g., waiting for API response before closing). */\n  loading?: boolean;\n  /** Trigger element \u2014 when provided, component manages its own open state (declarative mode).\n   *  Clicking the trigger opens the dialog. */\n  trigger?: React.ReactNode;\n};\n\nexport function ConfirmDialog({\n  open: controlledOpen,\n  onOpenChange,\n  onConfirm,\n  onCancel,\n  title,\n  text,\n  confirmText,\n  cancelText,\n  variant = \"default\",\n  loading = false,\n  trigger,\n}: ConfirmDialogProps) {\n  const t = useT();\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\n  const confirmButtonRef = React.useRef<HTMLButtonElement>(null);\n  // Unique IDs so multiple ConfirmDialog instances on the same page don't\n  // collide and make `aria-labelledby` resolve to the wrong dialog's title.\n  const reactId = React.useId();\n  const titleId = `confirm-dialog-title-${reactId}`;\n  const descriptionId = `confirm-dialog-description-${reactId}`;\n\n  // Determine if we're in controlled mode (open prop provided) or declarative mode (trigger provided)\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const setOpen = isControlled\n    ? onOpenChange || (() => {})\n    : setInternalOpen;\n  const handleCancelCallback = React.useCallback(() => {\n    if (!isControlled) {\n      onCancel?.();\n    }\n  }, [isControlled, onCancel]);\n\n  // Default text values from i18n\n  const resolvedTitle =\n    title ?? t(\"ui.dialogs.confirm.defaultTitle\", \"Are you sure?\");\n  const resolvedConfirmText =\n    confirmText === false\n      ? false\n      : confirmText ?? t(\"ui.dialogs.confirm.confirmText\", \"Confirm\");\n  const resolvedCancelText =\n    cancelText === false\n      ? false\n      : cancelText ?? t(\"ui.dialogs.confirm.cancelText\", \"Cancel\");\n  const closeAriaLabel = t(\"ui.dialog.close.ariaLabel\", \"Close\");\n  const requestClose = React.useCallback(() => {\n    setOpen(false);\n    handleCancelCallback();\n  }, [setOpen, handleCancelCallback]);\n\n  // Handle dialog open/close with native showModal/close\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n        // Focus cancel button (safe default) or confirm if no cancel\n        setTimeout(() => {\n          if (resolvedCancelText !== false && cancelButtonRef.current) {\n            cancelButtonRef.current.focus();\n          } else if (confirmButtonRef.current) {\n            confirmButtonRef.current.focus();\n          }\n        }, 0);\n      }\n    } else {\n      if (dialog.open) {\n        dialog.close();\n      }\n    }\n  }, [open, resolvedCancelText]);\n\n  // Handle native cancel event (Escape key)\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    const handleCancel = (e: Event) => {\n      // Prevent close if loading\n      if (loading) {\n        e.preventDefault();\n        return;\n      }\n      requestClose();\n    };\n\n    dialog.addEventListener(\"cancel\", handleCancel);\n    return () => dialog.removeEventListener(\"cancel\", handleCancel);\n  }, [loading, requestClose]);\n\n  // Handle backdrop click\n  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    // Only close if clicking directly on the dialog (backdrop), not its children\n    if (e.target === dialogRef.current && !loading) {\n      requestClose();\n    }\n  };\n\n  // Handle keyboard shortcuts\n  React.useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Cmd/Ctrl+Enter confirms\n      if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\" && !loading) {\n        e.preventDefault();\n        handleConfirm();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, loading]);\n\n  const handleConfirm = async () => {\n    await onConfirm();\n    // Don't auto-close if loading \u2014 let the parent control when to close\n    if (!loading) {\n      setOpen(false);\n    }\n  };\n\n  const handleCancel = () => {\n    requestClose();\n  };\n\n  const handleTriggerClick = () => {\n    if (trigger) {\n      setOpen(true);\n    }\n  };\n\n  return (\n    <>\n      {trigger && (\n        <div onClick={handleTriggerClick} className=\"inline-block\" role=\"presentation\">\n          {trigger}\n        </div>\n      )}\n\n      <dialog\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-labelledby={titleId}\n        aria-describedby={text ? descriptionId : undefined}\n        onClick={handleBackdropClick}\n        className={cn(\n          // Reset dialog defaults\n          \"m-0 p-0 max-w-none bg-transparent border-none\",\n          // Backdrop styling\n          \"backdrop:bg-black/50 backdrop:backdrop-blur-sm backdrop:transition-opacity\",\n          // Mobile: bottom sheet\n          \"fixed inset-x-0 bottom-0 top-auto w-full\",\n          // Desktop: centered\n          \"sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2\",\n          // Animation with reduced motion support\n          \"motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4\",\n          \"sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95\",\n          // Duration\n          \"motion-safe:open:duration-300\"\n        )}\n      >\n        <div\n          role=\"document\"\n          className={cn(\n            // Panel container\n            \"flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg\",\n            \"sm:rounded-xl sm:border\",\n            // Relative positioning for close button\n            \"relative\"\n          )}\n        >\n          {/* Close button */}\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCancel}\n            disabled={loading}\n            aria-label={closeAriaLabel}\n            className=\"absolute right-4 top-4 opacity-70 hover:opacity-100\"\n          >\n            <X className=\"h-4 w-4\" />\n          </IconButton>\n\n          {/* Title */}\n          <h2\n            id={titleId}\n            className={cn(\n              \"text-sm font-medium leading-snug tracking-tight pr-6\",\n              // Mobile: centered, Desktop: left-aligned\n              \"text-center sm:text-left\"\n            )}\n          >\n            {resolvedTitle}\n          </h2>\n\n          {/* Description (optional) */}\n          {text && (\n            <p\n              id={descriptionId}\n              className=\"text-sm font-medium leading-snug text-muted-foreground\"\n            >\n              {text}\n            </p>\n          )}\n\n          {/* Actions */}\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            {resolvedCancelText !== false && (\n              <Button\n                ref={cancelButtonRef}\n                variant=\"outline\"\n                onClick={handleCancel}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {resolvedCancelText}\n              </Button>\n            )}\n            {resolvedConfirmText !== false && (\n              <Button\n                ref={confirmButtonRef}\n                variant={variant === \"destructive\" ? \"destructive\" : \"default\"}\n                onClick={handleConfirm}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {loading && <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />}\n                {resolvedConfirmText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </dialog>\n    </>\n  );\n}\n"],
+  "mappings": "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",
   "names": ["handleCancel"]
 }

package/dist/backend/crud/CollapsibleGroup.js

@@ -0,0 +1,88 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "../../primitives/button.js";
+import { useGroupCollapse } from "./useGroupCollapse.js";
+const CollapsibleGroup = React.forwardRef(
+  function CollapsibleGroup2({ 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 contentId = `collapsible-group-${groupId}`;
+    React.useImperativeHandle(ref, () => ({
+      expand: () => setExpanded(true)
+    }), [setExpanded]);
+    const chevronIcon = /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        className: cn(
+          "size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200",
+          expanded && "rotate-180"
+        )
+      }
+    );
+    const fieldCountLabel = typeof fieldCount === "number" && fieldCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs font-normal text-muted-foreground", children: [
+      "\xB7 ",
+      fieldCount,
+      " ",
+      fieldCount === 1 ? t("ui.collapsible.fieldSingular", "field") : t("ui.collapsible.fieldPlural", "fields")
+    ] }) : null;
+    const errorBadge = errorCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive", children: errorCount === 1 ? t("ui.collapsible.errorSingular", "{{count}} error", { count: errorCount }) : t("ui.collapsible.errorPlural", "{{count}} errors", { count: errorCount }) }) : null;
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border bg-card", errorCount > 0 && "border-destructive"), children: [
+      title && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "muted",
+          onClick: toggle,
+          className: cn(
+            "w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg",
+            chevronPosition === "left" ? "justify-start gap-2" : "justify-between"
+          ),
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          children: chevronPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            chevronIcon,
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
+                icon,
+                !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: title }),
+              fieldCountLabel,
+              errorBadge
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              icon && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 text-muted-foreground", children: [
+                icon,
+                !expanded && errorCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: title }),
+              fieldCountLabel,
+              errorBadge
+            ] }),
+            chevronIcon
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: contentId,
+          className: cn(
+            "motion-safe:transition-all motion-safe:duration-200 overflow-hidden",
+            expanded ? "max-h-[5000px] opacity-100" : "max-h-0 opacity-0"
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children })
+        }
+      )
+    ] });
+  }
+);
+export {
+  CollapsibleGroup
+};
+//# sourceMappingURL=CollapsibleGroup.js.map

package/dist/backend/crud/CollapsibleGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/CollapsibleGroup.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { useGroupCollapse } from './useGroupCollapse'\n\nexport interface CollapsibleGroupProps {\n  groupId: string\n  title?: string\n  pageType: string\n  defaultExpanded?: boolean\n  errorCount?: number\n  fieldCount?: number\n  chevronPosition?: 'left' | 'right'\n  icon?: React.ReactNode\n  children: React.ReactNode\n}\n\nexport interface CollapsibleGroupHandle {\n  expand: () => void\n}\n\nexport const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, CollapsibleGroupProps>(\n  function CollapsibleGroup({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = 'right', icon, children }, ref) {\n    const t = useT()\n    const { expanded, toggle, setExpanded } = useGroupCollapse(pageType, groupId, defaultExpanded)\n    const contentId = `collapsible-group-${groupId}`\n\n    React.useImperativeHandle(ref, () => ({\n      expand: () => setExpanded(true),\n    }), [setExpanded])\n\n    const chevronIcon = (\n      <ChevronDown\n        className={cn(\n          'size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200',\n          expanded && 'rotate-180'\n        )}\n      />\n    )\n\n    const fieldCountLabel = typeof fieldCount === 'number' && fieldCount > 0 ? (\n      <span className=\"text-xs font-normal text-muted-foreground\">\n        \u00B7 {fieldCount} {fieldCount === 1\n          ? t('ui.collapsible.fieldSingular', 'field')\n          : t('ui.collapsible.fieldPlural', 'fields')}\n      </span>\n    ) : null\n\n    const errorBadge = errorCount > 0 ? (\n      <span className=\"inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive\">\n        {errorCount === 1\n          ? t('ui.collapsible.errorSingular', '{{count}} error', { count: errorCount })\n          : t('ui.collapsible.errorPlural', '{{count}} errors', { count: errorCount })}\n      </span>\n    ) : null\n\n    return (\n      <div className={cn('rounded-lg border bg-card', errorCount > 0 && 'border-destructive')}>\n        {title && (\n          <Button\n            type=\"button\"\n            variant=\"muted\"\n            onClick={toggle}\n            className={cn(\n              'w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg',\n              chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',\n            )}\n            aria-expanded={expanded}\n            aria-controls={contentId}\n          >\n            {chevronPosition === 'left' ? (\n              <>\n                {chevronIcon}\n                <span className=\"flex items-center gap-2\">\n                  {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                  <span>{title}</span>\n                  {fieldCountLabel}\n                  {errorBadge}\n                </span>\n              </>\n            ) : (\n              <>\n                <span className=\"flex items-center gap-2\">\n                  {icon && <span className=\"relative shrink-0 text-muted-foreground\">{icon}{!expanded && errorCount > 0 && <span className=\"absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive\" />}</span>}\n                  <span>{title}</span>\n                  {fieldCountLabel}\n                  {errorBadge}\n                </span>\n                {chevronIcon}\n              </>\n            )}\n          </Button>\n        )}\n        <div\n          id={contentId}\n          className={cn(\n            'motion-safe:transition-all motion-safe:duration-200 overflow-hidden',\n            expanded ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'\n          )}\n        >\n          <div className=\"px-4 py-3\">\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],
+  "mappings": ";AAmCM,SAuCQ,UAvCR,KASA,YATA;AAlCN,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAkB1B,MAAM,mBAAmB,MAAM;AAAA,EACpC,SAASA,kBAAiB,EAAE,SAAS,OAAO,UAAU,kBAAkB,MAAM,aAAa,GAAG,YAAY,kBAAkB,SAAS,MAAM,SAAS,GAAG,KAAK;AAC1J,UAAM,IAAI,KAAK;AACf,UAAM,EAAE,UAAU,QAAQ,YAAY,IAAI,iBAAiB,UAAU,SAAS,eAAe;AAC7F,UAAM,YAAY,qBAAqB,OAAO;AAE9C,UAAM,oBAAoB,KAAK,OAAO;AAAA,MACpC,QAAQ,MAAM,YAAY,IAAI;AAAA,IAChC,IAAI,CAAC,WAAW,CAAC;AAEjB,UAAM,cACJ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAGF,UAAM,kBAAkB,OAAO,eAAe,YAAY,aAAa,IACrE,qBAAC,UAAK,WAAU,6CAA4C;AAAA;AAAA,MACvD;AAAA,MAAW;AAAA,MAAE,eAAe,IAC3B,EAAE,gCAAgC,OAAO,IACzC,EAAE,8BAA8B,QAAQ;AAAA,OAC9C,IACE;AAEJ,UAAM,aAAa,aAAa,IAC9B,oBAAC,UAAK,WAAU,4GACb,yBAAe,IACZ,EAAE,gCAAgC,mBAAmB,EAAE,OAAO,WAAW,CAAC,IAC1E,EAAE,8BAA8B,oBAAoB,EAAE,OAAO,WAAW,CAAC,GAC/E,IACE;AAEJ,WACE,qBAAC,SAAI,WAAW,GAAG,6BAA6B,aAAa,KAAK,oBAAoB,GACnF;AAAA,eACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,oBAAoB,SAAS,wBAAwB;AAAA,UACvD;AAAA,UACA,iBAAe;AAAA,UACf,iBAAe;AAAA,UAEd,8BAAoB,SACnB,iCACG;AAAA;AAAA,YACD,qBAAC,UAAK,WAAU,2BACb;AAAA,sBAAQ,qBAAC,UAAK,WAAU,2CAA2C;AAAA;AAAA,gBAAM,CAAC,YAAY,aAAa,KAAK,oBAAC,UAAK,WAAU,mEAAkE;AAAA,iBAAG;AAAA,cAC9L,oBAAC,UAAM,iBAAM;AAAA,cACZ;AAAA,cACA;AAAA,eACH;AAAA,aACF,IAEA,iCACE;AAAA,iCAAC,UAAK,WAAU,2BACb;AAAA,sBAAQ,qBAAC,UAAK,WAAU,2CAA2C;AAAA;AAAA,gBAAM,CAAC,YAAY,aAAa,KAAK,oBAAC,UAAK,WAAU,mEAAkE;AAAA,iBAAG;AAAA,cAC9L,oBAAC,UAAM,iBAAM;AAAA,cACZ;AAAA,cACA;AAAA,eACH;AAAA,YACC;AAAA,aACH;AAAA;AAAA,MAEJ;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA,WAAW,+BAA+B;AAAA,UAC5C;AAAA,UAEA,8BAAC,SAAI,WAAU,aACZ,UACH;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "names": ["CollapsibleGroup"]
+}

package/dist/backend/crud/CollapsibleZoneLayout.js

@@ -0,0 +1,178 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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.js";
+import { useZoneCollapse } from "./useZoneCollapse.js";
+const SIDE_BY_SIDE_MIN_WIDTH = 1280;
+function subscribeViewport(callback) {
+  const mediaQuery = window.matchMedia("(min-width: 1024px)");
+  mediaQuery.addEventListener("change", callback);
+  return () => mediaQuery.removeEventListener("change", callback);
+}
+function getViewportSnapshot() {
+  return window.matchMedia("(min-width: 1024px)").matches;
+}
+function getViewportServerSnapshot() {
+  return false;
+}
+function CollapsibleZoneLayout({
+  zone1,
+  zone2,
+  entityName,
+  pageType,
+  zone1DefaultWidth,
+  errorCount = 0,
+  isDirty = false,
+  sections
+}) {
+  const t = useT();
+  const { collapsed, setCollapsed } = useZoneCollapse(pageType);
+  const canCollapse = React.useSyncExternalStore(
+    subscribeViewport,
+    getViewportSnapshot,
+    getViewportServerSnapshot
+  );
+  const layoutRef = React.useRef(null);
+  const expandButtonRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(() => typeof window === "undefined" ? 0 : window.innerWidth);
+  const [expandedWhileConstrained, setExpandedWhileConstrained] = React.useState(false);
+  React.useEffect(() => {
+    const node = layoutRef.current;
+    if (!node) return;
+    const updateWidth = (nextWidth) => {
+      setContainerWidth((prev) => Math.abs(prev - nextWidth) < 1 ? prev : nextWidth);
+    };
+    const measure = () => {
+      updateWidth(node.getBoundingClientRect().width || window.innerWidth);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      updateWidth(entry.contentRect.width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const canShowSideBySide = containerWidth >= SIDE_BY_SIDE_MIN_WIDTH;
+  React.useEffect(() => {
+    if (canShowSideBySide) {
+      setExpandedWhileConstrained(false);
+    }
+  }, [canShowSideBySide]);
+  const showCollapsedRail = canCollapse && (collapsed || !canShowSideBySide && !expandedWhileConstrained);
+  const showStackedExpanded = !showCollapsedRail && !canShowSideBySide;
+  const layoutMode = showCollapsedRail ? "collapsed" : showStackedExpanded ? "stacked" : "side-by-side";
+  const zone1SideBySideStyle = zone1DefaultWidth ? { width: zone1DefaultWidth, flexBasis: zone1DefaultWidth } : void 0;
+  const handleExpand = React.useCallback(() => {
+    if (!canCollapse) return;
+    setCollapsed(false);
+    setExpandedWhileConstrained(!canShowSideBySide);
+  }, [canCollapse, canShowSideBySide, setCollapsed]);
+  const handleCollapse = React.useCallback(() => {
+    if (!canCollapse) return;
+    setExpandedWhileConstrained(false);
+    setCollapsed(true);
+    requestAnimationFrame(() => {
+      expandButtonRef.current?.focus();
+    });
+  }, [canCollapse, setCollapsed]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: layoutRef,
+      "data-zone-layout-mode": layoutMode,
+      className: cn(
+        "flex gap-4",
+        showStackedExpanded ? "flex-col" : "flex-col lg:flex-row"
+      ),
+      children: showCollapsedRail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex shrink-0 flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: expandButtonRef,
+              type: "button",
+              variant: "default",
+              size: "sm",
+              onClick: handleExpand,
+              className: "h-auto rounded-[10px] px-1.5 py-2 shadow-sm",
+              "aria-label": t("ui.zone.expand", "Expand form panel"),
+              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "size-4" })
+            }
+          ),
+          sections?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 rounded-[14px] border border-border/70 bg-card px-2 py-3", children: sections.map((section) => {
+            const SectionIcon = section.icon;
+            const hasErrors = Boolean(section.errorCount && section.errorCount > 0);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex size-9 items-center justify-center rounded-[10px] border border-transparent bg-muted/70 text-muted-foreground",
+                title: section.label,
+                children: [
+                  /* @__PURE__ */ jsx(SectionIcon, { className: "size-4" }),
+                  hasErrors ? /* @__PURE__ */ jsx("span", { className: "absolute right-1.5 top-1.5 size-1.5 rounded-full bg-destructive" }) : null
+                ]
+              },
+              section.id
+            );
+          }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: zone2 })
+      ] }) : showStackedExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
+          canCollapse ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: handleCollapse,
+              className: "h-auto rounded-[6px] border bg-card px-1.5 py-2",
+              "aria-label": t("ui.zone.collapse", "Collapse form panel"),
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-4" })
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx("div", { className: "w-full", children: zone1 })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-full", children: zone2 })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("w-full lg:shrink-0", zone1DefaultWidth ? void 0 : "lg:w-[40%]"),
+            style: zone1SideBySideStyle,
+            children: zone1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex relative shrink-0 w-8 items-start justify-center pt-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: handleCollapse,
+              className: "relative z-10 h-auto rounded-[6px] border bg-card px-1.5 py-2",
+              "aria-label": t("ui.zone.collapse", "Collapse form panel"),
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 w-full lg:flex-1", children: zone2 })
+      ] })
+    }
+  );
+}
+export {
+  CollapsibleZoneLayout
+};
+//# sourceMappingURL=CollapsibleZoneLayout.js.map

package/dist/backend/crud/CollapsibleZoneLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/CollapsibleZoneLayout.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { ChevronsLeft, ChevronsRight } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from '../../primitives/button'\nimport { useZoneCollapse } from './useZoneCollapse'\nimport type { LucideIcon } from 'lucide-react'\n\nconst SIDE_BY_SIDE_MIN_WIDTH = 1280\n\nexport interface ZoneSectionDescriptor {\n  id: string\n  icon: LucideIcon\n  label: string\n  errorCount?: number\n}\n\nexport interface CollapsibleZoneLayoutProps {\n  zone1: React.ReactNode\n  zone2: React.ReactNode\n  entityName: string\n  pageType: string\n  zone1DefaultWidth?: string\n  errorCount?: number\n  isDirty?: boolean\n  /** Section descriptors for the collapsed rail icon sidebar. When omitted the rail shows the legacy minimal view. */\n  sections?: ZoneSectionDescriptor[]\n}\n\nfunction subscribeViewport(callback: () => void) {\n  const mediaQuery = window.matchMedia('(min-width: 1024px)')\n  mediaQuery.addEventListener('change', callback)\n  return () => mediaQuery.removeEventListener('change', callback)\n}\n\nfunction getViewportSnapshot() {\n  return window.matchMedia('(min-width: 1024px)').matches\n}\n\nfunction getViewportServerSnapshot() {\n  return false\n}\n\nexport function CollapsibleZoneLayout({\n  zone1,\n  zone2,\n  entityName,\n  pageType,\n  zone1DefaultWidth,\n  errorCount = 0,\n  isDirty = false,\n  sections,\n}: CollapsibleZoneLayoutProps) {\n  const t = useT()\n  const { collapsed, setCollapsed } = useZoneCollapse(pageType)\n  const canCollapse = React.useSyncExternalStore(\n    subscribeViewport,\n    getViewportSnapshot,\n    getViewportServerSnapshot,\n  )\n  const layoutRef = React.useRef<HTMLDivElement>(null)\n  const expandButtonRef = React.useRef<HTMLButtonElement>(null)\n  const [containerWidth, setContainerWidth] = React.useState(() => (typeof window === 'undefined' ? 0 : window.innerWidth))\n  const [expandedWhileConstrained, setExpandedWhileConstrained] = React.useState(false)\n\n  React.useEffect(() => {\n    const node = layoutRef.current\n    if (!node) return\n\n    const updateWidth = (nextWidth: number) => {\n      setContainerWidth((prev) => (Math.abs(prev - nextWidth) < 1 ? prev : nextWidth))\n    }\n\n    const measure = () => {\n      updateWidth(node.getBoundingClientRect().width || window.innerWidth)\n    }\n\n    measure()\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', measure)\n      return () => window.removeEventListener('resize', measure)\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      updateWidth(entry.contentRect.width)\n    })\n\n    observer.observe(node)\n    return () => observer.disconnect()\n  }, [])\n\n  const canShowSideBySide = containerWidth >= SIDE_BY_SIDE_MIN_WIDTH\n\n  React.useEffect(() => {\n    if (canShowSideBySide) {\n      setExpandedWhileConstrained(false)\n    }\n  }, [canShowSideBySide])\n\n  const showCollapsedRail = canCollapse && (collapsed || (!canShowSideBySide && !expandedWhileConstrained))\n  const showStackedExpanded = !showCollapsedRail && !canShowSideBySide\n  const layoutMode = showCollapsedRail ? 'collapsed' : showStackedExpanded ? 'stacked' : 'side-by-side'\n  const zone1SideBySideStyle = zone1DefaultWidth\n    ? { width: zone1DefaultWidth, flexBasis: zone1DefaultWidth }\n    : undefined\n\n  const handleExpand = React.useCallback(() => {\n    if (!canCollapse) return\n    setCollapsed(false)\n    setExpandedWhileConstrained(!canShowSideBySide)\n  }, [canCollapse, canShowSideBySide, setCollapsed])\n\n  const handleCollapse = React.useCallback(() => {\n    if (!canCollapse) return\n    setExpandedWhileConstrained(false)\n    setCollapsed(true)\n    requestAnimationFrame(() => {\n      expandButtonRef.current?.focus()\n    })\n  }, [canCollapse, setCollapsed])\n\n  return (\n    <div\n      ref={layoutRef}\n      data-zone-layout-mode={layoutMode}\n      className={cn(\n        'flex gap-4',\n        showStackedExpanded ? 'flex-col' : 'flex-col lg:flex-row',\n      )}\n    >\n      {showCollapsedRail ? (\n        <>\n          <div className=\"hidden lg:flex shrink-0 flex-col items-center gap-3\">\n            <Button\n              ref={expandButtonRef}\n              type=\"button\"\n              variant=\"default\"\n              size=\"sm\"\n              onClick={handleExpand}\n              className=\"h-auto rounded-[10px] px-1.5 py-2 shadow-sm\"\n              aria-label={t('ui.zone.expand', 'Expand form panel')}\n            >\n              <ChevronsRight className=\"size-4\" />\n            </Button>\n            {sections?.length ? (\n              <div className=\"flex flex-col items-center gap-2 rounded-[14px] border border-border/70 bg-card px-2 py-3\">\n                {sections.map((section) => {\n                  const SectionIcon = section.icon\n                  const hasErrors = Boolean(section.errorCount && section.errorCount > 0)\n                  return (\n                    <div\n                      key={section.id}\n                      className=\"relative flex size-9 items-center justify-center rounded-[10px] border border-transparent bg-muted/70 text-muted-foreground\"\n                      title={section.label}\n                    >\n                      <SectionIcon className=\"size-4\" />\n                      {hasErrors ? (\n                        <span className=\"absolute right-1.5 top-1.5 size-1.5 rounded-full bg-destructive\" />\n                      ) : null}\n                    </div>\n                  )\n                })}\n              </div>\n            ) : null}\n          </div>\n          {/* Zone 2 takes full width */}\n          <div className=\"min-w-0 flex-1\">\n            {zone2}\n          </div>\n        </>\n      ) : showStackedExpanded ? (\n        <>\n          <div className=\"w-full space-y-2\">\n            {canCollapse ? (\n              <div className=\"flex justify-end\">\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={handleCollapse}\n                  className=\"h-auto rounded-[6px] border bg-card px-1.5 py-2\"\n                  aria-label={t('ui.zone.collapse', 'Collapse form panel')}\n                >\n                  <ChevronsLeft className=\"size-4\" />\n                </Button>\n              </div>\n            ) : null}\n            <div className=\"w-full\">\n              {zone1}\n            </div>\n          </div>\n\n          <div className=\"min-w-0 w-full\">\n            {zone2}\n          </div>\n        </>\n      ) : (\n        <>\n          {/* Zone 1 \u2014 CrudForm area */}\n          <div\n            className={cn('w-full lg:shrink-0', zone1DefaultWidth ? undefined : 'lg:w-[40%]')}\n            style={zone1SideBySideStyle}\n          >\n            {zone1}\n          </div>\n\n          {/* Divider with collapse toggle */}\n          <div className=\"hidden lg:flex relative shrink-0 w-8 items-start justify-center pt-4\">\n            <div className=\"absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border\" />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={handleCollapse}\n              className=\"relative z-10 h-auto rounded-[6px] border bg-card px-1.5 py-2\"\n              aria-label={t('ui.zone.collapse', 'Collapse form panel')}\n            >\n              <ChevronsLeft className=\"size-4\" />\n            </Button>\n          </div>\n\n          {/* Zone 2 \u2014 Tabs / related data area */}\n          <div className=\"min-w-0 w-full lg:flex-1\">\n            {zone2}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/crud/useGroupCollapse.js

@@ -0,0 +1,24 @@
+"use client";
+import { useCallback } from "react";
+import { usePersistedBooleanFlag } from "./usePersistedBooleanFlag.js";
+function getStorageKey(pageType, groupId) {
+  return `om:collapsible:${pageType}:${groupId}`;
+}
+function useGroupCollapse(pageType, groupId, defaultExpanded = true) {
+  const { value: expanded, toggle, setValue } = usePersistedBooleanFlag(
+    getStorageKey(pageType, groupId),
+    defaultExpanded
+  );
+  const setExpanded = useCallback((next) => {
+    if (typeof next === "function") {
+      setValue((prev) => next(prev));
+    } else {
+      setValue(next);
+    }
+  }, [setValue]);
+  return { expanded, toggle, setExpanded };
+}
+export {
+  useGroupCollapse
+};
+//# sourceMappingURL=useGroupCollapse.js.map

package/dist/backend/crud/useGroupCollapse.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/useGroupCollapse.ts"],
+  "sourcesContent": ["'use client'\nimport { useCallback } from 'react'\nimport { usePersistedBooleanFlag } from './usePersistedBooleanFlag'\n\nfunction getStorageKey(pageType: string, groupId: string) {\n  return `om:collapsible:${pageType}:${groupId}`\n}\n\nexport function useGroupCollapse(pageType: string, groupId: string, defaultExpanded = true) {\n  const { value: expanded, toggle, setValue } = usePersistedBooleanFlag(\n    getStorageKey(pageType, groupId),\n    defaultExpanded,\n  )\n  const setExpanded = useCallback((next: boolean | ((prev: boolean) => boolean)) => {\n    if (typeof next === 'function') {\n      setValue((prev) => (next as (prev: boolean) => boolean)(prev))\n    } else {\n      setValue(next)\n    }\n  }, [setValue])\n  return { expanded, toggle, setExpanded }\n}\n"],
+  "mappings": ";AACA,SAAS,mBAAmB;AAC5B,SAAS,+BAA+B;AAExC,SAAS,cAAc,UAAkB,SAAiB;AACxD,SAAO,kBAAkB,QAAQ,IAAI,OAAO;AAC9C;AAEO,SAAS,iBAAiB,UAAkB,SAAiB,kBAAkB,MAAM;AAC1F,QAAM,EAAE,OAAO,UAAU,QAAQ,SAAS,IAAI;AAAA,IAC5C,cAAc,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF;AACA,QAAM,cAAc,YAAY,CAAC,SAAiD;AAChF,QAAI,OAAO,SAAS,YAAY;AAC9B,eAAS,CAAC,SAAU,KAAoC,IAAI,CAAC;AAAA,IAC/D,OAAO;AACL,eAAS,IAAI;AAAA,IACf;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACb,SAAO,EAAE,UAAU,QAAQ,YAAY;AACzC;",
+  "names": []
+}

package/dist/backend/crud/useGroupOrder.js

@@ -0,0 +1,61 @@
+"use client";
+import * as React from "react";
+import {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage
+} from "@open-mercato/shared/lib/browser/safeLocalStorage";
+const STORAGE_PREFIX = "om:group-order:";
+function getStorageKey(pageType) {
+  return `${STORAGE_PREFIX}${pageType}`;
+}
+function mergeOrder(saved, defaults) {
+  const known = new Set(defaults);
+  const result = saved.filter((id) => known.has(id));
+  for (const id of defaults) {
+    if (!result.includes(id)) result.push(id);
+  }
+  return result;
+}
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function useGroupOrder(pageType, defaultGroupIds) {
+  const [orderedIds, setOrderedIds] = React.useState(defaultGroupIds);
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+    const saved = readJsonFromLocalStorage(getStorageKey(pageType), null);
+    if (Array.isArray(saved)) {
+      setOrderedIds(mergeOrder(saved, defaultGroupIds));
+    }
+  }, [pageType]);
+  React.useEffect(() => {
+    setOrderedIds((prev) => {
+      const merged = mergeOrder(prev, defaultGroupIds);
+      return arraysEqual(prev, merged) ? prev : merged;
+    });
+  }, [defaultGroupIds]);
+  const reorder = React.useCallback(
+    (fromIndex, toIndex) => {
+      setOrderedIds((prev) => {
+        const next = [...prev];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        if (mounted.current) {
+          writeJsonToLocalStorage(getStorageKey(pageType), next);
+        }
+        return next;
+      });
+    },
+    [pageType]
+  );
+  return { orderedIds, reorder };
+}
+export {
+  useGroupOrder
+};
+//# sourceMappingURL=useGroupOrder.js.map

package/dist/backend/crud/useGroupOrder.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/useGroupOrder.ts"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport {\n  readJsonFromLocalStorage,\n  writeJsonToLocalStorage,\n} from '@open-mercato/shared/lib/browser/safeLocalStorage'\n\nconst STORAGE_PREFIX = 'om:group-order:'\n\nfunction getStorageKey(pageType: string) {\n  return `${STORAGE_PREFIX}${pageType}`\n}\n\nfunction mergeOrder(saved: string[], defaults: string[]): string[] {\n  const known = new Set(defaults)\n  const result = saved.filter((id) => known.has(id))\n  for (const id of defaults) {\n    if (!result.includes(id)) result.push(id)\n  }\n  return result\n}\n\nfunction arraysEqual(a: string[], b: string[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Returns the group IDs in the user's preferred order.\n * Falls back to the default order when no preference is stored.\n */\nexport function useGroupOrder(pageType: string, defaultGroupIds: string[]) {\n  const [orderedIds, setOrderedIds] = React.useState<string[]>(defaultGroupIds)\n  const mounted = React.useRef(false)\n\n  React.useEffect(() => {\n    mounted.current = true\n    const saved = readJsonFromLocalStorage<string[] | null>(getStorageKey(pageType), null)\n    if (Array.isArray(saved)) {\n      setOrderedIds(mergeOrder(saved, defaultGroupIds))\n    }\n    // Intentionally only runs on mount (per pageType); defaultGroupIds changes are\n    // handled by the sync effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pageType])\n\n  // Sync when defaultGroupIds changes (e.g. new groups added dynamically)\n  React.useEffect(() => {\n    setOrderedIds((prev) => {\n      const merged = mergeOrder(prev, defaultGroupIds)\n      return arraysEqual(prev, merged) ? prev : merged\n    })\n  }, [defaultGroupIds])\n\n  const reorder = React.useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setOrderedIds((prev) => {\n        const next = [...prev]\n        const [moved] = next.splice(fromIndex, 1)\n        next.splice(toIndex, 0, moved)\n        if (mounted.current) {\n          writeJsonToLocalStorage(getStorageKey(pageType), next)\n        }\n        return next\n      })\n    },\n    [pageType],\n  )\n\n  return { orderedIds, reorder }\n}\n"],
+  "mappings": ";AACA,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB;AAEvB,SAAS,cAAc,UAAkB;AACvC,SAAO,GAAG,cAAc,GAAG,QAAQ;AACrC;AAEA,SAAS,WAAW,OAAiB,UAA8B;AACjE,QAAM,QAAQ,IAAI,IAAI,QAAQ;AAC9B,QAAM,SAAS,MAAM,OAAO,CAAC,OAAO,MAAM,IAAI,EAAE,CAAC;AACjD,aAAW,MAAM,UAAU;AACzB,QAAI,CAAC,OAAO,SAAS,EAAE,EAAG,QAAO,KAAK,EAAE;AAAA,EAC1C;AACA,SAAO;AACT;AAEA,SAAS,YAAY,GAAa,GAAsB;AACtD,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK,GAAG;AACpC,QAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAAA,EAC5B;AACA,SAAO;AACT;AAMO,SAAS,cAAc,UAAkB,iBAA2B;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAmB,eAAe;AAC5E,QAAM,UAAU,MAAM,OAAO,KAAK;AAElC,QAAM,UAAU,MAAM;AACpB,YAAQ,UAAU;AAClB,UAAM,QAAQ,yBAA0C,cAAc,QAAQ,GAAG,IAAI;AACrF,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,oBAAc,WAAW,OAAO,eAAe,CAAC;AAAA,IAClD;AAAA,EAIF,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,UAAU,MAAM;AACpB,kBAAc,CAAC,SAAS;AACtB,YAAM,SAAS,WAAW,MAAM,eAAe;AAC/C,aAAO,YAAY,MAAM,MAAM,IAAI,OAAO;AAAA,IAC5C,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,WAAmB,YAAoB;AACtC,oBAAc,CAAC,SAAS;AACtB,cAAM,OAAO,CAAC,GAAG,IAAI;AACrB,cAAM,CAAC,KAAK,IAAI,KAAK,OAAO,WAAW,CAAC;AACxC,aAAK,OAAO,SAAS,GAAG,KAAK;AAC7B,YAAI,QAAQ,SAAS;AACnB,kCAAwB,cAAc,QAAQ,GAAG,IAAI;AAAA,QACvD;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,YAAY,QAAQ;AAC/B;",
+  "names": []
+}

package/dist/backend/crud/usePersistedBooleanFlag.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  readJsonFromLocalStorage,
+  writeJsonToLocalStorage
+} from "@open-mercato/shared/lib/browser/safeLocalStorage";
+function usePersistedBooleanFlag(storageKey, defaultValue) {
+  const [value, setValue] = useState(defaultValue);
+  const mounted = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    const saved = readJsonFromLocalStorage(storageKey, null);
+    if (saved !== null) {
+      setValue(saved === "1");
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    if (!mounted.current) return;
+    writeJsonToLocalStorage(storageKey, value ? "1" : "0");
+  }, [storageKey, value]);
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+  return { value, toggle, setValue };
+}
+export {
+  usePersistedBooleanFlag
+};
+//# sourceMappingURL=usePersistedBooleanFlag.js.map

package/dist/backend/crud/usePersistedBooleanFlag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/crud/usePersistedBooleanFlag.ts"],
+  "sourcesContent": ["'use client'\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport {\n  readJsonFromLocalStorage,\n  writeJsonToLocalStorage,\n} from '@open-mercato/shared/lib/browser/safeLocalStorage'\n\n/**\n * Persists a boolean flag in localStorage under a given key.\n * Reads once on mount; writes on every change after mount.\n * Designed to back collapse/expand state for crud form groups and zones.\n */\nexport function usePersistedBooleanFlag(storageKey: string, defaultValue: boolean) {\n  const [value, setValue] = useState(defaultValue)\n  const mounted = useRef(false)\n\n  useEffect(() => {\n    mounted.current = true\n    const saved = readJsonFromLocalStorage<string | null>(storageKey, null)\n    if (saved !== null) {\n      setValue(saved === '1')\n    }\n  }, [storageKey])\n\n  useEffect(() => {\n    if (!mounted.current) return\n    writeJsonToLocalStorage(storageKey, value ? '1' : '0')\n  }, [storageKey, value])\n\n  const toggle = useCallback(() => {\n    setValue((prev) => !prev)\n  }, [])\n\n  return { value, toggle, setValue }\n}\n"],
+  "mappings": ";AACA,SAAS,UAAU,WAAW,aAAa,cAAc;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,SAAS,wBAAwB,YAAoB,cAAuB;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,UAAU,OAAO,KAAK;AAE5B,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,UAAM,QAAQ,yBAAwC,YAAY,IAAI;AACtE,QAAI,UAAU,MAAM;AAClB,eAAS,UAAU,GAAG;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,QAAS;AACtB,4BAAwB,YAAY,QAAQ,MAAM,GAAG;AAAA,EACvD,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,SAAS,YAAY,MAAM;AAC/B,aAAS,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,OAAO,QAAQ,SAAS;AACnC;",
+  "names": []
+}