@open-mercato/ui 0.6.5-develop.4782.1.29bd722d3d → 0.6.5-develop.4790.1.bffb4fd44b

package/dist/backend/filters/FilteredEmptyResults.js

@@ -3,16 +3,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchX, Undo2 } from "lucide-react";
 import { Button } from "../../primitives/button.js";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast }) {
+function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast, onClearSearch }) {
   const t = useT();
+  const searchActive = typeof onClearSearch === "function";
+  const title = searchActive ? t("ui.advancedFilter.empty.noMatchesSearchFilters", "No {entity} match your search and filters", { entity: entityNamePlural }) : t("ui.advancedFilter.empty.noMatches", "No {entity} match these filters", { entity: entityNamePlural });
+  const description = searchActive ? t("ui.advancedFilter.empty.tryRemovingSearchFilters", "Try a different search, remove a filter, or clear everything to see everyone.") : t("ui.advancedFilter.empty.tryRemoving", "Try removing the most restrictive filter, or clear all filters to see everyone.");
+  const primaryLabel = searchActive ? t("ui.advancedFilter.empty.clearSearchAndFilters", "Clear search and filters") : t("ui.advancedFilter.empty.clearAll", "Clear all filters");
+  const handlePrimary = searchActive ? () => {
+    onClearSearch?.();
+    onClearAll();
+  } : onClearAll;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", "data-testid": "filtered-empty-results", children: [
     /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(SearchX, { className: "size-6 text-muted-foreground" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-base font-semibold", children: t("ui.advancedFilter.empty.noMatches", "No {entity} match these filters", { entity: entityNamePlural }) }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground max-w-md text-center", children: t("ui.advancedFilter.empty.tryRemoving", "Try removing the most restrictive filter, or clear all filters to see everyone.") })
+      /* @__PURE__ */ jsx("div", { className: "text-base font-semibold", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground max-w-md text-center", children: description })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClearAll, children: t("ui.advancedFilter.empty.clearAll", "Clear all filters") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: handlePrimary, children: primaryLabel }),
       /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", disabled: !canRemoveLast, onClick: onRemoveLast, children: [
         /* @__PURE__ */ jsx(Undo2, { className: "size-4" }),
         t("ui.advancedFilter.empty.removeLast", "Remove last filter")

package/dist/backend/filters/FilteredEmptyResults.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/filters/FilteredEmptyResults.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { SearchX, Undo2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type FilteredEmptyResultsProps = {\n  entityNamePlural: string\n  canRemoveLast: boolean\n  onClearAll: () => void\n  onRemoveLast: () => void\n}\n\nexport function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast }: FilteredEmptyResultsProps) {\n  const t = useT()\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4 py-12\" data-testid=\"filtered-empty-results\">\n      <div className=\"flex size-14 items-center justify-center rounded-full bg-muted\">\n        <SearchX className=\"size-6 text-muted-foreground\" />\n      </div>\n      <div className=\"flex flex-col items-center gap-1\">\n        <div className=\"text-base font-semibold\">\n          {t('ui.advancedFilter.empty.noMatches', 'No {entity} match these filters', { entity: entityNamePlural })}\n        </div>\n        <div className=\"text-sm text-muted-foreground max-w-md text-center\">\n          {t('ui.advancedFilter.empty.tryRemoving', 'Try removing the most restrictive filter, or clear all filters to see everyone.')}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" onClick={onClearAll}>\n          {t('ui.advancedFilter.empty.clearAll', 'Clear all filters')}\n        </Button>\n        <Button type=\"button\" variant=\"outline\" disabled={!canRemoveLast} onClick={onRemoveLast}>\n          <Undo2 className=\"size-4\" />\n          {t('ui.advancedFilter.empty.removeLast', 'Remove last filter')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": ";AAkBQ,cAEF,YAFE;AAhBR,SAAS,SAAS,aAAa;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AASd,SAAS,qBAAqB,EAAE,kBAAkB,eAAe,YAAY,aAAa,GAA8B;AAC7H,QAAM,IAAI,KAAK;AACf,SACE,qBAAC,SAAI,WAAU,yDAAwD,eAAY,0BACjF;AAAA,wBAAC,SAAI,WAAU,kEACb,8BAAC,WAAQ,WAAU,gCAA+B,GACpD;AAAA,IACA,qBAAC,SAAI,WAAU,oCACb;AAAA,0BAAC,SAAI,WAAU,2BACZ,YAAE,qCAAqC,mCAAmC,EAAE,QAAQ,iBAAiB,CAAC,GACzG;AAAA,MACA,oBAAC,SAAI,WAAU,sDACZ,YAAE,uCAAuC,iFAAiF,GAC7H;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UAAO,MAAK,UAAS,SAAS,YAC5B,YAAE,oCAAoC,mBAAmB,GAC5D;AAAA,MACA,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,UAAU,CAAC,eAAe,SAAS,cACzE;AAAA,4BAAC,SAAM,WAAU,UAAS;AAAA,QACzB,EAAE,sCAAsC,oBAAoB;AAAA,SAC/D;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { SearchX, Undo2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type FilteredEmptyResultsProps = {\n  entityNamePlural: string\n  canRemoveLast: boolean\n  onClearAll: () => void\n  onRemoveLast: () => void\n  /**\n   * When provided, a search is ALSO active alongside the filters. Switches the\n   * copy to a combined search+filter message and makes the primary action clear\n   * both the search and the filters (so a single click shows everyone).\n   */\n  onClearSearch?: () => void\n}\n\nexport function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast, onClearSearch }: FilteredEmptyResultsProps) {\n  const t = useT()\n  const searchActive = typeof onClearSearch === 'function'\n  const title = searchActive\n    ? t('ui.advancedFilter.empty.noMatchesSearchFilters', 'No {entity} match your search and filters', { entity: entityNamePlural })\n    : t('ui.advancedFilter.empty.noMatches', 'No {entity} match these filters', { entity: entityNamePlural })\n  const description = searchActive\n    ? t('ui.advancedFilter.empty.tryRemovingSearchFilters', 'Try a different search, remove a filter, or clear everything to see everyone.')\n    : t('ui.advancedFilter.empty.tryRemoving', 'Try removing the most restrictive filter, or clear all filters to see everyone.')\n  const primaryLabel = searchActive\n    ? t('ui.advancedFilter.empty.clearSearchAndFilters', 'Clear search and filters')\n    : t('ui.advancedFilter.empty.clearAll', 'Clear all filters')\n  const handlePrimary = searchActive\n    ? () => { onClearSearch?.(); onClearAll() }\n    : onClearAll\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4 py-12\" data-testid=\"filtered-empty-results\">\n      <div className=\"flex size-14 items-center justify-center rounded-full bg-muted\">\n        <SearchX className=\"size-6 text-muted-foreground\" />\n      </div>\n      <div className=\"flex flex-col items-center gap-1\">\n        <div className=\"text-base font-semibold\">{title}</div>\n        <div className=\"text-sm text-muted-foreground max-w-md text-center\">{description}</div>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Button type=\"button\" onClick={handlePrimary}>{primaryLabel}</Button>\n        <Button type=\"button\" variant=\"outline\" disabled={!canRemoveLast} onClick={onRemoveLast}>\n          <Undo2 className=\"size-4\" />\n          {t('ui.advancedFilter.empty.removeLast', 'Remove last filter')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAqCQ,cAEF,YAFE;AAnCR,SAAS,SAAS,aAAa;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AAed,SAAS,qBAAqB,EAAE,kBAAkB,eAAe,YAAY,cAAc,cAAc,GAA8B;AAC5I,QAAM,IAAI,KAAK;AACf,QAAM,eAAe,OAAO,kBAAkB;AAC9C,QAAM,QAAQ,eACV,EAAE,kDAAkD,6CAA6C,EAAE,QAAQ,iBAAiB,CAAC,IAC7H,EAAE,qCAAqC,mCAAmC,EAAE,QAAQ,iBAAiB,CAAC;AAC1G,QAAM,cAAc,eAChB,EAAE,oDAAoD,+EAA+E,IACrI,EAAE,uCAAuC,iFAAiF;AAC9H,QAAM,eAAe,eACjB,EAAE,iDAAiD,0BAA0B,IAC7E,EAAE,oCAAoC,mBAAmB;AAC7D,QAAM,gBAAgB,eAClB,MAAM;AAAE,oBAAgB;AAAG,eAAW;AAAA,EAAE,IACxC;AACJ,SACE,qBAAC,SAAI,WAAU,yDAAwD,eAAY,0BACjF;AAAA,wBAAC,SAAI,WAAU,kEACb,8BAAC,WAAQ,WAAU,gCAA+B,GACpD;AAAA,IACA,qBAAC,SAAI,WAAU,oCACb;AAAA,0BAAC,SAAI,WAAU,2BAA2B,iBAAM;AAAA,MAChD,oBAAC,SAAI,WAAU,sDAAsD,uBAAY;AAAA,OACnF;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UAAO,MAAK,UAAS,SAAS,eAAgB,wBAAa;AAAA,MAC5D,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,UAAU,CAAC,eAAe,SAAS,cACzE;AAAA,4BAAC,SAAM,WAAU,UAAS;AAAA,QACzB,EAAE,sCAAsC,oBAAoB;AAAA,SAC/D;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/backend/filters/ListEmptyState.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Inbox, Plus } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { EmptyState } from "../../primitives/empty-state.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function ListEmptyState({
+  entityName,
+  title,
+  description,
+  createHref,
+  onCreate,
+  createLabel,
+  icon
+}) {
+  const t = useT();
+  const entity = entityName ?? t("ui.dataTable.empty.genericEntity", "records");
+  const resolvedTitle = title ?? t("ui.dataTable.empty.title", "No {entity} yet", { entity });
+  const resolvedDescription = description ?? t("ui.dataTable.empty.description", "Items you add will show up here.");
+  const resolvedCreateLabel = createLabel ?? t("ui.dataTable.empty.create", "Create");
+  const action = createHref ? /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: createHref, children: [
+    /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": true }),
+    resolvedCreateLabel
+  ] }) }) : onCreate ? /* @__PURE__ */ jsxs(Button, { type: "button", onClick: onCreate, children: [
+    /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": true }),
+    resolvedCreateLabel
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: "subtle",
+      size: "lg",
+      icon: icon ?? /* @__PURE__ */ jsx(Inbox, { className: "size-7", "aria-hidden": true }),
+      title: resolvedTitle,
+      description: resolvedDescription,
+      actions: action
+    }
+  );
+}
+export {
+  ListEmptyState
+};
+//# sourceMappingURL=ListEmptyState.js.map

