@open-mercato/ui 0.6.5-develop.5337.1.534b781eac → 0.6.5

package/dist/primitives/pagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/pagination.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  CompactSelectTrigger,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from './compact-select'\n\n/**\n * Page navigation primitive per Figma `Pagination Group [1.1]` (DS Open\n * Mercato componentSet `199985:4135`).\n *\n * Layout (Figma `Basic` variant):\n *\n *   [Left] \"Page 2 of 16\"\n *   [Center] \u23EE  \u25C0  [1][2]\u2026[N-1][N]  \u25B6  \u23ED\n *   [Right] \"7 / page\" CompactSelect\n *\n * Figma's three boolean variant props are mapped 1:1 to React props:\n *\n *   \uD83E\uDD47 First / Last       \u2192 `showFirstLast` (default true)\n *   \u23ED\uFE0F Next / Previous    \u2192 `showPrevNext`  (default true)\n *   \uD83E\uDDEA Advanced           \u2192 `showInfo` + `showPageSize` (default both true)\n *\n * The numeric page list uses the same ellipsis algorithm Material /\n * MUI / shadcn ship: `boundaryCount` pages at each end (default 1),\n * `siblingCount` pages on either side of the current page (default 1),\n * collapse the rest into `\u2026` placeholders.\n *\n * ```tsx\n * const [page, setPage] = React.useState(1)\n * const [pageSize, setPageSize] = React.useState(25)\n * <Pagination\n *   page={page}\n *   pageSize={pageSize}\n *   total={items.length}\n *   onPageChange={setPage}\n *   onPageSizeChange={setPageSize}\n * />\n *\n * // Compact (no first/last, no page-size select)\n * <Pagination\n *   page={page}\n *   pageSize={20}\n *   total={120}\n *   onPageChange={setPage}\n *   showFirstLast={false}\n *   showPageSize={false}\n * />\n * ```\n */\n\n/**\n * Build a stable list of pages + ellipsis placeholders that fits a\n * pagination row of `boundaryCount + 2 + siblingCount * 2 + 1` cells.\n * Returns `number` entries (1-indexed) and `'ellipsis-left'` /\n * `'ellipsis-right'` placeholders that the renderer paints as `\u2026`.\n *\n * Exported for tests + consumer reuse (e.g. a server-side rendered\n * pagination indicator that needs the same shape).\n */\nexport function buildPaginationItems(\n  page: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): Array<number | 'ellipsis-left' | 'ellipsis-right'> {\n  if (totalPages <= 0) return []\n  // When everything fits, just list every page.\n  const totalSlots = boundaryCount * 2 + siblingCount * 2 + 3\n  if (totalPages <= totalSlots) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n  const startPages = Array.from({ length: boundaryCount }, (_, i) => i + 1)\n  const endPages = Array.from(\n    { length: boundaryCount },\n    (_, i) => totalPages - boundaryCount + 1 + i,\n  )\n  const siblingStart = Math.max(\n    Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,\n  )\n  const middle: Array<number> = []\n  for (let i = siblingStart; i <= siblingEnd; i += 1) middle.push(i)\n\n  // Bridge between the start boundary and the sibling window. The\n  // ellipsis is only worth showing when \u22652 page numbers fall between\n  // them; if exactly 1 page is missing, render that single number\n  // instead of \"\u2026\" (cleaner UX \u2014 same width, no information loss).\n  const result: Array<number | 'ellipsis-left' | 'ellipsis-right'> = []\n  for (const p of startPages) result.push(p)\n  if (siblingStart > boundaryCount + 2) {\n    result.push('ellipsis-left')\n  } else if (siblingStart === boundaryCount + 2) {\n    result.push(boundaryCount + 1)\n  }\n  for (const p of middle) result.push(p)\n  const firstEnd = endPages[0] ?? totalPages\n  if (siblingEnd < firstEnd - 2) {\n    result.push('ellipsis-right')\n  } else if (siblingEnd === firstEnd - 2) {\n    result.push(firstEnd - 1)\n  }\n  for (const p of endPages) result.push(p)\n  return result\n}\n\nconst cellVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-medium outline-none transition-colors tabular-nums ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      selected: {\n        true: 'bg-muted text-foreground',\n        false: 'bg-background text-foreground hover:bg-muted/40',\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n)\n\nconst navButtonVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors ' +\n    'hover:bg-muted/40 hover:text-foreground ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground',\n)\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Current 1-indexed page. */\n  page: number\n  /** Items per page. */\n  pageSize: number\n  /** Total item count. Used to derive `Math.ceil(total / pageSize)` pages. */\n  total: number\n  /** Called when the user changes page. */\n  onPageChange: (next: number) => void\n  /** Called when the user changes page size. Optional \u2014 when omitted,\n   *  the \"X / page\" select is hidden. */\n  onPageSizeChange?: (next: number) => void\n  /** Page size options for the select. Default `[10, 25, 50, 100]`. */\n  pageSizeOptions?: readonly number[]\n  /** Show the left \"Page X of Y\" indicator. Default `true`. */\n  showInfo?: boolean\n  /** Show the right \"X / page\" select. Default `true` when\n   *  `onPageSizeChange` is provided; ignored otherwise. */\n  showPageSize?: boolean\n  /** Show \u23EE / \u23ED first / last buttons. Default `true`. */\n  showFirstLast?: boolean\n  /** Show \u25C0 / \u25B6 prev / next buttons. Default `true`. */\n  showPrevNext?: boolean\n  /** Pages on either side of the current page in the page list. Default `1`. */\n  siblingCount?: number\n  /** Pages pinned at each end of the page list. Default `1`. */\n  boundaryCount?: number\n  /** Block all interactions. Default `false`. */\n  disabled?: boolean\n  /** ARIA label for the navigation landmark. Default `\"Pagination\"`. */\n  'aria-label'?: string\n  /** Format the \"Page X of Y\" label. */\n  formatPageInfo?: (page: number, totalPages: number) => string\n  /** Format the \"X / page\" label. */\n  formatPageSizeLabel?: (pageSize: number) => string\n}\n\nexport const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      className,\n      page,\n      pageSize,\n      total,\n      onPageChange,\n      onPageSizeChange,\n      pageSizeOptions = [10, 25, 50, 100],\n      showInfo = true,\n      showPageSize: showPageSizeProp,\n      showFirstLast = true,\n      showPrevNext = true,\n      siblingCount = 1,\n      boundaryCount = 1,\n      disabled = false,\n      formatPageInfo,\n      formatPageSizeLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const resolvedFormatPageInfo =\n      formatPageInfo ??\n      ((p: number, total: number) =>\n        t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))\n    const resolvedFormatPageSizeLabel =\n      formatPageSizeLabel ??\n      ((size: number) =>\n        t('ui.pagination.itemsPerPage.label', '{size} / page', { size }))\n    const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))\n    const safePage = Math.min(Math.max(1, page), totalPages)\n    const items = React.useMemo(\n      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),\n      [safePage, totalPages, siblingCount, boundaryCount],\n    )\n    const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange)\n\n    const goTo = React.useCallback(\n      (next: number) => {\n        if (disabled) return\n        const bounded = Math.min(Math.max(1, next), totalPages)\n        if (bounded !== safePage) onPageChange(bounded)\n      },\n      [disabled, onPageChange, safePage, totalPages],\n    )\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"pagination\"\n        aria-label={props['aria-label'] ?? t('ui.pagination.landmark.ariaLabel', 'Pagination')}\n        className={cn('flex w-full items-center justify-between gap-6', className)}\n        {...props}\n      >\n        {showInfo ? (\n          <div\n            data-slot=\"pagination-info\"\n            className=\"shrink-0 text-sm text-muted-foreground tabular-nums\"\n          >\n            {resolvedFormatPageInfo(safePage, totalPages)}\n          </div>\n        ) : (\n          <div />\n        )}\n\n        <div\n          data-slot=\"pagination-controls\"\n          className=\"inline-flex items-center gap-2\"\n        >\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-first\"\n              aria-label={t('ui.pagination.first.ariaLabel', 'First page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={t('ui.pagination.previous.ariaLabel', 'Previous page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(safePage - 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n\n          <ol\n            data-slot=\"pagination-pages\"\n            className=\"inline-flex items-center gap-2 list-none\"\n          >\n            {items.map((entry, index) => {\n              if (entry === 'ellipsis-left' || entry === 'ellipsis-right') {\n                return (\n                  <li\n                    key={`${entry}-${index}`}\n                    data-slot=\"pagination-ellipsis\"\n                    aria-hidden=\"true\"\n                    className=\"inline-flex size-8 items-center justify-center text-sm text-muted-foreground\"\n                  >\n                    \u2026\n                  </li>\n                )\n              }\n              const selected = entry === safePage\n              return (\n                <li key={entry}>\n                  <button\n                    type=\"button\"\n                    data-slot=\"pagination-page\"\n                    data-state={selected ? 'on' : 'off'}\n                    aria-current={selected ? 'page' : undefined}\n                    aria-label={\n                      selected\n                        ? t('ui.pagination.page.currentAriaLabel', 'Page {page}, current page', { page: entry })\n                        : t('ui.pagination.page.goToAriaLabel', 'Go to page {page}', { page: entry })\n                    }\n                    disabled={disabled}\n                    onClick={() => goTo(entry)}\n                    className={cn(cellVariants({ selected }))}\n                  >\n                    {entry}\n                  </button>\n                </li>\n              )\n            })}\n          </ol>\n\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={t('ui.pagination.next.ariaLabel', 'Next page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(safePage + 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-last\"\n              aria-label={t('ui.pagination.last.ariaLabel', 'Last page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(totalPages)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n        </div>\n\n        {showPageSize && onPageSizeChange ? (\n          <div data-slot=\"pagination-page-size\" className=\"shrink-0\">\n            <Select\n              value={String(pageSize)}\n              onValueChange={(next) => onPageSizeChange(Number(next))}\n              disabled={disabled}\n            >\n              <CompactSelectTrigger aria-label={t('ui.pagination.itemsPerPage.ariaLabel', 'Items per page')}>\n                <SelectValue />\n              </CompactSelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={String(option)}>\n                    {resolvedFormatPageSizeLabel(option)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n        ) : (\n          <div />\n        )}\n      </nav>\n    )\n  },\n)\nPagination.displayName = 'Pagination'\n\nexport { cellVariants as paginationCellVariants, navButtonVariants as paginationNavVariants }\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  CompactSelectTrigger,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from './compact-select'\n\n/**\n * Page navigation primitive per Figma `Pagination Group [1.1]` (DS Open\n * Mercato componentSet `199985:4135`).\n *\n * Layout (Figma `Basic` variant):\n *\n *   [Left] \"Page 2 of 16\"\n *   [Center] \u23EE  \u25C0  [1][2]\u2026[N-1][N]  \u25B6  \u23ED\n *   [Right] \"7 / page\" CompactSelect\n *\n * Figma's three boolean variant props are mapped 1:1 to React props:\n *\n *   \uD83E\uDD47 First / Last       \u2192 `showFirstLast` (default true)\n *   \u23ED\uFE0F Next / Previous    \u2192 `showPrevNext`  (default true)\n *   \uD83E\uDDEA Advanced           \u2192 `showInfo` + `showPageSize` (default both true)\n *\n * The numeric page list uses the same ellipsis algorithm Material /\n * MUI / shadcn ship: `boundaryCount` pages at each end (default 1),\n * `siblingCount` pages on either side of the current page (default 1),\n * collapse the rest into `\u2026` placeholders.\n *\n * ```tsx\n * const [page, setPage] = React.useState(1)\n * const [pageSize, setPageSize] = React.useState(25)\n * <Pagination\n *   page={page}\n *   pageSize={pageSize}\n *   total={items.length}\n *   onPageChange={setPage}\n *   onPageSizeChange={setPageSize}\n * />\n *\n * // Compact (no first/last, no page-size select)\n * <Pagination\n *   page={page}\n *   pageSize={20}\n *   total={120}\n *   onPageChange={setPage}\n *   showFirstLast={false}\n *   showPageSize={false}\n * />\n * ```\n */\n\n/**\n * Build a stable list of pages + ellipsis placeholders that fits a\n * pagination row of `boundaryCount + 2 + siblingCount * 2 + 1` cells.\n * Returns `number` entries (1-indexed) and `'ellipsis-left'` /\n * `'ellipsis-right'` placeholders that the renderer paints as `\u2026`.\n *\n * Exported for tests + consumer reuse (e.g. a server-side rendered\n * pagination indicator that needs the same shape).\n */\nexport function buildPaginationItems(\n  page: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): Array<number | 'ellipsis-left' | 'ellipsis-right'> {\n  if (totalPages <= 0) return []\n  // When everything fits, just list every page.\n  const totalSlots = boundaryCount * 2 + siblingCount * 2 + 3\n  if (totalPages <= totalSlots) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n  const startPages = Array.from({ length: boundaryCount }, (_, i) => i + 1)\n  const endPages = Array.from(\n    { length: boundaryCount },\n    (_, i) => totalPages - boundaryCount + 1 + i,\n  )\n  const siblingStart = Math.max(\n    Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,\n  )\n  const middle: Array<number> = []\n  for (let i = siblingStart; i <= siblingEnd; i += 1) middle.push(i)\n\n  // Bridge between the start boundary and the sibling window. The\n  // ellipsis is only worth showing when \u22652 page numbers fall between\n  // them; if exactly 1 page is missing, render that single number\n  // instead of \"\u2026\" (cleaner UX \u2014 same width, no information loss).\n  const result: Array<number | 'ellipsis-left' | 'ellipsis-right'> = []\n  for (const p of startPages) result.push(p)\n  if (siblingStart > boundaryCount + 2) {\n    result.push('ellipsis-left')\n  } else if (siblingStart === boundaryCount + 2) {\n    result.push(boundaryCount + 1)\n  }\n  for (const p of middle) result.push(p)\n  const firstEnd = endPages[0] ?? totalPages\n  if (siblingEnd < firstEnd - 2) {\n    result.push('ellipsis-right')\n  } else if (siblingEnd === firstEnd - 2) {\n    result.push(firstEnd - 1)\n  }\n  for (const p of endPages) result.push(p)\n  return result\n}\n\nconst cellVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-medium outline-none transition-colors tabular-nums ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      selected: {\n        true: 'bg-muted text-foreground',\n        false: 'bg-background text-foreground hover:bg-muted/40',\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n)\n\nconst navButtonVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors ' +\n    'hover:bg-muted/40 hover:text-foreground ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground',\n)\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Current 1-indexed page. */\n  page: number\n  /** Items per page. */\n  pageSize: number\n  /** Total item count. Used to derive `Math.ceil(total / pageSize)` pages. */\n  total: number\n  /** Called when the user changes page. */\n  onPageChange: (next: number) => void\n  /** Called when the user changes page size. Optional \u2014 when omitted,\n   *  the \"X / page\" select is hidden. */\n  onPageSizeChange?: (next: number) => void\n  /** Page size options for the select. Default `[10, 25, 50, 100]`. */\n  pageSizeOptions?: readonly number[]\n  /** Show the left \"Page X of Y\" indicator. Default `true`. */\n  showInfo?: boolean\n  /** Show the right \"X / page\" select. Default `true` when\n   *  `onPageSizeChange` is provided; ignored otherwise. */\n  showPageSize?: boolean\n  /** Show \u23EE / \u23ED first / last buttons. Default `true`. */\n  showFirstLast?: boolean\n  /** Show \u25C0 / \u25B6 prev / next buttons. Default `true`. */\n  showPrevNext?: boolean\n  /** Pages on either side of the current page in the page list. Default `1`. */\n  siblingCount?: number\n  /** Pages pinned at each end of the page list. Default `1`. */\n  boundaryCount?: number\n  /** Block all interactions. Default `false`. */\n  disabled?: boolean\n  /** ARIA label for the navigation landmark. Default `\"Pagination\"`. */\n  'aria-label'?: string\n  /** Format the \"Page X of Y\" label. */\n  formatPageInfo?: (page: number, totalPages: number) => string\n  /** Format the \"X / page\" label. */\n  formatPageSizeLabel?: (pageSize: number) => string\n}\n\nexport const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      className,\n      page,\n      pageSize,\n      total,\n      onPageChange,\n      onPageSizeChange,\n      pageSizeOptions = [10, 25, 50, 100],\n      showInfo = true,\n      showPageSize: showPageSizeProp,\n      showFirstLast = true,\n      showPrevNext = true,\n      siblingCount = 1,\n      boundaryCount = 1,\n      disabled = false,\n      formatPageInfo,\n      formatPageSizeLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const resolvedFormatPageInfo =\n      formatPageInfo ??\n      ((p: number, total: number) =>\n        t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))\n    const resolvedFormatPageSizeLabel =\n      formatPageSizeLabel ??\n      ((size: number) =>\n        t('ui.pagination.itemsPerPage.label', '{size} / page', { size }))\n    const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))\n    const safePage = Math.min(Math.max(1, page), totalPages)\n    const items = React.useMemo(\n      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),\n      [safePage, totalPages, siblingCount, boundaryCount],\n    )\n    const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange)\n\n    const goTo = React.useCallback(\n      (next: number) => {\n        if (disabled) return\n        const bounded = Math.min(Math.max(1, next), totalPages)\n        if (bounded !== safePage) onPageChange(bounded)\n      },\n      [disabled, onPageChange, safePage, totalPages],\n    )\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"pagination\"\n        aria-label={props['aria-label'] ?? t('ui.pagination.landmark.ariaLabel', 'Pagination')}\n        className={cn('flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2', className)}\n        {...props}\n      >\n        {showInfo ? (\n          <div\n            data-slot=\"pagination-info\"\n            className=\"shrink-0 text-sm text-muted-foreground tabular-nums\"\n          >\n            {resolvedFormatPageInfo(safePage, totalPages)}\n          </div>\n        ) : (\n          <div />\n        )}\n\n        <div\n          data-slot=\"pagination-controls\"\n          className=\"flex flex-wrap items-center justify-center gap-2\"\n        >\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-first\"\n              aria-label={t('ui.pagination.first.ariaLabel', 'First page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={t('ui.pagination.previous.ariaLabel', 'Previous page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(safePage - 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n\n          <ol\n            data-slot=\"pagination-pages\"\n            className=\"flex flex-wrap items-center justify-center gap-2 list-none\"\n          >\n            {items.map((entry, index) => {\n              if (entry === 'ellipsis-left' || entry === 'ellipsis-right') {\n                return (\n                  <li\n                    key={`${entry}-${index}`}\n                    data-slot=\"pagination-ellipsis\"\n                    aria-hidden=\"true\"\n                    className=\"inline-flex size-8 items-center justify-center text-sm text-muted-foreground\"\n                  >\n                    \u2026\n                  </li>\n                )\n              }\n              const selected = entry === safePage\n              return (\n                <li key={entry}>\n                  <button\n                    type=\"button\"\n                    data-slot=\"pagination-page\"\n                    data-state={selected ? 'on' : 'off'}\n                    aria-current={selected ? 'page' : undefined}\n                    aria-label={\n                      selected\n                        ? t('ui.pagination.page.currentAriaLabel', 'Page {page}, current page', { page: entry })\n                        : t('ui.pagination.page.goToAriaLabel', 'Go to page {page}', { page: entry })\n                    }\n                    disabled={disabled}\n                    onClick={() => goTo(entry)}\n                    className={cn(cellVariants({ selected }))}\n                  >\n                    {entry}\n                  </button>\n                </li>\n              )\n            })}\n          </ol>\n\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={t('ui.pagination.next.ariaLabel', 'Next page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(safePage + 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-last\"\n              aria-label={t('ui.pagination.last.ariaLabel', 'Last page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(totalPages)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n        </div>\n\n        {showPageSize && onPageSizeChange ? (\n          <div data-slot=\"pagination-page-size\" className=\"shrink-0\">\n            <Select\n              value={String(pageSize)}\n              onValueChange={(next) => onPageSizeChange(Number(next))}\n              disabled={disabled}\n            >\n              <CompactSelectTrigger aria-label={t('ui.pagination.itemsPerPage.ariaLabel', 'Items per page')}>\n                <SelectValue />\n              </CompactSelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={String(option)}>\n                    {resolvedFormatPageSizeLabel(option)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n        ) : (\n          <div />\n        )}\n      </nav>\n    )\n  },\n)\nPagination.displayName = 'Pagination'\n\nexport { cellVariants as paginationCellVariants, navButtonVariants as paginationNavVariants }\n"],
+  "mappings": ";AAiPU,cAUF,YAVE;AA/OV,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAA8B;AAEvC,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAuDA,SAAS,qBACd,MACA,YACA,cACA,eACoD;AACpD,MAAI,cAAc,EAAG,QAAO,CAAC;AAE7B,QAAM,aAAa,gBAAgB,IAAI,eAAe,IAAI;AAC1D,MAAI,cAAc,YAAY;AAC5B,WAAO,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EAC3D;AACA,QAAM,aAAa,MAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC;AACxE,QAAM,WAAW,MAAM;AAAA,IACrB,EAAE,QAAQ,cAAc;AAAA,IACxB,CAAC,GAAG,MAAM,aAAa,gBAAgB,IAAI;AAAA,EAC7C;AACA,QAAM,eAAe,KAAK;AAAA,IACxB,KAAK,IAAI,OAAO,cAAc,aAAa,gBAAgB,eAAe,IAAI,CAAC;AAAA,IAC/E,gBAAgB;AAAA,EAClB;AACA,QAAM,aAAa,KAAK;AAAA,IACtB,KAAK,IAAI,OAAO,cAAc,gBAAgB,eAAe,IAAI,CAAC;AAAA,IAClE,SAAS,SAAS,IAAI,SAAS,CAAC,IAAI,IAAI,aAAa;AAAA,EACvD;AACA,QAAM,SAAwB,CAAC;AAC/B,WAAS,IAAI,cAAc,KAAK,YAAY,KAAK,EAAG,QAAO,KAAK,CAAC;AAMjE,QAAM,SAA6D,CAAC;AACpE,aAAW,KAAK,WAAY,QAAO,KAAK,CAAC;AACzC,MAAI,eAAe,gBAAgB,GAAG;AACpC,WAAO,KAAK,eAAe;AAAA,EAC7B,WAAW,iBAAiB,gBAAgB,GAAG;AAC7C,WAAO,KAAK,gBAAgB,CAAC;AAAA,EAC/B;AACA,aAAW,KAAK,OAAQ,QAAO,KAAK,CAAC;AACrC,QAAM,WAAW,SAAS,CAAC,KAAK;AAChC,MAAI,aAAa,WAAW,GAAG;AAC7B,WAAO,KAAK,gBAAgB;AAAA,EAC9B,WAAW,eAAe,WAAW,GAAG;AACtC,WAAO,KAAK,WAAW,CAAC;AAAA,EAC1B;AACA,aAAW,KAAK,SAAU,QAAO,KAAK,CAAC;AACvC,SAAO;AACT;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA,EAGA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,UAAU,MAAM;AAAA,EACrC;AACF;AAEA,MAAM,oBAAoB;AAAA,EACxB;AAIF;AAuCO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,CAAC,IAAI,IAAI,IAAI,GAAG;AAAA,IAClC,WAAW;AAAA,IACX,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,IAAI,KAAK;AACf,UAAM,yBACJ,mBACC,CAAC,GAAWA,WACX,EAAE,6BAA6B,0BAA0B,EAAE,MAAM,GAAG,OAAAA,OAAM,CAAC;AAC/E,UAAM,8BACJ,wBACC,CAAC,SACA,EAAE,oCAAoC,iBAAiB,EAAE,KAAK,CAAC;AACnE,UAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC;AACvE,UAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,UAAU;AACvD,UAAM,QAAQ,MAAM;AAAA,MAClB,MAAM,qBAAqB,UAAU,YAAY,cAAc,aAAa;AAAA,MAC5E,CAAC,UAAU,YAAY,cAAc,aAAa;AAAA,IACpD;AACA,UAAM,eAAe,oBAAoB,QAAQ,gBAAgB;AAEjE,UAAM,OAAO,MAAM;AAAA,MACjB,CAAC,SAAiB;AAChB,YAAI,SAAU;AACd,cAAM,UAAU,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,UAAU;AACtD,YAAI,YAAY,SAAU,cAAa,OAAO;AAAA,MAChD;AAAA,MACA,CAAC,UAAU,cAAc,UAAU,UAAU;AAAA,IAC/C;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,cAAY,MAAM,YAAY,KAAK,EAAE,oCAAoC,YAAY;AAAA,QACrF,WAAW,GAAG,sEAAsE,SAAS;AAAA,QAC5F,GAAG;AAAA,QAEH;AAAA,qBACC;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET,iCAAuB,UAAU,UAAU;AAAA;AAAA,UAC9C,IAEA,oBAAC,SAAI;AAAA,UAGP;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET;AAAA,gCACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,cAAY,EAAE,iCAAiC,YAAY;AAAA,oBAC3D,UAAU,YAAY,YAAY;AAAA,oBAClC,SAAS,MAAM,KAAK,CAAC;AAAA,oBACrB,WAAW,GAAG,kBAAkB,CAAC;AAAA,oBAEjC,8BAAC,gBAAa,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,gBACtD,IACE;AAAA,gBACH,eACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,cAAY,EAAE,oCAAoC,eAAe;AAAA,oBACjE,UAAU,YAAY,YAAY;AAAA,oBAClC,SAAS,MAAM,KAAK,WAAW,CAAC;AAAA,oBAChC,WAAW,GAAG,kBAAkB,CAAC;AAAA,oBAEjC,8BAAC,eAAY,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,gBACrD,IACE;AAAA,gBAEJ;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAU;AAAA,oBACV,WAAU;AAAA,oBAET,gBAAM,IAAI,CAAC,OAAO,UAAU;AAC3B,0BAAI,UAAU,mBAAmB,UAAU,kBAAkB;AAC3D,+BACE;AAAA,0BAAC;AAAA;AAAA,4BAEC,aAAU;AAAA,4BACV,eAAY;AAAA,4BACZ,WAAU;AAAA,4BACX;AAAA;AAAA,0BAJM,GAAG,KAAK,IAAI,KAAK;AAAA,wBAMxB;AAAA,sBAEJ;AACA,4BAAM,WAAW,UAAU;AAC3B,6BACE,oBAAC,QACC;AAAA,wBAAC;AAAA;AAAA,0BACC,MAAK;AAAA,0BACL,aAAU;AAAA,0BACV,cAAY,WAAW,OAAO;AAAA,0BAC9B,gBAAc,WAAW,SAAS;AAAA,0BAClC,cACE,WACI,EAAE,uCAAuC,6BAA6B,EAAE,MAAM,MAAM,CAAC,IACrF,EAAE,oCAAoC,qBAAqB,EAAE,MAAM,MAAM,CAAC;AAAA,0BAEhF;AAAA,0BACA,SAAS,MAAM,KAAK,KAAK;AAAA,0BACzB,WAAW,GAAG,aAAa,EAAE,SAAS,CAAC,CAAC;AAAA,0BAEvC;AAAA;AAAA,sBACH,KAhBO,KAiBT;AAAA,oBAEJ,CAAC;AAAA;AAAA,gBACH;AAAA,gBAEC,eACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,cAAY,EAAE,gCAAgC,WAAW;AAAA,oBACzD,UAAU,YAAY,YAAY;AAAA,oBAClC,SAAS,MAAM,KAAK,WAAW,CAAC;AAAA,oBAChC,WAAW,GAAG,kBAAkB,CAAC;AAAA,oBAEjC,8BAAC,gBAAa,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,gBACtD,IACE;AAAA,gBACH,gBACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,cAAY,EAAE,gCAAgC,WAAW;AAAA,oBACzD,UAAU,YAAY,YAAY;AAAA,oBAClC,SAAS,MAAM,KAAK,UAAU;AAAA,oBAC9B,WAAW,GAAG,kBAAkB,CAAC;AAAA,oBAEjC,8BAAC,iBAAc,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA,gBACvD,IACE;AAAA;AAAA;AAAA,UACN;AAAA,UAEC,gBAAgB,mBACf,oBAAC,SAAI,aAAU,wBAAuB,WAAU,YAC9C;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,QAAQ;AAAA,cACtB,eAAe,CAAC,SAAS,iBAAiB,OAAO,IAAI,CAAC;AAAA,cACtD;AAAA,cAEA;AAAA,oCAAC,wBAAqB,cAAY,EAAE,wCAAwC,gBAAgB,GAC1F,8BAAC,eAAY,GACf;AAAA,gBACA,oBAAC,iBACE,0BAAgB,IAAI,CAAC,WACpB,oBAAC,cAAwB,OAAO,OAAO,MAAM,GAC1C,sCAA4B,MAAM,KADpB,MAEjB,CACD,GACH;AAAA;AAAA;AAAA,UACF,GACF,IAEA,oBAAC,SAAI;AAAA;AAAA;AAAA,IAET;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;",
   "names": ["total"]
 }

