feat(data-table): locale-format the date value in filter chips

Date filter chips now render the value as a locale-appropriate medium date
(e.g. "15 Jun 2026" / "Jun 15, 2026") via @internationalized/date's
DateFormatter with the resolved AppShell locale, instead of the raw ISO
"2026-06-15". Formatted in UTC so the calendar date never shifts across zones.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/data-table/toolbar.test.tsx

@@ -502,7 +502,7 @@ describe("DateFilterEditor", () => {
       wrapper,
     });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
 
     expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
   });
@@ -514,7 +514,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
 
     // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
     expect(
@@ -529,7 +529,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await typeDateInto(user, 0, "2026-06-15");
@@ -545,7 +545,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await clearDateIn(user, 0);
@@ -571,15 +571,17 @@ describe("DateFilterEditor", () => {
       />,
       { wrapper },
     );
-    expect(screen.getByText(/Created At exact date 2025-01-01/)).toBeDefined();
+    // Operator label is friendly, and the value is locale-formatted (not raw ISO).
+    expect(screen.getByText(/Created At exact date Jan 1, 2025/)).toBeDefined();
+    expect(screen.queryByText(/2025-01-01/)).toBeNull();
 
     rerender(
       <TestFilters
         control={makeControl({ filters: [control.filters[1]] })}
         columns={[dateColumn]}
       />,
     );
-    expect(screen.getByText(/Created At after 2025-02-01/)).toBeDefined();
+    expect(screen.getByText(/Created At after Feb 1, 2025/)).toBeDefined();
     expect(screen.queryByText(/greater than/)).toBeNull();
 
     rerender(
@@ -588,7 +590,7 @@ describe("DateFilterEditor", () => {
         columns={[dateColumn]}
       />,
     );
-    expect(screen.getByText(/Created At before 2025-03-01/)).toBeDefined();
+    expect(screen.getByText(/Created At before Mar 1, 2025/)).toBeDefined();
   });
 });
 
@@ -897,7 +899,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
 
@@ -920,7 +922,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
     await screen.findByRole("button", { name: "Apply" });
@@ -950,7 +952,7 @@ describe("TemporalFilterEditor (between)", () => {
 
     await user.click(
       screen.getByRole("button", {
-        name: /Created At between 2025-01-01 - 2025-12-31/,
+        name: /Created At between/,
       }),
     );
     await screen.findByRole("button", { name: "Apply" });

packages/core/src/components/data-table/toolbar.tsx

@@ -8,7 +8,8 @@ import { Button } from "@/components/button";
 import { Input } from "@/components/input";
 import { Select } from "@/components/select-standalone";
 import { DatePicker } from "@/components/date-picker-standalone";
-import { parseDate } from "@internationalized/date";
+import { parseDate, DateFormatter } from "@internationalized/date";
+import { useResolvedLocale } from "@/contexts/appshell-context";
 import { useDataTableContext } from "./data-table-context";
 import { useDataTableT } from "./i18n";
 import type { CollectionControl, Filter, FilterConfig, FilterOperator } from "@/types/collection";
@@ -548,6 +549,7 @@ function FilterChip({
   control: CollectionControl;
 }) {
   const t = useDataTableT();
+  const { locale } = useResolvedLocale();
   const config = column.filter;
   const label = column.label ?? config.field;
 
@@ -565,7 +567,7 @@ function FilterChip({
     control.removeFilter(config.field);
   }, [control, config.field]);
 
-  const chipLabel = getChipDisplayLabel(label, filter, config, t);
+  const chipLabel = getChipDisplayLabel(label, filter, config, t, locale);
 
   return (
     <div data-slot="data-table-filter-chip" className="astw:flex astw:items-center astw:gap-0">
@@ -1370,10 +1372,28 @@ function getOperatorLabel(
   }
 }
 
+/** Format an ISO "YYYY-MM-DD" value as a locale-appropriate medium date. */
+function formatDateValue(iso: string, locale: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return iso;
+  try {
+    // Format in UTC against a UTC-anchored instant so the calendar date never
+    // shifts across timezones.
+    return new DateFormatter(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    }).format(parseDate(iso).toDate("UTC"));
+  } catch {
+    return iso;
+  }
+}
+
 function formatFilterValue(
   filter: Filter,
   config: FilterConfig,
   t: ReturnType<typeof useDataTableT>,
+  locale: string,
 ): string {
   if (config.type === "enum" && Array.isArray(filter.value)) {
     const labels = filter.value
@@ -1394,6 +1414,18 @@ function formatFilterValue(
     return [min, max].filter(Boolean).join(" - ");
   }
 
+  if (config.type === "date") {
+    if (filter.operator === "between") {
+      const range = filter.value as { min?: unknown; max?: unknown } | null;
+      if (!range || typeof range !== "object") return "";
+      const min = range.min != null ? formatDateValue(String(range.min), locale) : "";
+      const max = range.max != null ? formatDateValue(String(range.max), locale) : "";
+      return [min, max].filter(Boolean).join(" - ");
+    }
+    if (filter.value == null || filter.value === "") return "";
+    return formatDateValue(String(filter.value), locale);
+  }
+
   if (isTemporalFilterType(config.type) && filter.operator === "between") {
     const range = filter.value as { min?: unknown; max?: unknown } | null;
     if (!range || typeof range !== "object") return "";
@@ -1415,8 +1447,9 @@ function getChipDisplayLabel(
   filter: Filter,
   config: FilterConfig,
   t: ReturnType<typeof useDataTableT>,
+  locale: string,
 ): string {
-  const valueLabel = formatFilterValue(filter, config, t);
+  const valueLabel = formatFilterValue(filter, config, t, locale);
   if (!valueLabel) return columnLabel;
 
   const operatorLabel = getOperatorLabel(filter.operator, t, config.type);