package/dist/backend/filters/ListEmptyState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/filters/ListEmptyState.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { Inbox, Plus } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { EmptyState } from '../../primitives/empty-state'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type ListEmptyStateProps = {\n  /** Plural entity label, e.g. \"companies\". Used to build the default title. */\n  entityName?: string\n  /** Overrides the generated title. */\n  title?: string\n  /** Overrides the generated description. */\n  description?: string\n  /** Create link target; renders the primary \"create\" action. */\n  createHref?: string\n  /** Create click handler (alternative to createHref). */\n  onCreate?: () => void\n  /** Label for the create action (defaults to a generic \"Create\"). */\n  createLabel?: string\n  /** Optional leading icon (defaults to a neutral inbox glyph). */\n  icon?: React.ReactNode\n}\n\n/**\n * Standardized zero-records empty state for list views (DataTable `emptyState`).\n * Use this when a list has no records yet (no active search/filter). For\n * no-results-after-search the DataTable renders SearchEmptyResults, and for\n * no-results-after-filter it renders FilteredEmptyResults.\n */\nexport function ListEmptyState({\n  entityName,\n  title,\n  description,\n  createHref,\n  onCreate,\n  createLabel,\n  icon,\n}: ListEmptyStateProps) {\n  const t = useT()\n  const entity = entityName ?? t('ui.dataTable.empty.genericEntity', 'records')\n  const resolvedTitle = title ?? t('ui.dataTable.empty.title', 'No {entity} yet', { entity })\n  const resolvedDescription = description ?? t('ui.dataTable.empty.description', 'Items you add will show up here.')\n  const resolvedCreateLabel = createLabel ?? t('ui.dataTable.empty.create', 'Create')\n  const action = createHref ? (\n    <Button asChild>\n      <Link href={createHref}>\n        <Plus className=\"size-4\" aria-hidden />\n        {resolvedCreateLabel}\n      </Link>\n    </Button>\n  ) : onCreate ? (\n    <Button type=\"button\" onClick={onCreate}>\n      <Plus className=\"size-4\" aria-hidden />\n      {resolvedCreateLabel}\n    </Button>\n  ) : null\n  return (\n    <EmptyState\n      variant=\"subtle\"\n      size=\"lg\"\n      icon={icon ?? <Inbox className=\"size-7\" aria-hidden />}\n      title={resolvedTitle}\n      description={resolvedDescription}\n      actions={action}\n    />\n  )\n}\n"],
+  "mappings": ";AA+CM,SACE,KADF;AA7CN,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAyBd,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,cAAc,EAAE,oCAAoC,SAAS;AAC5E,QAAM,gBAAgB,SAAS,EAAE,4BAA4B,mBAAmB,EAAE,OAAO,CAAC;AAC1F,QAAM,sBAAsB,eAAe,EAAE,kCAAkC,kCAAkC;AACjH,QAAM,sBAAsB,eAAe,EAAE,6BAA6B,QAAQ;AAClF,QAAM,SAAS,aACb,oBAAC,UAAO,SAAO,MACb,+BAAC,QAAK,MAAM,YACV;AAAA,wBAAC,QAAK,WAAU,UAAS,eAAW,MAAC;AAAA,IACpC;AAAA,KACH,GACF,IACE,WACF,qBAAC,UAAO,MAAK,UAAS,SAAS,UAC7B;AAAA,wBAAC,QAAK,WAAU,UAAS,eAAW,MAAC;AAAA,IACpC;AAAA,KACH,IACE;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAM,QAAQ,oBAAC,SAAM,WAAU,UAAS,eAAW,MAAC;AAAA,MACpD,OAAO;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA;AAAA,EACX;AAEJ;",
+  "names": []
+}