package/dist/utils/format.js

@@ -0,0 +1,27 @@
+function formatCurrency(value, currency) {
+  if (value === null || value === void 0 || value === "") return null;
+  const numeric = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(numeric)) {
+    return typeof value === "string" ? value : null;
+  }
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : void 0;
+  try {
+    if (code) {
+      return new Intl.NumberFormat(void 0, { style: "currency", currency: code }).format(numeric);
+    }
+  } catch {
+  }
+  const formatted = new Intl.NumberFormat().format(numeric);
+  return code ? `${formatted} ${code}` : formatted;
+}
+function formatDate(value) {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+export {
+  formatCurrency,
+  formatDate
+};
+//# sourceMappingURL=format.js.map

package/dist/utils/format.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/format.ts"],
+  "sourcesContent": ["/**\n * Format a monetary value with an optional ISO-4217 currency code.\n *\n * Returns `null` for empty input, the original string for non-numeric input,\n * and falls back to a plain number format (optionally suffixed with the code)\n * when the currency code is missing or rejected by `Intl.NumberFormat`.\n */\nexport function formatCurrency(\n  value: string | number | null | undefined,\n  currency?: string | null,\n): string | null {\n  if (value === null || value === undefined || value === '') return null\n  const numeric = typeof value === 'number' ? value : Number(value)\n  if (!Number.isFinite(numeric)) {\n    return typeof value === 'string' ? value : null\n  }\n  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined\n  try {\n    if (code) {\n      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(numeric)\n    }\n  } catch {\n    // fall through to plain number formatting\n  }\n  const formatted = new Intl.NumberFormat().format(numeric)\n  return code ? `${formatted} ${code}` : formatted\n}\n\n/**\n * Format an ISO date string as a localized short date (e.g. `Jun 9, 2026`).\n *\n * Returns `null` for empty input and echoes the original value back when it is\n * not a parseable date.\n */\nexport function formatDate(value: string | null | undefined): string | null {\n  if (!value) return null\n  const date = new Date(value)\n  if (Number.isNaN(date.getTime())) return value\n  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })\n}\n"],
+  "mappings": "AAOO,SAAS,eACd,OACA,UACe;AACf,MAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,GAAI,QAAO;AAClE,QAAM,UAAU,OAAO,UAAU,WAAW,QAAQ,OAAO,KAAK;AAChE,MAAI,CAAC,OAAO,SAAS,OAAO,GAAG;AAC7B,WAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,EAC7C;AACA,QAAM,OAAO,YAAY,SAAS,WAAW,IAAI,SAAS,YAAY,IAAI;AAC1E,MAAI;AACF,QAAI,MAAM;AACR,aAAO,IAAI,KAAK,aAAa,QAAW,EAAE,OAAO,YAAY,UAAU,KAAK,CAAC,EAAE,OAAO,OAAO;AAAA,IAC/F;AAAA,EACF,QAAQ;AAAA,EAER;AACA,QAAM,YAAY,IAAI,KAAK,aAAa,EAAE,OAAO,OAAO;AACxD,SAAO,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK;AACzC;AAQO,SAAS,WAAW,OAAiD;AAC1E,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,MAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,EAAG,QAAO;AACzC,SAAO,KAAK,mBAAmB,QAAW,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK,UAAU,CAAC;AAC/F;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.5337.1.534b781eac",
+  "version": "0.6.5",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -74,6 +74,10 @@
       "types": "./src/backend/forms/index.ts",
       "default": "./dist/backend/forms/index.js"
     },
