@rowakit/table 0.1.0 → 0.2.0

package/README.md

@@ -11,7 +11,9 @@ RowaKit Table is a React table component designed for real-world internal applic
 ✅ **Minimal API** - Few props, convention over configuration  
 ✅ **Escape hatch** - `col.custom()` for any rendering need  
 ✅ **Action buttons** - Built-in support for row actions with confirmation  
-✅ **5 column types** - Text, Date, Boolean, Actions, Custom  
+✅ **7 column types** - Text, Date, Boolean, Badge, Number, Actions, Custom  
+✅ **Column modifiers** - Width, align, truncate support (v0.2.0+)  
+✅ **Server-side filters** - Type-specific filter UI with auto-generated inputs (v0.2.0+)  
 ✅ **State management** - Automatic loading, error, and empty states  
 ✅ **Smart fetching** - Retry on error, stale request handling
 
@@ -235,6 +237,86 @@ col.boolean('enabled', { format: (val) => val ? '✓' : '✗' })
 
 **Default format:** `'Yes'` / `'No'`
 
+#### `col.badge(field, options?)` (v0.2.0+)
+
+Badge column with visual tone mapping for status/enum values.
+
+```typescript
+col.badge('status', {
+  header: 'Status',
+  map: {
+    active: { label: 'Active', tone: 'success' },
+    pending: { label: 'Pending', tone: 'warning' },
+    inactive: { label: 'Inactive', tone: 'neutral' },
+    error: { label: 'Error', tone: 'danger' }
+  }
+})
+
+col.badge('priority', {
+  header: 'Priority',
+  sortable: true,
+  map: {
+    high: { label: 'High', tone: 'danger' },
+    medium: { label: 'Medium', tone: 'warning' },
+    low: { label: 'Low', tone: 'success' }
+  }
+})
+```
+
+**Options:**
+- `header?: string` - Custom header label
+- `sortable?: boolean` - Enable sorting
+- `map?: Record<string, { label: string; tone: BadgeTone }>` - Map values to badge labels and visual tones
+- `width?: number` - Column width in pixels
+- `align?: 'left' | 'center' | 'right'` - Text alignment
+- `truncate?: boolean` - Truncate with ellipsis
+
+**Badge Tones:**
+- `'neutral'` - Gray (default)
+- `'success'` - Green
+- `'warning'` - Yellow/Orange
+- `'danger'` - Red
+
+#### `col.number(field, options?)` (v0.2.0+)
+
+Number column with formatting support (currency, percentages, decimals).
+
+```typescript
+// Basic number
+col.number('quantity')
+
+// Currency formatting with Intl.NumberFormat
+col.number('price', {
+  header: 'Price',
+  sortable: true,
+  format: { style: 'currency', currency: 'USD' }
+})
+
+// Percentage
+col.number('discount', {
+  header: 'Discount',
+  format: { style: 'percent', minimumFractionDigits: 1 }
+})
+
+// Custom formatter
+col.number('score', {
+  header: 'Score',
+  format: (value) => `${value.toFixed(1)} pts`
+})
+```
+
+**Options:**
+- `header?: string` - Custom header label
+- `sortable?: boolean` - Enable sorting
+- `format?: Intl.NumberFormatOptions | ((value: number) => string)` - Formatting
+  - `Intl.NumberFormatOptions`: e.g., `{ style: 'currency', currency: 'USD' }`
+  - Function: Custom formatter like `(value) => value.toFixed(2)`
+- `width?: number` - Column width in pixels
+- `align?: 'left' | 'center' | 'right'` - Text alignment (defaults to 'right')
+- `truncate?: boolean` - Truncate with ellipsis
+
+**Default format:** Plain number with right alignment
+
 #### `col.actions(actions)`
 
 Actions column with buttons for row operations.