package/dist/backend/filters/SearchEmptyResults.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchX, X } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function SearchEmptyResults({ query, entityNamePlural, onClearSearch }) {
+  const t = useT();
+  const entity = entityNamePlural ?? t("ui.dataTable.search.empty.genericEntity", "results");
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-col items-center gap-4 py-10 text-center", "data-testid": "search-empty-results", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(SearchX, { className: "size-7 text-muted-foreground", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-foreground", children: t("ui.dataTable.search.empty.title", "No results found") }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(
+        "ui.dataTable.search.empty.description",
+        "We couldn\u2019t find any {entity} matching \u201C{query}\u201D. Try adjusting your search or filters.",
+        { entity, query }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { type: "button", onClick: onClearSearch, children: [
+      /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }),
+      t("ui.dataTable.search.empty.clear", "Clear search")
+    ] })
+  ] });
+}
+export {
+  SearchEmptyResults
+};
+//# sourceMappingURL=SearchEmptyResults.js.map

package/dist/backend/filters/SearchEmptyResults.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/filters/SearchEmptyResults.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { SearchX, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type SearchEmptyResultsProps = {\n  /** The active search query, shown back to the user. */\n  query: string\n  /** Plural entity label (e.g. \"companies\"); falls back to a generic word. */\n  entityNamePlural?: string\n  /** Clears the active search. */\n  onClearSearch: () => void\n}\n\nexport function SearchEmptyResults({ query, entityNamePlural, onClearSearch }: SearchEmptyResultsProps) {\n  const t = useT()\n  const entity = entityNamePlural ?? t('ui.dataTable.search.empty.genericEntity', 'results')\n  return (\n    <div className=\"flex w-full max-w-md flex-col items-center gap-4 py-10 text-center\" data-testid=\"search-empty-results\">\n      <div className=\"flex size-16 items-center justify-center rounded-full bg-muted\">\n        <SearchX className=\"size-7 text-muted-foreground\" aria-hidden />\n      </div>\n      <div className=\"flex flex-col items-center gap-1\">\n        <div className=\"text-base font-semibold text-foreground\">\n          {t('ui.dataTable.search.empty.title', 'No results found')}\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          {t(\n            'ui.dataTable.search.empty.description',\n            'We couldn\u2019t find any {entity} matching \u201C{query}\u201D. Try adjusting your search or filters.',\n            { entity, query },\n          )}\n        </p>\n      </div>\n      <Button type=\"button\" onClick={onClearSearch}>\n        <X className=\"size-4\" aria-hidden />\n        {t('ui.dataTable.search.empty.clear', 'Clear search')}\n      </Button>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAqBQ,cAEF,YAFE;AAnBR,SAAS,SAAS,SAAS;AAC3B,SAAS,cAAc;AACvB,SAAS,YAAY;AAWd,SAAS,mBAAmB,EAAE,OAAO,kBAAkB,cAAc,GAA4B;AACtG,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,oBAAoB,EAAE,2CAA2C,SAAS;AACzF,SACE,qBAAC,SAAI,WAAU,sEAAqE,eAAY,wBAC9F;AAAA,wBAAC,SAAI,WAAU,kEACb,8BAAC,WAAQ,WAAU,gCAA+B,eAAW,MAAC,GAChE;AAAA,IACA,qBAAC,SAAI,WAAU,oCACb;AAAA,0BAAC,SAAI,WAAU,2CACZ,YAAE,mCAAmC,kBAAkB,GAC1D;AAAA,MACA,oBAAC,OAAE,WAAU,iCACV;AAAA,QACC;AAAA,QACA;AAAA,QACA,EAAE,QAAQ,MAAM;AAAA,MAClB,GACF;AAAA,OACF;AAAA,IACA,qBAAC,UAAO,MAAK,UAAS,SAAS,eAC7B;AAAA,0BAAC,KAAE,WAAU,UAAS,eAAW,MAAC;AAAA,MACjC,EAAE,mCAAmC,cAAc;AAAA,OACtD;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.4782.1.29bd722d3d",
+  "version": "0.6.5-develop.4790.1.bffb4fd44b",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -149,13 +149,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4782.1.29bd722d3d",
+    "@open-mercato/shared": "0.6.5-develop.4790.1.bffb4fd44b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4782.1.29bd722d3d",
+    "@open-mercato/shared": "0.6.5-develop.4790.1.bffb4fd44b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/DataTable.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, type ColumnDef, type SortingState, type Column as TableColumn, type VisibilityState, type RowSelectionState } from '@tanstack/react-table'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check } from 'lucide-react'
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox } from 'lucide-react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
@@ -22,6 +22,7 @@ import { TooltipProvider } from '../primitives/tooltip'
 import { TruncatedCell } from './TruncatedCell'
 import { FilterBar, type FilterDef, type FilterValues } from './FilterBar'
 import { FilteredEmptyResults } from './filters/FilteredEmptyResults'
+import { SearchEmptyResults } from './filters/SearchEmptyResults'
 import { useCustomFieldFilterDefs } from './utils/customFieldFilters'
 import { fetchCustomFieldDefinitionsPayload, type CustomFieldsetDto } from './utils/customFieldDefs'
 import { RowActions, type RowActionItem } from './RowActions'
@@ -2552,6 +2553,22 @@ export function DataTable<T>({
   const tableScrollWrapperClassName = embedded ? '' : 'overflow-auto'
 
   const virtualScrollRef = React.useRef<HTMLDivElement>(null)
+  // Measure the horizontal scroll viewport so the empty state can center within
+  // the visible area instead of within the (often wider, overflowing) table.
+  const [tableScrollEl, setTableScrollEl] = React.useState<HTMLDivElement | null>(null)
+  const [emptyStateViewportWidth, setEmptyStateViewportWidth] = React.useState<number | null>(null)
+  const setTableScrollWrapperRef = React.useCallback((node: HTMLDivElement | null) => {
+    setTableScrollEl(node)
+    virtualScrollRef.current = node
+  }, [])
+  React.useEffect(() => {
+    if (!tableScrollEl || typeof ResizeObserver === 'undefined') return
+    const update = () => setEmptyStateViewportWidth(tableScrollEl.clientWidth)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(tableScrollEl)
+    return () => observer.disconnect()
+  }, [tableScrollEl])
   const allRows = table.getRowModel().rows
   const rowVirtualizer = virtualized
     ? useVirtualizer({
@@ -2668,7 +2685,7 @@ export function DataTable<T>({
         columnIds={headerColumnIds}
         onDragEnd={handleHeaderDragEnd}
       >
-      <div ref={virtualized ? virtualScrollRef : undefined} className={tableScrollWrapperClassName} style={virtualMaxHeightStyle}>
+      <div ref={setTableScrollWrapperRef} className={tableScrollWrapperClassName} style={virtualMaxHeightStyle}>
         <Table className="min-w-[640px] md:min-w-0">
           <TableHeader>
             {table.getHeaderGroups().map((hg) => (
@@ -2871,26 +2888,44 @@ export function DataTable<T>({
               </>
             ) : (
               <TableRow>
-                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="py-6">
-                  {filterAwareEmptyState?.active ? (
-                    <FilteredEmptyResults
-                      entityNamePlural={filterAwareEmptyState.entityNamePlural}
-                      canRemoveLast={filterAwareEmptyState.canRemoveLast}
-                      onClearAll={filterAwareEmptyState.onClearAll}
-                      onRemoveLast={filterAwareEmptyState.onRemoveLast}
-                    />
-                  ) : emptyState && typeof emptyState !== 'string' ? (
-                    emptyState
-                  ) : (
-                    <EmptyState
-                      size="sm"
-                      title={
-                        typeof emptyState === 'string'
-                          ? emptyState
-                          : t('ui.dataTable.emptyState.default', 'No results.')
-                      }
-                    />
-                  )}
+                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="p-0">
+                  <div
+                    className={cn('sticky left-0 flex justify-center py-6', emptyStateViewportWidth ? '' : 'w-fit')}
+                    style={emptyStateViewportWidth ? { width: emptyStateViewportWidth } : undefined}
+                  >
+                    {filterAwareEmptyState?.active ? (
+                      <FilteredEmptyResults
+                        entityNamePlural={filterAwareEmptyState.entityNamePlural}
+                        canRemoveLast={filterAwareEmptyState.canRemoveLast}
+                        onClearAll={filterAwareEmptyState.onClearAll}
+                        onRemoveLast={filterAwareEmptyState.onRemoveLast}
+                        onClearSearch={searchValue && searchValue.trim().length > 0 && onSearchChange ? () => onSearchChange('') : undefined}
+                      />
+                    ) : searchValue && searchValue.trim().length > 0 && onSearchChange ? (
+                      <SearchEmptyResults
+                        query={searchValue.trim()}
+                        entityNamePlural={filterAwareEmptyState?.entityNamePlural}
+                        onClearSearch={() => onSearchChange('')}
+                      />
+                    ) : emptyState && typeof emptyState !== 'string' ? (
+                      emptyState
+                    ) : (
+                      <EmptyState
+                        variant="subtle"
+                        icon={<Inbox className="size-6" aria-hidden />}
+                        title={
+                          typeof emptyState === 'string'
+                            ? emptyState
+                            : t('ui.dataTable.emptyState.default', 'No results.')
+                        }
+                        description={
+                          typeof emptyState === 'string'
+                            ? undefined
+                            : t('ui.dataTable.emptyState.defaultDescription', 'Items will appear here once added.')
+                        }
+                      />
+                    )}
+                  </div>
                 </TableCell>
               </TableRow>
             )}

package/src/backend/filters/FilteredEmptyResults.tsx

@@ -9,27 +9,40 @@ export type FilteredEmptyResultsProps = {
   canRemoveLast: boolean
   onClearAll: () => void
   onRemoveLast: () => void
+  /**
+   * When provided, a search is ALSO active alongside the filters. Switches the
+   * copy to a combined search+filter message and makes the primary action clear
+   * both the search and the filters (so a single click shows everyone).
+   */
+  onClearSearch?: () => void
 }
 
-export function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast }: FilteredEmptyResultsProps) {
+export function FilteredEmptyResults({ entityNamePlural, canRemoveLast, onClearAll, onRemoveLast, onClearSearch }: FilteredEmptyResultsProps) {
   const t = useT()
+  const searchActive = typeof onClearSearch === 'function'
+  const title = searchActive
+    ? t('ui.advancedFilter.empty.noMatchesSearchFilters', 'No {entity} match your search and filters', { entity: entityNamePlural })
+    : t('ui.advancedFilter.empty.noMatches', 'No {entity} match these filters', { entity: entityNamePlural })
+  const description = searchActive
+    ? t('ui.advancedFilter.empty.tryRemovingSearchFilters', 'Try a different search, remove a filter, or clear everything to see everyone.')
+    : t('ui.advancedFilter.empty.tryRemoving', 'Try removing the most restrictive filter, or clear all filters to see everyone.')
+  const primaryLabel = searchActive
+    ? t('ui.advancedFilter.empty.clearSearchAndFilters', 'Clear search and filters')
+    : t('ui.advancedFilter.empty.clearAll', 'Clear all filters')
+  const handlePrimary = searchActive
+    ? () => { onClearSearch?.(); onClearAll() }
+    : onClearAll
   return (
     <div className="flex flex-col items-center justify-center gap-4 py-12" data-testid="filtered-empty-results">
       <div className="flex size-14 items-center justify-center rounded-full bg-muted">
         <SearchX className="size-6 text-muted-foreground" />
       </div>
       <div className="flex flex-col items-center gap-1">
-        <div className="text-base font-semibold">
-          {t('ui.advancedFilter.empty.noMatches', 'No {entity} match these filters', { entity: entityNamePlural })}
-        </div>
-        <div className="text-sm text-muted-foreground max-w-md text-center">
-          {t('ui.advancedFilter.empty.tryRemoving', 'Try removing the most restrictive filter, or clear all filters to see everyone.')}
-        </div>
+        <div className="text-base font-semibold">{title}</div>
+        <div className="text-sm text-muted-foreground max-w-md text-center">{description}</div>
       </div>
       <div className="flex items-center gap-2">
-        <Button type="button" onClick={onClearAll}>
-          {t('ui.advancedFilter.empty.clearAll', 'Clear all filters')}
-        </Button>
+        <Button type="button" onClick={handlePrimary}>{primaryLabel}</Button>
         <Button type="button" variant="outline" disabled={!canRemoveLast} onClick={onRemoveLast}>
           <Undo2 className="size-4" />
           {t('ui.advancedFilter.empty.removeLast', 'Remove last filter')}

package/src/backend/filters/ListEmptyState.tsx

@@ -0,0 +1,69 @@
+'use client'
+import * as React from 'react'
+import Link from 'next/link'
+import { Inbox, Plus } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { EmptyState } from '../../primitives/empty-state'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type ListEmptyStateProps = {
+  /** Plural entity label, e.g. "companies". Used to build the default title. */
+  entityName?: string
+  /** Overrides the generated title. */
+  title?: string
+  /** Overrides the generated description. */
+  description?: string
+  /** Create link target; renders the primary "create" action. */
+  createHref?: string
+  /** Create click handler (alternative to createHref). */
+  onCreate?: () => void
+  /** Label for the create action (defaults to a generic "Create"). */
+  createLabel?: string
+  /** Optional leading icon (defaults to a neutral inbox glyph). */
+  icon?: React.ReactNode
+}
+
+/**
+ * Standardized zero-records empty state for list views (DataTable `emptyState`).
+ * Use this when a list has no records yet (no active search/filter). For
+ * no-results-after-search the DataTable renders SearchEmptyResults, and for
+ * no-results-after-filter it renders FilteredEmptyResults.
+ */
+export function ListEmptyState({
+  entityName,
+  title,
+  description,
+  createHref,
+  onCreate,
+  createLabel,
+  icon,
+}: ListEmptyStateProps) {
+  const t = useT()
+  const entity = entityName ?? t('ui.dataTable.empty.genericEntity', 'records')
+  const resolvedTitle = title ?? t('ui.dataTable.empty.title', 'No {entity} yet', { entity })
+  const resolvedDescription = description ?? t('ui.dataTable.empty.description', 'Items you add will show up here.')
+  const resolvedCreateLabel = createLabel ?? t('ui.dataTable.empty.create', 'Create')
+  const action = createHref ? (
+    <Button asChild>
+      <Link href={createHref}>
+        <Plus className="size-4" aria-hidden />
+        {resolvedCreateLabel}
+      </Link>
+    </Button>
+  ) : onCreate ? (
+    <Button type="button" onClick={onCreate}>
+      <Plus className="size-4" aria-hidden />
+      {resolvedCreateLabel}
+    </Button>
+  ) : null
+  return (
+    <EmptyState
+      variant="subtle"
+      size="lg"
+      icon={icon ?? <Inbox className="size-7" aria-hidden />}
+      title={resolvedTitle}
+      description={resolvedDescription}
+      actions={action}
+    />
+  )
+}

package/src/backend/filters/SearchEmptyResults.tsx

@@ -0,0 +1,42 @@
+'use client'
+import * as React from 'react'
+import { SearchX, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type SearchEmptyResultsProps = {
+  /** The active search query, shown back to the user. */
+  query: string
+  /** Plural entity label (e.g. "companies"); falls back to a generic word. */
+  entityNamePlural?: string
+  /** Clears the active search. */
+  onClearSearch: () => void
+}
+
+export function SearchEmptyResults({ query, entityNamePlural, onClearSearch }: SearchEmptyResultsProps) {
+  const t = useT()
+  const entity = entityNamePlural ?? t('ui.dataTable.search.empty.genericEntity', 'results')
+  return (
+    <div className="flex w-full max-w-md flex-col items-center gap-4 py-10 text-center" data-testid="search-empty-results">
+      <div className="flex size-16 items-center justify-center rounded-full bg-muted">
+        <SearchX className="size-7 text-muted-foreground" aria-hidden />
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <div className="text-base font-semibold text-foreground">
+          {t('ui.dataTable.search.empty.title', 'No results found')}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          {t(
+            'ui.dataTable.search.empty.description',
+            'We couldn’t find any {entity} matching “{query}”. Try adjusting your search or filters.',
+            { entity, query },
+          )}
+        </p>
+      </div>
+      <Button type="button" onClick={onClearSearch}>
+        <X className="size-4" aria-hidden />
+        {t('ui.dataTable.search.empty.clear', 'Clear search')}
+      </Button>
+    </div>
+  )
+}

package/src/backend/filters/__tests__/ListEmptyState.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ListEmptyState } from '../ListEmptyState'
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback?: string, params?: Record<string, unknown>) => {
+    let out = fallback ?? _key
+    if (params) for (const k of Object.keys(params)) out = out.replace(`{${k}}`, String(params[k]))
+    return out
+  },
+}))
+
+jest.mock('next/link', () => {
+  const React = require('react')
+  return React.forwardRef(
+    ({ children, href, ...rest }: any, ref: React.ForwardedRef<HTMLAnchorElement>) => (
+      <a href={typeof href === 'string' ? href : href?.toString?.()} ref={ref} {...rest}>
+        {children}
+      </a>
+    ),
+  )
+})
+
+describe('ListEmptyState', () => {
+  it('builds the title from entityName', () => {
+    render(<ListEmptyState entityName="companies" />)
+    expect(screen.getByText('No companies yet')).toBeInTheDocument()
+  })
+
+  it('renders a create link (role=link) with href and label when createHref is set', () => {
+    render(<ListEmptyState entityName="companies" createHref="/backend/customers/companies/create" createLabel="New company" />)
+    const link = screen.getByRole('link', { name: /new company/i })
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('href', '/backend/customers/companies/create')
+  })
+
+  it('renders a create button when onCreate is provided', () => {
+    const onCreate = jest.fn()
+    render(<ListEmptyState entityName="users" onCreate={onCreate} createLabel="Add user" />)
+    expect(screen.getByRole('button', { name: /add user/i })).toBeInTheDocument()
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
+  })
+
+  it('renders no action when neither createHref nor onCreate is provided', () => {
+    render(<ListEmptyState entityName="records" />)
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+})