+    "./backend/markdown": {
+      "types": "./src/backend/markdown/index.ts",
+      "default": "./dist/backend/markdown/index.js"
+    },
     "./backend/messages": {
       "types": "./src/backend/messages/index.ts",
       "default": "./dist/backend/messages/index.js"
@@ -131,7 +135,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@mdxeditor/editor": "^4.0.2",
+    "@mdxeditor/editor": "^4.0.3",
     "@radix-ui/react-accordion": "^1.2.13",
     "@radix-ui/react-dialog": "^1.1.16",
     "@radix-ui/react-popover": "^1.1.16",
@@ -150,13 +154,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.5337.1.534b781eac",
+    "@open-mercato/shared": "0.6.5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.5337.1.534b781eac",
+    "@open-mercato/shared": "0.6.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -177,6 +181,5 @@
     "type": "git",
     "url": "https://github.com/open-mercato/open-mercato",
     "directory": "packages/ui"
-  },
-  "stableVersion": "0.6.4"
+  }
 }

package/src/ai/AiChat.tsx

@@ -432,7 +432,7 @@ function formatToolCaption(call: AiChatToolCallSnapshot): string {
 
 /**
  * Visible agent task plan rendered above raw tool-call rows. Phase 1
- * implementation of spec `.ai/specs/2026-05-13-ai-chat-visible-task-plan.md`:
+ * implementation of spec `.ai/specs/implemented/2026-05-13-ai-chat-visible-task-plan.md`:
  * compact, fixed-height rows with icon + label + status badge so the
  * panel does not jump while streaming. Source of truth is the
  * client-local `taskPlan` array on the assistant message.

package/src/ai/__tests__/AiChat.task-plan.test.tsx

@@ -4,7 +4,7 @@
 
 /**
  * Acceptance tests for the visible agent task plan
- * (spec `.ai/specs/2026-05-13-ai-chat-visible-task-plan.md`).
+ * (spec `.ai/specs/implemented/2026-05-13-ai-chat-visible-task-plan.md`).
  *
  * Asserts that:
  *   - `useAiChat` merges `data-agent-task-plan` snapshots and

package/src/ai/records/ActivityCard.tsx

@@ -15,13 +15,7 @@ import type { LucideIcon } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
 import type { ActivityRecordPayload } from './types'
-
-function formatDate(value: string | null | undefined): string | null {
-  if (!value) return null
-  const d = new Date(value)
-  if (Number.isNaN(d.getTime())) return value
-  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-}
+import { formatDate } from '../../utils/format'
 
 function pickActivityIcon(type: string | null | undefined): LucideIcon {
   if (!type) return ActivityIcon

package/src/ai/records/DealCard.tsx

@@ -5,31 +5,7 @@ import { Briefcase, Building2, CalendarDays, CircleDollarSign, User } from 'luci
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
 import type { DealRecordPayload } from './types'
-
-function formatAmount(amount: string | number | null | undefined, currency?: string | null): string | null {
-  if (amount === null || amount === undefined || amount === '') return null
-  const value = typeof amount === 'number' ? amount : Number(amount)
-  if (!Number.isFinite(value)) {
-    return typeof amount === 'string' ? amount : null
-  }
-  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
-  try {
-    if (code) {
-      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(value)
-    }
-  } catch {
-    // fall through to fallback
-  }
-  const formatted = new Intl.NumberFormat().format(value)
-  return code ? `${formatted} ${code}` : formatted
-}
-
-function formatDate(value: string | null | undefined): string | null {
-  if (!value) return null
-  const d = new Date(value)
-  if (Number.isNaN(d.getTime())) return value
-  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-}
+import { formatCurrency, formatDate } from '../../utils/format'
 
 export interface DealCardProps extends DealRecordPayload {}
 
@@ -39,7 +15,7 @@ export function DealCard(props: DealCardProps) {
     ? { label: props.status, variant: statusToTagVariant(props.status) }
     : null
   const stage = props.stage && props.stage !== props.status ? props.stage : null
-  const amount = formatAmount(props.amount, props.currency)
+  const amount = formatCurrency(props.amount, props.currency)
   const closeDate = formatDate(props.closeDate)
 
   const items = [

package/src/ai/records/ProductCard.tsx

@@ -5,24 +5,7 @@ import { Package, Tag as TagIcon } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
 import type { ProductRecordPayload } from './types'
-
-function formatPrice(price: string | number | null | undefined, currency?: string | null): string | null {
-  if (price === null || price === undefined || price === '') return null
-  const value = typeof price === 'number' ? price : Number(price)
-  if (!Number.isFinite(value)) {
-    return typeof price === 'string' ? price : null
-  }
-  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
-  try {
-    if (code) {
-      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(value)
-    }
-  } catch {
-    // fall through
-  }
-  const formatted = new Intl.NumberFormat().format(value)
-  return code ? `${formatted} ${code}` : formatted
-}
+import { formatCurrency } from '../../utils/format'
 
 export interface ProductCardProps extends ProductRecordPayload {}
 
@@ -31,7 +14,7 @@ export function ProductCard(props: ProductCardProps) {
   const status = props.status
     ? { label: props.status, variant: statusToTagVariant(props.status) }
     : null
-  const price = formatPrice(props.price, props.currency)
+  const price = formatCurrency(props.price, props.currency)
 
   const leading = props.imageUrl ? (
     <div className="relative size-12 overflow-hidden rounded-md border border-border bg-muted">

package/src/ai/useAiChat.ts

@@ -44,7 +44,7 @@ export interface AiChatMessageUiPart {
 
 /**
  * Snapshot of a single task in the visible agent task plan
- * (spec `.ai/specs/2026-05-13-ai-chat-visible-task-plan.md`). Tasks are
+ * (spec `.ai/specs/implemented/2026-05-13-ai-chat-visible-task-plan.md`). Tasks are
  * streamed as additive `data-agent-task-plan` / `data-agent-task-update`
  * SSE chunks and rendered above raw tool-call rows in `<AiChat>`.
  *

package/src/backend/AppShell.tsx

@@ -150,6 +150,11 @@ function resolveInjectedMenuLabel(
   return item.label ?? item.id
 }
 
+function shouldBypassLogoOptimization(src?: string | null): boolean {
+  const value = src ?? ''
+  return /^https?:\/\//.test(value) || /^\/api\/attachments\/(?:image|file)\//.test(value)
+}
+
 function mergeSidebarItemsWithInjected(
   items: SidebarItem[],
   injectedItems: InjectionMenuItem[],
@@ -444,6 +449,11 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   const { items: topbarInjectedMenuItems } = useInjectedMenuItems('menu:topbar:actions')
   useEventBridge() // SSE DOM Event Bridge — singleton SSE connection for real-time server events
   const resolvedProductName = productName ?? t('appShell.productName')
+  const resolvedLogo = chromePayload?.brand?.logo?.src ? chromePayload.brand.logo : logo
+  const resolvedBrandName = chromePayload?.brand?.logo?.src
+    ? chromePayload.brand.name ?? resolvedProductName
+    : resolvedProductName
+  const resolvedLogoBypassesOptimization = shouldBypassLogoOptimization(resolvedLogo?.src)
   const [mobileOpen, setMobileOpen] = React.useState(false)
   // When the mobile drawer opens on a settings/profile route, it follows the
   // section sidebar by default. Set to 'main' to force-show the main nav even
@@ -700,8 +710,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
               aria-label={t('appShell.goToDashboard')}
             >
-              <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
+              <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
             </Link>
           </div>
         )}
@@ -833,8 +843,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                 className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
                 aria-label={t('appShell.goToDashboard')}
               >
-                <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-                {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
+                <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+                {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
               </Link>
             </div>
           ) : null}
@@ -899,8 +909,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
               className={`flex items-center gap-3 rounded-xl transition-colors hover:bg-muted ${compact ? 'p-2 justify-center' : 'p-3'}`}
               aria-label={t('appShell.goToDashboard')}
             >
-              <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
+              <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={40} height={40} className="rounded-full shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedBrandName}</span>}
             </Link>
           </div>
         )}
@@ -1392,8 +1402,8 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           <aside className="absolute left-0 top-0 flex h-full w-[280px] max-w-[85vw] flex-col bg-background border-r shadow-lg overflow-hidden">
             <div className="shrink-0 flex items-center justify-between gap-2 border-b px-4 py-3">
               <Link href="/backend" className="flex items-center gap-2 min-w-0 text-sm font-semibold" onClick={() => setMobileOpen(false)} aria-label={t('appShell.goToDashboard')}>
-                <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={28} height={28} className="rounded shrink-0" />
-                <span className="truncate">{resolvedProductName}</span>
+                <Image src={resolvedLogo?.src ?? "/open-mercato.svg"} alt={resolvedLogo?.alt ?? resolvedBrandName} width={28} height={28} className="rounded shrink-0" unoptimized={resolvedLogoBypassesOptimization ? true : undefined} />
+                <span className="truncate">{resolvedBrandName}</span>
               </Link>
               <IconButton variant="ghost" size="sm" onClick={() => setMobileOpen(false)} aria-label={t('appShell.closeMenu')}>
                 <X className="size-4" />

package/src/backend/CrudForm.tsx

@@ -310,7 +310,7 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   // When true, shows Delete button whenever onDelete is provided, even without an id
   deleteVisible?: boolean
   /**
-   * OSS opt-in optimistic locking (spec: .ai/specs/2026-05-25-oss-optimistic-locking.md).
+   * OSS opt-in optimistic locking (spec: .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md).
    *
    * When set to a non-empty ISO-8601 string (typically `record.updatedAt`
    * from the API response), the form auto-injects the

package/src/backend/DataTable.tsx

@@ -264,6 +264,8 @@ export type DataTableProps<T> = {
   extensionTableId?: string
   stickyFirstColumn?: boolean
   stickyActionsColumn?: boolean
+  /** Horizontal alignment of the row-actions (kebab) column header + cell. Defaults to 'right'. */
+  actionsColumnAlign?: 'right' | 'center'
   virtualized?: boolean
   virtualizedMaxHeight?: number | string
   virtualizedOverscan?: number
@@ -272,7 +274,7 @@ export type DataTableProps<T> = {
    * or the legacy flat `AdvancedFilterState` shape as a backward-compatibility
    * bridge. The bridge is provided for one minor version; legacy callers SHOULD
    * migrate to the tree shape — see the spec
-   * `.ai/specs/2026-05-10-crm-list-filter-redesign.md` "Migration & Backward
+   * `.ai/specs/implemented/2026-05-10-crm-list-filter-redesign.md` "Migration & Backward
    * Compatibility" section and `RELEASE_NOTES.md`.
    *
    * When the legacy flat shape is detected, DataTable converts it to a tree via
@@ -365,10 +367,14 @@ const EMPTY_FILTER_VALUES: FilterValues = Object.freeze({}) as FilterValues
 //   sticky right-0  → shadow falls to the LEFT  (use `before:` + `-left-2` + `to-l`)
 //   sticky left-0   → shadow falls to the RIGHT (use `after:`  + `-right-2` + `to-r`)
 // `foreground/8` matches the `--shadow-md` token opacity (8%) and is theme-aware.
+// Column pinning (and these shadows) is md-and-up only: below `md` the pinned
+// first column + actions column can be wider than the whole viewport, which
+// leaves the scrollable middle columns no visible window at all — narrow
+// screens fall back to plain horizontal scroll so every column stays reachable.
 const STICKY_RIGHT_SHADOW_CLASS =
-  'before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-foreground/8 before:to-transparent before:pointer-events-none'
+  'md:before:absolute md:before:inset-y-0 md:before:-left-2 md:before:w-2 md:before:bg-gradient-to-l md:before:from-foreground/8 md:before:to-transparent md:before:pointer-events-none'
 const STICKY_LEFT_SHADOW_CLASS =
-  'after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-foreground/8 after:to-transparent after:pointer-events-none'
+  'md:after:absolute md:after:inset-y-0 md:after:-right-2 md:after:w-2 md:after:bg-gradient-to-r md:after:from-foreground/8 md:after:to-transparent md:after:pointer-events-none'
 
 type BulkActionExecuteResult = {
   ok: boolean
@@ -1000,6 +1006,7 @@ export function DataTable<T>({
   extensionTableId: extensionTableIdProp,
   stickyFirstColumn = false,
   stickyActionsColumn = false,
+  actionsColumnAlign = 'right',
   virtualized = false,
   virtualizedMaxHeight,
   virtualizedOverscan = 10,
@@ -1023,7 +1030,7 @@ export function DataTable<T>({
   // (`triggerRef`, `externalPopover`, `onApplyTree`, `onTriggerClick`) are
   // undefined for legacy callers — they were added in this PR and didn't exist
   // in the legacy contract.
-  // See spec `.ai/specs/2026-05-10-crm-list-filter-redesign.md` ("Migration &
+  // See spec `.ai/specs/implemented/2026-05-10-crm-list-filter-redesign.md` ("Migration &
   // Backward Compatibility") and BACKWARD_COMPATIBILITY.md §3.
   type AdvancedFilterNormalized = {
     fields?: AdvancedFilterFieldDef[]
@@ -2705,12 +2712,12 @@ export function DataTable<T>({
                   const columnMeta = (header.column.columnDef as any)?.meta
                   const priority = resolvePriority(header.column)
                   const isFirstDataColumn = headerIndex === 0
-                  const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ''
+                  const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ''
                   const headerCellContent = header.isPlaceholder ? null : (
                     <Button
                       variant="ghost"
                       type="button"
-                      className={`h-auto p-0 font-medium ${sortable && header.column.getCanSort?.() ? 'cursor-pointer select-none' : ''}`}
+                      className={`h-auto p-0 has-[>svg]:px-0 font-medium ${sortable && header.column.getCanSort?.() ? 'cursor-pointer select-none' : ''}`}
                       onClick={() => sortable && header.column.toggleSorting?.(header.column.getIsSorted() === 'asc')}
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
@@ -2737,8 +2744,8 @@ export function DataTable<T>({
                 {rowActions || injectedRowActions.length > 0 ? (
                   <TableHead
                     className={cn(
-                      'w-0 text-right',
-                      stickyActionsColumn && `sticky right-0 z-20 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
+                      actionsColumnAlign === 'center' ? 'w-0 text-center' : 'w-0 text-right',
+                      stickyActionsColumn && `md:sticky md:right-0 md:z-20 md:bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                     )}
                   >
                     {t('ui.dataTable.actionsColumn', 'Actions')}
@@ -2860,7 +2867,7 @@ export function DataTable<T>({
                       ) : content
 
                       return (
-                        <TableCell key={cell.id} className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}>
+                        <TableCell key={cell.id} className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}>
                           {wrappedContent}
                         </TableCell>
                       )
@@ -2868,8 +2875,8 @@ export function DataTable<T>({
                     {rowActions || injectedRowActions.length > 0 ? (
                       <TableCell
                         className={cn(
-                          'text-right whitespace-nowrap',
-                          stickyActionsColumn && `sticky right-0 z-10 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
+                          actionsColumnAlign === 'center' ? 'text-center whitespace-nowrap' : 'text-right whitespace-nowrap',
+                          stickyActionsColumn && `md:sticky md:right-0 md:z-10 md:bg-background ${STICKY_RIGHT_SHADOW_CLASS}`,
                         )}
                         data-actions-cell
                       >

package/src/backend/ProfileDropdown.tsx

@@ -1,5 +1,6 @@
 'use client'
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import Link from 'next/link'
 import { User, LogOut, Bell, Moon, Sun, Globe, Key, Check, ChevronRight } from 'lucide-react'
 import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
@@ -21,6 +22,8 @@ export type ProfileDropdownProps = {
   notificationsHref?: string
 }
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
 const localeLabels: Record<Locale, string> = {
   en: 'English',
   de: 'Deutsch',
@@ -42,12 +45,39 @@ export function ProfileDropdown({
   const [mounted, setMounted] = React.useState(false)
   const buttonRef = React.useRef<HTMLButtonElement>(null)
   const menuRef = React.useRef<HTMLDivElement>(null)
+  const [menuPosition, setMenuPosition] = React.useState<{ top: number; right: number } | null>(null)
   const { items: injectedItems } = useInjectedMenuItems('menu:topbar:profile-dropdown')
 
   React.useEffect(() => {
     setMounted(true)
   }, [])
 
+  // Position the portaled menu under the trigger. Rendering the menu in a body
+  // portal keeps it out of the sticky header's backdrop-blur stacking context so
+  // it always paints above page content such as the DataTable sticky Actions column.
+  useIsomorphicLayoutEffect(() => {
+    if (!open) {
+      setMenuPosition(null)
+      return
+    }
+    const updatePosition = () => {
+      const trigger = buttonRef.current
+      if (!trigger) return
+      const rect = trigger.getBoundingClientRect()
+      setMenuPosition({
+        top: rect.bottom + 8,
+        right: Math.max(0, window.innerWidth - rect.right),
+      })
+    }
+    updatePosition()
+    window.addEventListener('resize', updatePosition)
+    window.addEventListener('scroll', updatePosition, true)
+    return () => {
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    }
+  }, [open])
+
   const isDark = resolvedTheme === 'dark'
 
   // Close on click outside
@@ -336,10 +366,11 @@ export function ProfileDropdown({
         <User className="size-4" />
       </IconButton>
 
-      {open && (
+      {open && menuPosition && typeof document !== 'undefined' && createPortal(
         <div
           ref={menuRef}
-          className="absolute right-0 top-full z-popover mt-2 w-64 overflow-hidden rounded-lg border bg-popover p-0 shadow-lg"
+          className="fixed z-popover w-64 overflow-hidden rounded-lg border bg-popover p-0 shadow-lg"
+          style={{ top: menuPosition.top, right: menuPosition.right }}
           role="menu"
           data-testid="profile-dropdown"
         >
@@ -384,7 +415,8 @@ export function ProfileDropdown({
               context={injectionContext}
             />
           </div>
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   )