@@ -294,6 +376,41 @@ col.custom('summary', (row) => {
 })
 ```
 
+### Column Modifiers (v0.2.0+)
+
+All column types (text, date, boolean, badge, number) support these optional modifiers:
+
+```typescript
+// Width: Set fixed column width in pixels
+col.text('name', { width: 200 })
+
+// Align: Control text alignment
+col.text('status', { align: 'center' })
+col.number('price', { align: 'right' }) // numbers default to 'right'
+
+// Truncate: Enable text truncation with ellipsis
+col.text('description', { truncate: true, width: 300 })
+
+// Combine multiple modifiers
+col.badge('status', {
+  header: 'Status',
+  width: 120,
+  align: 'center',
+  truncate: true,
+  map: { active: 'success', inactive: 'neutral' }
+})
+```
+
+**Modifiers:**
+- `width?: number` - Column width in pixels
+- `align?: 'left' | 'center' | 'right'` - Text alignment
+- `truncate?: boolean` - Truncate long text with ellipsis (requires `width`)
+
+**Notes:**
+- Number columns default to `align: 'right'`
+- Other columns default to `align: 'left'`
+- Truncate works best with a fixed `width`
+
 ### Pagination
 
 The table includes built-in pagination controls that appear automatically when data is loaded.
@@ -411,6 +528,8 @@ const fetchUsers: Fetcher<User> = async ({ page, pageSize, sort }) => {
 - ✅ Text columns with `sortable: true`
 - ✅ Date columns with `sortable: true`
 - ✅ Boolean columns with `sortable: true`
+- ✅ Badge columns with `sortable: true` (v0.2.0+)
+- ✅ Number columns with `sortable: true` (v0.2.0+)
 - ❌ Actions columns (never sortable)
 - ❌ Custom columns (not sortable by default)
 
@@ -421,6 +540,120 @@ const fetchUsers: Fetcher<User> = async ({ page, pageSize, sort }) => {
 - Cleared when clicking a sorted column three times
 - Replaced when clicking a different sortable column
 
+### Filters (v0.2.0+)
+
+Server-side filtering with type-specific filter inputs rendered in a header row.
+
+**Features:**
+- **Auto-Generated UI** - Filter inputs based on column type
+- **Server-Side Only** - All filtering happens in your backend
+- **Multiple Operators** - contains, equals, in, range
+- **Clear Filters** - Individual and bulk filter clearing
+- **Page Reset** - Resets to page 1 when filters change
+
+**Enable Filters:**
+
+```typescript
+<RowaKitTable
+  fetcher={fetchUsers}
+  columns={columns}
+  rowKey="id"
+  enableFilters={true}  // Add this prop
+/>
+```
+
+**Filter Types by Column:**
+
+```typescript
+// Text column: Text input with "contains" operator
+col.text('name', { header: 'Name' })
+// → User types "john" → filters: { name: { op: 'contains', value: 'john' } }
+
+// Number column: Text input with "equals" operator
+col.number('age', { header: 'Age' })
+// → User types "25" → filters: { age: { op: 'equals', value: '25' } }
+
+// Badge column: Select dropdown with "equals" operator
+col.badge('status', {
+  header: 'Status',
+  map: { active: 'success', inactive: 'neutral', pending: 'warning' }
+})
+// → User selects "active" → filters: { status: { op: 'equals', value: 'active' } }
+
+// Boolean column: Select dropdown (All/True/False) with "equals" operator
+col.boolean('isVerified', { header: 'Verified' })
+// → User selects "True" → filters: { isVerified: { op: 'equals', value: true } }
+
+// Date column: Two date inputs with "range" operator
+col.date('createdAt', { header: 'Created' })
+// → User enters from/to dates → filters: { createdAt: { op: 'range', value: { from: '2024-01-01', to: '2024-12-31' } } }
+```
+
+**Fetcher Integration:**
+
+```typescript
+const fetchUsers: Fetcher<User> = async ({ page, pageSize, sort, filters }) => {
+  // filters is undefined when no filters are active
+  // filters = { fieldName: FilterValue, ... } when filtering
+  
+  const params = new URLSearchParams({
+    page: String(page),
+    limit: String(pageSize),
+  });
+  
+  if (sort) {
+    params.append('sortBy', sort.field);
+    params.append('sortOrder', sort.direction);
+  }
+  
+  if (filters) {
+    // Example: Convert filters to query params
+    for (const [field, filter] of Object.entries(filters)) {
+      if (filter.op === 'contains') {
+        params.append(`${field}_contains`, filter.value);
+      } else if (filter.op === 'equals') {
+        params.append(field, String(filter.value));
+      } else if (filter.op === 'range') {
+        if (filter.value.from) params.append(`${field}_from`, filter.value.from);
+        if (filter.value.to) params.append(`${field}_to`, filter.value.to);
+      }
+    }
+  }
+  
+  const response = await fetch(`/api/users?${params}`);
+  return response.json();
+};
+```
+
+**Filter Value Types:**
+
+```typescript
+type FilterValue =
+  | { op: 'contains'; value: string }           // Text search
+  | { op: 'equals'; value: string | number | boolean | null }  // Exact match
+  | { op: 'in'; value: Array<string | number> } // Multiple values (future)
+  | { op: 'range'; value: { from?: string; to?: string } };    // Date range
+
+type Filters = Record<string, FilterValue>;
+```
+
+**Important Rules:**
+
+1. **Undefined when empty**: `query.filters` is `undefined` when no filters are active (not `{}`)
+2. **Page resets**: Changing any filter resets page to 1
+3. **No client filtering**: All filtering must be handled by your backend
+4. **Actions/Custom columns**: Not filterable (no filter input rendered)
+
+**Clear Filters:**
+
+A "Clear all filters" button appears automatically when filters are active:
+
+```typescript
+// User applies filters
+// → "Clear all filters" button appears above table
+// → Click button → all filters cleared → page resets to 1
+```
+
 ### Actions
 
 The table provides built-in support for row actions with confirmation dialogs, loading states, and conditional disabling.

package/dist/index.cjs

@@ -11,7 +11,10 @@ function text(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function date(field, options) {
@@ -21,7 +24,10 @@ function date(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function boolean(field, options) {
@@ -31,7 +37,36 @@ function boolean(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
+  };
+}
+function badge(field, options) {
+  return {
+    id: field,
+    kind: "badge",
+    field,
+    header: options?.header,
+    sortable: options?.sortable ?? false,
+    map: options?.map,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
+  };
+}
+function number(field, options) {
+  return {
+    id: field,
+    kind: "number",
+    field,
+    header: options?.header,
+    sortable: options?.sortable ?? false,
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function actions(actions2) {
@@ -41,19 +76,32 @@ function actions(actions2) {
     actions: actions2
   };
 }
-function custom(options) {
+function custom(arg1, arg2) {
+  if (typeof arg1 === "string") {
+    if (typeof arg2 !== "function") {
+      throw new Error("col.custom(field, render): render must be a function");
+    }
+    return {
+      id: arg1,
+      kind: "custom",
+      field: arg1,
+      render: arg2
+    };
+  }
   return {
-    id: options.id,
+    id: arg1.id,
     kind: "custom",
-    header: options.header,
-    field: options.field,
-    render: options.render
+    header: arg1.header,
+    field: arg1.field,
+    render: arg1.render
   };
 }
 var col = {
   text,
   date,
   boolean,
+  badge,
+  number,
   actions,
   custom
 };
@@ -101,6 +149,25 @@ function renderCell(column, row, isLoading, setConfirmState) {
       }
       return value ? "Yes" : "No";
     }
+    case "badge": {
+      const value = row[column.field];
+      const valueStr = String(value ?? "");
+      const mapped = column.map?.[valueStr];
+      const label = mapped?.label ?? valueStr;
+      const tone = mapped?.tone ?? "neutral";
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rowakit-badge rowakit-badge-${tone}`, children: label });
+    }
+    case "number": {
+      const value = row[column.field];
+      const numValue = Number(value ?? 0);
+      if (column.format) {
+        if (typeof column.format === "function") {
+          return column.format(numValue, row);
+        }
+        return new Intl.NumberFormat(void 0, column.format).format(numValue);
+      }
+      return numValue.toLocaleString();
+    }
     case "actions": {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-actions", children: column.actions.map((action) => {
         const isDisabled = isLoading || action.disabled === true || typeof action.disabled === "function" && action.disabled(row);
@@ -145,7 +212,8 @@ function RowaKitTable({
   defaultPageSize = 20,
   pageSizeOptions = [10, 20, 50],
   rowKey,
-  className = ""
+  className = "",
+  enableFilters = false
 }) {
   const [dataState, setDataState] = react.useState({
     state: "idle",
@@ -156,8 +224,27 @@ function RowaKitTable({
     page: 1,
     pageSize: defaultPageSize
   });
+  const [filters, setFilters] = react.useState({});
   const [confirmState, setConfirmState] = react.useState(null);
   const requestIdRef = react.useRef(0);
+  react.useEffect(() => {
+    if (!enableFilters) return;
+    const activeFilters = {};
+    let hasFilters = false;
+    for (const [field, value] of Object.entries(filters)) {
+      if (value !== void 0) {
+        activeFilters[field] = value;
+        hasFilters = true;
+      }
+    }
+    const filtersToSend = hasFilters ? activeFilters : void 0;
+    setQuery((prev) => ({
+      ...prev,
+      filters: filtersToSend,
+      page: 1
+      // Reset page to 1 when filters change
+    }));
+  }, [filters, enableFilters]);
   react.useEffect(() => {
     const currentRequestId = ++requestIdRef.current;
     setDataState((prev) => ({ ...prev, state: "loading" }));
@@ -225,38 +312,190 @@ function RowaKitTable({
     }
     return query.sort.direction === "asc" ? " \u2191" : " \u2193";
   };
+  const handleFilterChange = (field, value) => {
+    setFilters((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+  const handleClearFilter = (field) => {
+    setFilters((prev) => {
+      const newFilters = { ...prev };
+      delete newFilters[field];
+      return newFilters;
+    });
+  };
+  const handleClearAllFilters = () => {
+    setFilters({});
+  };
   const isLoading = dataState.state === "loading";
   const isError = dataState.state === "error";
   const isEmpty = dataState.state === "empty";
   const totalPages = Math.ceil(dataState.total / query.pageSize);
   const canGoPrevious = query.page > 1 && !isLoading;
   const canGoNext = query.page < totalPages && !isLoading;
+  const hasActiveFilters = enableFilters && Object.values(filters).some((v) => v !== void 0);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+    hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-filter-controls", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleClearAllFilters,
+        className: "rowakit-button rowakit-button-secondary",
+        type: "button",
+        children: "Clear all filters"
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
-        const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
-        const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "th",
-          {
-            onClick: isSortable ? () => handleSort(String(field)) : void 0,
-            role: isSortable ? "button" : void 0,
-            tabIndex: isSortable ? 0 : void 0,
-            onKeyDown: isSortable ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleSort(String(field));
+      /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
+          const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
+          const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "th",
+            {
+              onClick: isSortable ? () => handleSort(String(field)) : void 0,
+              role: isSortable ? "button" : void 0,
+              tabIndex: isSortable ? 0 : void 0,
+              onKeyDown: isSortable ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSort(String(field));
+                }
+              } : void 0,
+              "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
+              style: {
+                width: column.width ? `${column.width}px` : void 0,
+                textAlign: column.align
+              },
+              className: column.truncate ? "rowakit-cell-truncate" : void 0,
+              children: [
+                getHeaderLabel(column),
+                isSortable && getSortIndicator(String(field))
+              ]
+            },
+            column.id
+          );
+        }) }),
+        enableFilters && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rowakit-table-filter-row", children: columns.map((column) => {
+          const field = column.kind === "actions" || column.kind === "custom" ? "" : String(column.field);
+          const canFilter = field && column.kind !== "actions";
+          if (!canFilter) {
+            return /* @__PURE__ */ jsxRuntime.jsx("th", {}, column.id);
+          }
+          const filterValue = filters[field];
+          if (column.kind === "badge") {
+            const options = column.map ? Object.keys(column.map) : [];
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                className: "rowakit-filter-select",
+                value: filterValue?.op === "equals" ? String(filterValue.value ?? "") : "",
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (value === "") {
+                    handleClearFilter(field);
+                  } else {
+                    handleFilterChange(field, { op: "equals", value });
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                  options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+                ]
               }
-            } : void 0,
-            "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
-            children: [
-              getHeaderLabel(column),
-              isSortable && getSortIndicator(String(field))
-            ]
-          },
-          column.id
-        );
-      }) }) }),
+            ) }, column.id);
+          }
+          if (column.kind === "boolean") {
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                className: "rowakit-filter-select",
+                value: filterValue?.op === "equals" && typeof filterValue.value === "boolean" ? String(filterValue.value) : "",
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (value === "") {
+                    handleClearFilter(field);
+                  } else {
+                    handleFilterChange(field, { op: "equals", value: value === "true" });
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "True" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "False" })
+                ]
+              }
+            ) }, column.id);
+          }
+          if (column.kind === "date") {
+            const fromValue = filterValue?.op === "range" ? filterValue.value.from ?? "" : "";
+            const toValue = filterValue?.op === "range" ? filterValue.value.to ?? "" : "";
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-date-range", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "date",
+                  className: "rowakit-filter-input",
+                  placeholder: "From",
+                  value: fromValue,
+                  onChange: (e) => {
+                    const from = e.target.value || void 0;
+                    const to = toValue || void 0;
+                    if (!from && !to) {
+                      handleClearFilter(field);
+                    } else {
+                      handleFilterChange(field, { op: "range", value: { from, to } });
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "date",
+                  className: "rowakit-filter-input",
+                  placeholder: "To",
+                  value: toValue,
+                  onChange: (e) => {
+                    const to = e.target.value || void 0;
+                    const from = fromValue || void 0;
+                    if (!from && !to) {
+                      handleClearFilter(field);
+                    } else {
+                      handleFilterChange(field, { op: "range", value: { from, to } });
+                    }
+                  }
+                }
+              )
+            ] }) }, column.id);
+          }
+          const isNumberColumn = column.kind === "number";
+          return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: isNumberColumn ? "number" : "text",
+              className: "rowakit-filter-input",
+              placeholder: `Filter ${getHeaderLabel(column)}...`,
+              value: filterValue?.op === "contains" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "string" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "",
+              onChange: (e) => {
+                const rawValue = e.target.value;
+                if (rawValue === "") {
+                  handleClearFilter(field);
+                } else if (isNumberColumn) {
+                  const numValue = Number(rawValue);
+                  if (!isNaN(numValue)) {
+                    handleFilterChange(field, { op: "equals", value: numValue });
+                  } else {
+                    handleClearFilter(field);
+                  }
+                } else {
+                  handleFilterChange(field, { op: "contains", value: rawValue });
+                }
+              }
+            }
+          ) }, column.id);
+        }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
         isLoading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: columns.length, className: "rowakit-table-loading", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-loading-spinner" }),
@@ -277,7 +516,24 @@ function RowaKitTable({
         isEmpty && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "rowakit-table-empty", children: "No data" }) }),
         dataState.state === "success" && dataState.items.map((row) => {
           const key = getRowKey(row, rowKey);
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: renderCell(column, row, isLoading, setConfirmState) }, column.id)) }, key);
+          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
+            const cellClass = [
+              column.kind === "number" ? "rowakit-cell-number" : "",
+              column.truncate ? "rowakit-cell-truncate" : ""
+            ].filter(Boolean).join(" ") || void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: cellClass,
+                style: {
+                  width: column.width ? `${column.width}px` : void 0,
+                  textAlign: column.align || (column.kind === "number" ? "right" : void 0)
+                },
+                children: renderCell(column, row, isLoading, setConfirmState)
+              },
+              column.id
+            );
+          }) }, key);
         })
       ] })
     ] }),