@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

package/dist/esm/components/resources/ResourceCollectionBody_Table.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ResourceCollectionBody_Table — the TABLE rendering of a resource collection.
+ *
+ * Presentational: it receives the already-fetched `items` plus the collection's
+ * sort/selection state + handlers from the host, derives columns from the
+ * resource's summary fields (schema-aware cells via {@link FieldValueRenderer}),
+ * and renders a TanStack table with sortable headers (server-side), a selection
+ * checkbox column, and a floating selected-count summary.
+ *
+ * Extracted from the former standalone `List_Table` preset so a single host can
+ * swap between this body and the cards body at runtime (the cards↔table toggle)
+ * without duplicating the data/fetch layer.
+ */
+import { useMemo } from 'react';
+import { useReactTable, getCoreRowModel, flexRender, } from '@tanstack/react-table';
+import { useI18n } from '../../core/i18n/useI18n.js';
+import { cn } from '../../core/ui/cn.js';
+import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
+import { StandardIconReference, IconSize } from '../../core/icons/icon-registry.frontend.schemas.js';
+import { useUI } from '../../core/ui/useUI.js';
+import { ButtonSize, FrontendComponentType, InteractiveVariant, UIBehavior } from '@wildo-ai/presets-components-models';
+import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
+import { CheckboxRoot } from '../../components/form/controls/boolean/checkbox.js';
+import { TableCell } from '../../components/sections/table.js';
+import { FieldValueRenderer } from '../../components/resources/ResourceListItemRenderer.js';
+import { AutomatedLayoutFrontendUtils } from '../../core/automated-layout/automated-layout.frontend.utils.js';
+import { ResourceInPlaceOperationRow } from '../../components/resources/ResourceInPlaceOperationRow.js';
+import { useInPlaceOperation } from '../../core/resources/in-place/InPlaceOperationContext.js';
+import { FrontendResourceUtils } from '../../core/resources/frontend-resource.utils.js';
+export const ResourceCollectionBody_Table = ({ items, resourceType, resourceConfig, navigationZone, summaryFields, fieldLabelsMap, sortFields, sortStates, onSortChange, selectable = false, isRowSelected, onToggleRow, allSelected = false, onToggleAll, renderRowActions, onRowClick, }) => {
+    const { tComponent, tResourceFieldEnumValue } = useI18n({
+        component: FrontendComponentType.RESOURCES_LAYOUTS_LIST,
+        resource: resourceType,
+    });
+    const { renderIcon } = useIconRegistry();
+    const inPlaceHost = useInPlaceOperation();
+    const { getRecipe } = useUI();
+    const interactiveRecipe = getRecipe(UIBehavior.INTERACTIVE, InteractiveVariant.GHOST);
+    const schemaShape = useMemo(() => {
+        const mainSchema = resourceConfig?.mainSchema;
+        // Polymorphic resources feed a discriminated-union schema; resolve the union-aware field shape (else getObjectShape returns null for the union → no field labels).
+        return mainSchema ? (AutomatedLayoutFrontendUtils.getObjectLikeFieldShape(mainSchema, { commonOnly: false }) ?? null) : null;
+    }, [resourceConfig]);
+    const sortableFieldsSet = useMemo(() => new Set(sortFields), [sortFields]);
+    const columns = useMemo(() => {
+        const cols = [];
+        // Select column — only when the view is selectable. Item-based (the host's
+        // shared selection), not TanStack's internal row-selection model.
+        if (selectable) {
+            cols.push({
+                id: '__select',
+                header: () => (_jsx(CheckboxRoot, { checked: allSelected, onCheckedChange: () => onToggleAll?.(), "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectAll') })),
+                cell: ({ row }) => (_jsx(CheckboxRoot, { checked: isRowSelected?.(row.original) ?? false, onCheckedChange: () => onToggleRow?.(row.original), "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectRow', { row: row.index + 1 }) })),
+                size: 40,
+                enableSorting: false,
+            });
+        }
+        for (const fieldName of summaryFields) {
+            const fieldSchema = schemaShape?.[fieldName];
+            const isSortable = sortableFieldsSet.has(fieldName);
+            const label = fieldLabelsMap[fieldName] || fieldName;
+            cols.push({
+                id: fieldName,
+                accessorFn: (row) => row[fieldName],
+                header: () => {
+                    if (!isSortable)
+                        return _jsx("span", { children: label });
+                    const ruleIndex = sortStates.findIndex((s) => s.field === fieldName);
+                    const isActiveSort = ruleIndex >= 0;
+                    const direction = isActiveSort ? sortStates[ruleIndex].direction : null;
+                    return (_jsxs(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, className: "inline-flex items-center gap-1 text-start -ms-2 h-auto py-0.5 px-2 font-medium", onClick: () => {
+                            // Cycle THIS column within the multi-sort, keeping the other rules
+                            // (priority = order added). Owned by the host (also resets page):
+                            // unsorted → append asc → desc → removed.
+                            if (ruleIndex < 0) {
+                                onSortChange([...sortStates, { field: fieldName, direction: 'asc' }]);
+                            }
+                            else if (sortStates[ruleIndex].direction === 'asc') {
+                                onSortChange(sortStates.map((s, i) => (i === ruleIndex ? { ...s, direction: 'desc' } : s)));
+                            }
+                            else {
+                                onSortChange(sortStates.filter((_, i) => i !== ruleIndex));
+                            }
+                        }, children: [label, isActiveSort && (_jsxs("span", { className: "inline-flex items-center gap-0.5 text-muted-foreground", "aria-hidden": "true", children: [renderIcon(direction === 'asc' ? StandardIconReference.CHEVRON_UP : StandardIconReference.CHEVRON_DOWN, { size: IconSize.XS }), sortStates.length > 1 && (_jsx("span", { className: "text-[10px] font-semibold tabular-nums", children: ruleIndex + 1 }))] }))] }));
+                },
+                cell: ({ row }) => (_jsx(FieldValueRenderer, { value: row.original[fieldName], fieldSchema: fieldSchema, fieldLabel: undefined, resourceType: resourceType, fieldName: fieldName, tResourceFieldEnumValue: tResourceFieldEnumValue })),
+            });
+        }
+        // Trailing per-row actions column (at the END of the row). Right-aligned,
+        // non-sortable, header label sr-only. The host supplies the same operations
+        // bar the cards use via `renderRowActions`.
+        if (renderRowActions) {
+            cols.push({
+                id: '__actions',
+                header: () => (_jsx("span", { className: "sr-only", children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'actionsColumn') })),
+                cell: ({ row }) => (_jsx("div", { className: "flex justify-end", children: renderRowActions(row.original) })),
+                enableSorting: false,
+            });
+        }
+        return cols;
+    }, [selectable, allSelected, onToggleAll, isRowSelected, onToggleRow, renderRowActions, summaryFields, schemaShape, sortableFieldsSet, fieldLabelsMap, sortStates, onSortChange, resourceType, tResourceFieldEnumValue, tComponent, renderIcon]);
+    const table = useReactTable({
+        data: items,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        // Stable row id: resource id when present, else the row index (NOT a random
+        // value — a fresh id per render would break keys + force re-renders).
+        getRowId: (row, index) => String(row.id ?? row._id ?? index),
+        // Sorting is server-side (the host re-fetches on sort change).
+        manualSorting: true,
+    });
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "rounded-lg border border-border overflow-hidden", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'listLabel'), children: [_jsx("thead", { className: "bg-muted/50 border-b border-border", children: table.getHeaderGroups().map(headerGroup => (_jsx("tr", { children: headerGroup.headers.map(header => (_jsx("th", { className: "px-card-sm py-element-sm text-start text-xs font-medium text-muted-foreground uppercase tracking-wider", style: { width: header.getSize() !== 150 ? header.getSize() : undefined }, children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { className: "divide-y divide-border", children: table.getRowModel().rows.map(row => {
+                                // A row being TRANSFORMED by an INLINE action replaces its cells with the operation
+                                // body, spanning the full width, and every other row stays exactly where it is.
+                                //
+                                // This is the SIBLING of the cards-mode swap in `ResourceLayout_List`, and it exists
+                                // because the two bodies are two call sites of one invariant: a view that offers a
+                                // cards↔table toggle would otherwise transform the row in one mode and open an
+                                // overlay in the other, from the same button.
+                                const rowId = FrontendResourceUtils.getResourceObjectId(row.original, resourceConfig.resourceFieldIdentifier);
+                                if (inPlaceHost.isElementActive(rowId)) {
+                                    return (_jsx("tr", { role: "row", children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0", children: _jsx(ResourceInPlaceOperationRow, { navigationZone: navigationZone }) }) }, row.id));
+                                }
+                                return (_jsx("tr", { className: cn(interactiveRecipe.states.hover || 'hover:bg-muted/30', 'transition-colors motion-reduce:transition-none cursor-pointer', isRowSelected?.(row.original) && 'bg-primary/5'), onClick: () => onRowClick(row.original), role: "row", "aria-selected": selectable ? (isRowSelected?.(row.original) ?? false) : undefined, tabIndex: 0, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            onRowClick(row.original);
+                                        }
+                                    }, children: row.getVisibleCells().map(cell => {
+                                        // Control columns (select checkbox, per-row actions) never
+                                        // truncate and stop BOTH click and keydown propagation so
+                                        // their controls (mouse OR keyboard) don't also trigger the
+                                        // row's navigation (the <tr> has an Enter/Space onKeyDown).
+                                        const isControlColumn = cell.column.id === '__select' || cell.column.id === '__actions';
+                                        return (_jsx(TableCell, { className: "px-card-sm py-element-sm text-foreground", truncate: !isControlColumn, onClick: isControlColumn ? (e) => e.stopPropagation() : undefined, onKeyDown: isControlColumn ? (e) => e.stopPropagation() : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                    }) }, row.id));
+                            }) })] }) }) }) }));
+};
+//# sourceMappingURL=ResourceCollectionBody_Table.js.map

package/dist/esm/components/resources/ResourceCollectionBody_Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCollectionBody_Table.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionBody_Table.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionBody_Table — the TABLE rendering of a resource collection.\n *\n * Presentational: it receives the already-fetched `items` plus the collection's\n * sort/selection state + handlers from the host, derives columns from the\n * resource's summary fields (schema-aware cells via {@link FieldValueRenderer}),\n * and renders a TanStack table with sortable headers (server-side), a selection\n * checkbox column, and a floating selected-count summary.\n *\n * Extracted from the former standalone `List_Table` preset so a single host can\n * swap between this body and the cards body at runtime (the cards↔table toggle)\n * without duplicating the data/fetch layer.\n */\n\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n} from '@tanstack/react-table';\nimport { z } from 'zod';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { ButtonSize, FrontendComponentType, InteractiveVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { CheckboxRoot } from '~wildo-frontend-lib/components/form/controls/boolean/checkbox';\nimport { TableCell } from '~wildo-frontend-lib/components/sections/table';\nimport { FieldValueRenderer } from '~wildo-frontend-lib/components/resources/ResourceListItemRenderer';\nimport { AutomatedLayoutFrontendUtils } from '~wildo-frontend-lib/core/automated-layout/automated-layout.frontend.utils';\nimport type { AnyFrontendResourceConfiguration } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\nimport type { SortState } from '~wildo-frontend-lib/components/resources/ResourceLayout_SortControl';\nimport { ResourceInPlaceOperationRow } from '~wildo-frontend-lib/components/resources/ResourceInPlaceOperationRow';\nimport { useInPlaceOperation } from '~wildo-frontend-lib/core/resources/in-place/InPlaceOperationContext';\nimport { FrontendResourceUtils } from '~wildo-frontend-lib/core/resources/frontend-resource.utils';\nimport type { NavigationZone } from '~wildo-frontend-lib/core/navigation/navigation.schemas';\n\ntype TableItem = Record<string, any>;\n\nexport interface ResourceCollectionBody_TableProps {\n  /** The fetched items to render as rows. */\n  items: TableItem[];\n  /** Resource type for i18n + cell formatting. */\n  resourceType: string;\n  /** Resource configuration — provides the main schema for column type detection. */\n  resourceConfig: AnyFrontendResourceConfiguration;\n  /**\n   * The zone this table is rendered in — forwarded to the in-place operation body so a transformed\n   * row hosts its operation in the same zone as every other host on this surface.\n   */\n  navigationZone: NavigationZone;\n  /** Ordered summary fields → one column each. */\n  summaryFields: string[];\n  /** Pre-resolved i18n field labels (column headers). */\n  fieldLabelsMap: Record<string, string>;\n  /** Sortable field names (sortable column headers). */\n  sortFields: readonly string[];\n  /** Active sort rules, highest priority first (drives the header indicators). */\n  sortStates: readonly SortState[];\n  /** Sort change handler (owned by the host; also resets pagination). */\n  onSortChange: (sorts: SortState[]) => void;\n  /**\n   * Item-based selection, driven by the host's shared selection model (the SAME\n   * model the CARDS checkboxes use, so a selection survives the cards↔table\n   * toggle and feeds the bulk bar). When `selectable` is false the select column\n   * is omitted entirely.\n   */\n  selectable?: boolean;\n  /** Whether a given row's item is currently selected. */\n  isRowSelected?: (item: TableItem) => boolean;\n  /** Toggle a single row's item selection. */\n  onToggleRow?: (item: TableItem) => void;\n  /** Whether EVERY current-page item is selected (header checkbox state). */\n  allSelected?: boolean;\n  /** Toggle selection of every current-page item (header checkbox). */\n  onToggleAll?: () => void;\n  /**\n   * Per-row actions rendered in a trailing column at the END of each row (parity\n   * with the cards' per-item operations). Omit to render no actions column.\n   */\n  renderRowActions?: (item: TableItem) => React.ReactNode;\n  /** Row click handler — navigates to the item's READ view. */\n  onRowClick: (item: TableItem) => void;\n}\n\nexport const ResourceCollectionBody_Table = ({\n  items,\n  resourceType,\n  resourceConfig,\n  navigationZone,\n  summaryFields,\n  fieldLabelsMap,\n  sortFields,\n  sortStates,\n  onSortChange,\n  selectable = false,\n  isRowSelected,\n  onToggleRow,\n  allSelected = false,\n  onToggleAll,\n  renderRowActions,\n  onRowClick,\n}: ResourceCollectionBody_TableProps): React.JSX.Element => {\n  const { tComponent, tResourceFieldEnumValue } = useI18n({\n    component: FrontendComponentType.RESOURCES_LAYOUTS_LIST,\n    resource: resourceType,\n  });\n  const { renderIcon } = useIconRegistry();\n  const inPlaceHost = useInPlaceOperation();\n  const { getRecipe } = useUI();\n  const interactiveRecipe = getRecipe(UIBehavior.INTERACTIVE, InteractiveVariant.GHOST);\n\n  const schemaShape = useMemo(() => {\n    const mainSchema = resourceConfig?.mainSchema;\n    // Polymorphic resources feed a discriminated-union schema; resolve the union-aware field shape (else getObjectShape returns null for the union → no field labels).\n    return mainSchema ? (AutomatedLayoutFrontendUtils.getObjectLikeFieldShape(mainSchema, { commonOnly: false }) ?? null) : null;\n  }, [resourceConfig]);\n\n  const sortableFieldsSet = useMemo(() => new Set(sortFields), [sortFields]);\n\n  const columns = useMemo<ColumnDef<TableItem>[]>(() => {\n    const cols: ColumnDef<TableItem>[] = [];\n\n    // Select column — only when the view is selectable. Item-based (the host's\n    // shared selection), not TanStack's internal row-selection model.\n    if (selectable) {\n      cols.push({\n        id: '__select',\n        header: () => (\n          <CheckboxRoot\n            checked={allSelected}\n            onCheckedChange={() => onToggleAll?.()}\n            aria-label={tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectAll')}\n          />\n        ),\n        cell: ({ row }) => (\n          <CheckboxRoot\n            checked={isRowSelected?.(row.original) ?? false}\n            onCheckedChange={() => onToggleRow?.(row.original)}\n            aria-label={tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'selectRow', { row: row.index + 1 })}\n          />\n        ),\n        size: 40,\n        enableSorting: false,\n      });\n    }\n\n    for (const fieldName of summaryFields) {\n      const fieldSchema = schemaShape?.[fieldName] as z.ZodTypeAny | undefined;\n      const isSortable = sortableFieldsSet.has(fieldName);\n      const label = fieldLabelsMap[fieldName] || fieldName;\n\n      cols.push({\n        id: fieldName,\n        accessorFn: (row) => row[fieldName],\n        header: () => {\n          if (!isSortable) return <span>{label}</span>;\n\n          const ruleIndex = sortStates.findIndex((s) => s.field === fieldName);\n          const isActiveSort = ruleIndex >= 0;\n          const direction = isActiveSort ? sortStates[ruleIndex].direction : null;\n\n          return (\n            <Button\n              type=\"button\"\n              variant={ButtonVariants_Variant.GHOST}\n              size={ButtonSize.SM}\n              className=\"inline-flex items-center gap-1 text-start -ms-2 h-auto py-0.5 px-2 font-medium\"\n              onClick={() => {\n                // Cycle THIS column within the multi-sort, keeping the other rules\n                // (priority = order added). Owned by the host (also resets page):\n                // unsorted → append asc → desc → removed.\n                if (ruleIndex < 0) {\n                  onSortChange([...sortStates, { field: fieldName, direction: 'asc' }]);\n                } else if (sortStates[ruleIndex].direction === 'asc') {\n                  onSortChange(sortStates.map((s, i) => (i === ruleIndex ? { ...s, direction: 'desc' } : s)));\n                } else {\n                  onSortChange(sortStates.filter((_, i) => i !== ruleIndex));\n                }\n              }}\n            >\n              {label}\n              {isActiveSort && (\n                <span className=\"inline-flex items-center gap-0.5 text-muted-foreground\" aria-hidden=\"true\">\n                  {renderIcon(\n                    direction === 'asc' ? StandardIconReference.CHEVRON_UP : StandardIconReference.CHEVRON_DOWN,\n                    { size: IconSize.XS },\n                  )}\n                  {sortStates.length > 1 && (\n                    <span className=\"text-[10px] font-semibold tabular-nums\">{ruleIndex + 1}</span>\n                  )}\n                </span>\n              )}\n            </Button>\n          );\n        },\n        cell: ({ row }) => (\n          <FieldValueRenderer\n            value={row.original[fieldName]}\n            fieldSchema={fieldSchema}\n            fieldLabel={undefined}\n            resourceType={resourceType}\n            fieldName={fieldName}\n            tResourceFieldEnumValue={tResourceFieldEnumValue}\n          />\n        ),\n      });\n    }\n\n    // Trailing per-row actions column (at the END of the row). Right-aligned,\n    // non-sortable, header label sr-only. The host supplies the same operations\n    // bar the cards use via `renderRowActions`.\n    if (renderRowActions) {\n      cols.push({\n        id: '__actions',\n        header: () => (\n          <span className=\"sr-only\">{tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'actionsColumn')}</span>\n        ),\n        cell: ({ row }) => (\n          <div className=\"flex justify-end\">{renderRowActions(row.original)}</div>\n        ),\n        enableSorting: false,\n      });\n    }\n\n    return cols;\n  }, [selectable, allSelected, onToggleAll, isRowSelected, onToggleRow, renderRowActions, summaryFields, schemaShape, sortableFieldsSet, fieldLabelsMap, sortStates, onSortChange, resourceType, tResourceFieldEnumValue, tComponent, renderIcon]);\n\n  const table = useReactTable({\n    data: items,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    // Stable row id: resource id when present, else the row index (NOT a random\n    // value — a fresh id per render would break keys + force re-renders).\n    getRowId: (row, index) => String(row.id ?? row._id ?? index),\n    // Sorting is server-side (the host re-fetches on sort change).\n    manualSorting: true,\n  });\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border overflow-hidden\">\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full text-sm\" aria-label={tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'listLabel')}>\n            <thead className=\"bg-muted/50 border-b border-border\">\n              {table.getHeaderGroups().map(headerGroup => (\n                <tr key={headerGroup.id}>\n                  {headerGroup.headers.map(header => (\n                    <th\n                      key={header.id}\n                      className=\"px-card-sm py-element-sm text-start text-xs font-medium text-muted-foreground uppercase tracking-wider\"\n                      style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}\n                    >\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(header.column.columnDef.header, header.getContext())}\n                    </th>\n                  ))}\n                </tr>\n              ))}\n            </thead>\n            <tbody className=\"divide-y divide-border\">\n              {table.getRowModel().rows.map(row => {\n                // A row being TRANSFORMED by an INLINE action replaces its cells with the operation\n                // body, spanning the full width, and every other row stays exactly where it is.\n                //\n                // This is the SIBLING of the cards-mode swap in `ResourceLayout_List`, and it exists\n                // because the two bodies are two call sites of one invariant: a view that offers a\n                // cards↔table toggle would otherwise transform the row in one mode and open an\n                // overlay in the other, from the same button.\n                const rowId = FrontendResourceUtils.getResourceObjectId(\n                  row.original,\n                  resourceConfig.resourceFieldIdentifier as string,\n                );\n                if (inPlaceHost.isElementActive(rowId)) {\n                  return (\n                    <tr key={row.id} role=\"row\">\n                      <td colSpan={row.getVisibleCells().length} className=\"p-0\">\n                        <ResourceInPlaceOperationRow navigationZone={navigationZone} />\n                      </td>\n                    </tr>\n                  );\n                }\n\n                return (\n                <tr\n                  key={row.id}\n                  className={cn(\n                    interactiveRecipe.states.hover || 'hover:bg-muted/30',\n                    'transition-colors motion-reduce:transition-none cursor-pointer',\n                    isRowSelected?.(row.original) && 'bg-primary/5',\n                  )}\n                  onClick={() => onRowClick(row.original)}\n                  role=\"row\"\n                  aria-selected={selectable ? (isRowSelected?.(row.original) ?? false) : undefined}\n                  tabIndex={0}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      onRowClick(row.original);\n                    }\n                  }}\n                >\n                  {row.getVisibleCells().map(cell => {\n                    // Control columns (select checkbox, per-row actions) never\n                    // truncate and stop BOTH click and keydown propagation so\n                    // their controls (mouse OR keyboard) don't also trigger the\n                    // row's navigation (the <tr> has an Enter/Space onKeyDown).\n                    const isControlColumn = cell.column.id === '__select' || cell.column.id === '__actions';\n                    return (\n                      <TableCell\n                        key={cell.id}\n                        className=\"px-card-sm py-element-sm text-foreground\"\n                        truncate={!isControlColumn}\n                        onClick={isControlColumn ? (e) => e.stopPropagation() : undefined}\n                        onKeyDown={isControlColumn ? (e) => e.stopPropagation() : undefined}\n                      >\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </TableCell>\n                    );\n                  })}\n                </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </>\n  );\n};\n"]}

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to a
+ * prominent tab strip above the collection toolbar ("All · Delivered · Failed"
+ * — the Stripe/Ignisign webhook-dashboard idiom).
+ *
+ * This is a *presentation* of the collection's existing filter state, not a
+ * second filtering mechanism: the host wires `value`/`onChange` into the SAME
+ * `FilterValues` record the filters panel writes, and removes the promoted
+ * field from the panel/chips so exactly one control owns it. Selecting a tab
+ * therefore filters server-side, exactly like the panel select it replaces.
+ *
+ * Authored via `collectionDisplayConfig.quickFilterField` on the LIST/SEARCH
+ * operation's ui-behavior view config (see
+ * `ResourceOperationFrontendConfigSchema`). Reusable by any enum-status
+ * collection: webhook deliveries, SIEM DLQ, invitations, …
+ *
+ * Composition: the registered `Tabs` compound (LOW_LEVEL_TABS slot) in
+ * horizontal orientation — value-controlled, no `TabsContent` (the "content"
+ * is the collection body below, which re-fetches on filter change). The "All"
+ * tab reuses the filters vocabulary's `enumAll` label; per-value labels come
+ * from the enum value i18n (`tResourceFieldEnumValue`), the same source the
+ * filters panel uses — the two controls can never drift.
+ */
+import React from 'react';
+import type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';
+export interface ResourceCollectionQuickFilterTabsProps {
+    /** Resource type for i18n label resolution. */
+    resourceType: string;
+    /** The promoted enum filter field (must carry `enumValues`). */
+    field: FilterFieldDefinition;
+    /** Current filter value for the field — `undefined` selects the "All" tab. */
+    value: string | undefined;
+    /** Set (or clear, with `undefined`) the field's filter value. */
+    onChange: (value: string | undefined) => void;
+    className?: string;
+}
+export declare const ResourceCollectionQuickFilterTabs: ({ resourceType, field, value, onChange, className, }: ResourceCollectionQuickFilterTabsProps) => React.JSX.Element | null;
+//# sourceMappingURL=ResourceCollectionQuickFilterTabs.d.ts.map

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCollectionQuickFilterTabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAS7E,MAAM,WAAW,sCAAsC;IACrD,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,KAAK,EAAE,qBAAqB,CAAC;IAC7B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,GAAI,sDAM/C,sCAAsC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAwC/D,CAAC"}

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to a
+ * prominent tab strip above the collection toolbar ("All · Delivered · Failed"
+ * — the Stripe/Ignisign webhook-dashboard idiom).
+ *
+ * This is a *presentation* of the collection's existing filter state, not a
+ * second filtering mechanism: the host wires `value`/`onChange` into the SAME
+ * `FilterValues` record the filters panel writes, and removes the promoted
+ * field from the panel/chips so exactly one control owns it. Selecting a tab
+ * therefore filters server-side, exactly like the panel select it replaces.
+ *
+ * Authored via `collectionDisplayConfig.quickFilterField` on the LIST/SEARCH
+ * operation's ui-behavior view config (see
+ * `ResourceOperationFrontendConfigSchema`). Reusable by any enum-status
+ * collection: webhook deliveries, SIEM DLQ, invitations, …
+ *
+ * Composition: the registered `Tabs` compound (LOW_LEVEL_TABS slot) in
+ * horizontal orientation — value-controlled, no `TabsContent` (the "content"
+ * is the collection body below, which re-fetches on filter change). The "All"
+ * tab reuses the filters vocabulary's `enumAll` label; per-value labels come
+ * from the enum value i18n (`tResourceFieldEnumValue`), the same source the
+ * filters panel uses — the two controls can never drift.
+ */
+import { useCallback } from 'react';
+import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { cn } from '../../core/ui/cn.js';
+import { useI18n } from '../../core/i18n/useI18n.js';
+import { Tabs, TabsList, TabsTrigger } from '../../components/sections/tabs.js';
+/**
+ * Sentinel tab value for the unset ("All") state. Enum member values are
+ * author-owned strings, so the sentinel is namespaced to avoid ever colliding
+ * with a real member.
+ */
+const ALL_TAB_VALUE = '__wildo-quick-filter-all__';
+export const ResourceCollectionQuickFilterTabs = ({ resourceType, field, value, onChange, className, }) => {
+    const { tComponent, tResourceFieldDisplay, tResourceFieldEnumValue } = useI18n({
+        component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS,
+    });
+    const handleValueChange = useCallback((next) => {
+        onChange(next === ALL_TAB_VALUE ? undefined : next);
+    }, [onChange]);
+    const enumValues = field.enumValues ?? [];
+    // Degrade gracefully on a misauthored promotion (non-enum / empty enum):
+    // render nothing — the field stays available in the regular filters panel.
+    if (enumValues.length === 0)
+        return null;
+    const fieldLabel = tResourceFieldDisplay(resourceType, field.fieldName, 'label');
+    return (_jsx(Tabs, { value: value ?? ALL_TAB_VALUE, onValueChange: handleValueChange, className: cn('w-full', className), "data-slot": "collection-quick-filter", children: _jsxs(TabsList, { "aria-label": tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel }), children: [_jsx(TabsTrigger, { value: ALL_TAB_VALUE, children: tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll') }), enumValues.map((enumValue) => (_jsx(TabsTrigger, { value: enumValue, children: tResourceFieldEnumValue(resourceType, field.fieldName, enumValue) }, enumValue)))] }) }));
+};
+//# sourceMappingURL=ResourceCollectionQuickFilterTabs.js.map

package/dist/esm/components/resources/ResourceCollectionQuickFilterTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCollectionQuickFilterTabs.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionQuickFilterTabs.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAG3F;;;;GAIG;AACH,MAAM,aAAa,GAAG,4BAA4B,CAAC;AAcnD,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,EAChD,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GAC8B,EAA4B,EAAE;IACrE,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,GAAG,OAAO,CAAC;QAC7E,SAAS,EAAE,qBAAqB,CAAC,yBAAyB;KAC3D,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,IAAY,EAAE,EAAE;QACf,QAAQ,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC;IAC1C,yEAAyE;IACzE,2EAA2E;IAC3E,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,MAAM,UAAU,GAAG,qBAAqB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAEjF,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE,KAAK,IAAI,aAAa,EAC7B,aAAa,EAAE,iBAAiB,EAChC,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,eACxB,yBAAyB,YAEnC,MAAC,QAAQ,kBACK,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,aAElH,KAAC,WAAW,IAAC,KAAK,EAAE,aAAa,YAC9B,UAAU,CAAC,qBAAqB,CAAC,yBAAyB,EAAE,SAAS,CAAC,GAC3D,EACb,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC7B,KAAC,WAAW,IAAiB,KAAK,EAAE,SAAS,YAC1C,uBAAuB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,IADlD,SAAS,CAEb,CACf,CAAC,IACO,GACN,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * ResourceCollectionQuickFilterTabs — promotes ONE enum filter field to a\n * prominent tab strip above the collection toolbar (\"All · Delivered · Failed\"\n * — the Stripe/Ignisign webhook-dashboard idiom).\n *\n * This is a *presentation* of the collection's existing filter state, not a\n * second filtering mechanism: the host wires `value`/`onChange` into the SAME\n * `FilterValues` record the filters panel writes, and removes the promoted\n * field from the panel/chips so exactly one control owns it. Selecting a tab\n * therefore filters server-side, exactly like the panel select it replaces.\n *\n * Authored via `collectionDisplayConfig.quickFilterField` on the LIST/SEARCH\n * operation's ui-behavior view config (see\n * `ResourceOperationFrontendConfigSchema`). Reusable by any enum-status\n * collection: webhook deliveries, SIEM DLQ, invitations, …\n *\n * Composition: the registered `Tabs` compound (LOW_LEVEL_TABS slot) in\n * horizontal orientation — value-controlled, no `TabsContent` (the \"content\"\n * is the collection body below, which re-fetches on filter change). The \"All\"\n * tab reuses the filters vocabulary's `enumAll` label; per-value labels come\n * from the enum value i18n (`tResourceFieldEnumValue`), the same source the\n * filters panel uses — the two controls can never drift.\n */\n\nimport React, { useCallback } from 'react';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { Tabs, TabsList, TabsTrigger } from '~wildo-frontend-lib/components/sections/tabs';\nimport type { FilterFieldDefinition } from './ResourceLayout_FiltersControl';\n\n/**\n * Sentinel tab value for the unset (\"All\") state. Enum member values are\n * author-owned strings, so the sentinel is namespaced to avoid ever colliding\n * with a real member.\n */\nconst ALL_TAB_VALUE = '__wildo-quick-filter-all__';\n\nexport interface ResourceCollectionQuickFilterTabsProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /** The promoted enum filter field (must carry `enumValues`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` selects the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the field's filter value. */\n  onChange: (value: string | undefined) => void;\n  className?: string;\n}\n\nexport const ResourceCollectionQuickFilterTabs = ({\n  resourceType,\n  field,\n  value,\n  onChange,\n  className,\n}: ResourceCollectionQuickFilterTabsProps): React.JSX.Element | null => {\n  const { tComponent, tResourceFieldDisplay, tResourceFieldEnumValue } = useI18n({\n    component: FrontendComponentType.RESOURCES_LAYOUTS_FILTERS,\n  });\n\n  const handleValueChange = useCallback(\n    (next: string) => {\n      onChange(next === ALL_TAB_VALUE ? undefined : next);\n    },\n    [onChange],\n  );\n\n  const enumValues = field.enumValues ?? [];\n  // Degrade gracefully on a misauthored promotion (non-enum / empty enum):\n  // render nothing — the field stays available in the regular filters panel.\n  if (enumValues.length === 0) return null;\n\n  const fieldLabel = tResourceFieldDisplay(resourceType, field.fieldName, 'label');\n\n  return (\n    <Tabs\n      value={value ?? ALL_TAB_VALUE}\n      onValueChange={handleValueChange}\n      className={cn('w-full', className)}\n      data-slot=\"collection-quick-filter\"\n    >\n      <TabsList\n        aria-label={tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'quickFilterLabel', { field: fieldLabel })}\n      >\n        <TabsTrigger value={ALL_TAB_VALUE}>\n          {tComponent(FrontendComponentType.RESOURCES_LAYOUTS_FILTERS, 'enumAll')}\n        </TabsTrigger>\n        {enumValues.map((enumValue) => (\n          <TabsTrigger key={enumValue} value={enumValue}>\n            {tResourceFieldEnumValue(resourceType, field.fieldName, enumValue)}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n    </Tabs>\n  );\n};\n"]}

package/dist/esm/components/resources/ResourceCollectionToolbar.d.ts

@@ -0,0 +1,116 @@
+/**
+ * ResourceCollectionToolbar — the shared, zoned control region for every resource
+ * collection view (LIST cards, LIST table, SEARCH).
+ *
+ * Layout (a single responsive flex row + stacked sub-rows):
+ *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]
+ *   [ filters panel (when expanded, full-width) ]
+ *   [ active filter chips ]
+ *
+ * "Refine" controls (search/filters/sort) cluster at the leading edge — search is
+ * always first; "view + act" controls (view-mode toggle, Create) cluster at the
+ * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media
+ * queries.
+ *
+ * The search is an expand-on-focus field: collapsed it reads as a search icon
+ * (icon-width), and it animates open to a full field when focused — the width
+ * transition is driven by the theme motion tokens (`--motion-duration-*` /
+ * `--motion-easing-*`) and respects `prefers-reduced-motion`, so any theme retunes
+ * the speed/curve. Filters and sort sit beside it as compact icon controls.
+ *
+ * The total item count is intentionally NOT shown here — the pagination footer
+ * owns the total ("Showing X–Y of Z") to keep a single source of truth.
+ *
+ * Presentational + slot-based: it owns only its own ephemeral UI state (search
+ * expand, filters-panel expand). All data/state/handlers are supplied by the
+ * collection host, so the same toolbar serves cards, table, and search.
+ */
+import React from 'react';
+import { type FilterFieldDefinition, type FilterValues } from './ResourceLayout_FiltersControl';
+import { type SortState } from './ResourceLayout_SortControl';
+import { CollectionDisplayMode } from '../../core/resources/resources.frontend.schemas';
+export interface ResourceCollectionToolbarSearch {
+    query: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClear: () => void;
+}
+export interface ResourceCollectionToolbarSort {
+    sortFields: readonly string[];
+    /** Active sort rules, highest priority first (empty = no sorting). */
+    sortStates: readonly SortState[];
+    onSortChange: (sorts: SortState[]) => void;
+}
+export interface ResourceCollectionToolbarViewMode {
+    viewMode: CollectionDisplayMode;
+    onViewModeChange: (mode: CollectionDisplayMode) => void;
+}
+export interface ResourceCollectionToolbarSelection {
+    /** Number of currently-selected items. */
+    count: number;
+    /** Whether every current-page item is selected (header select-all state). */
+    allSelected: boolean;
+    /** Toggle selection of every current-page item. */
+    onToggleAll: () => void;
+    /** Clear the whole selection. */
+    onClear: () => void;
+}
+export interface ResourceCollectionToolbarQuickFilter {
+    /** The promoted enum filter field (see `collectionDisplayConfig.quickFilterField`). */
+    field: FilterFieldDefinition;
+    /** Current filter value for the field — `undefined` = the "All" tab. */
+    value: string | undefined;
+    /** Set (or clear, with `undefined`) the promoted field's filter value. */
+    onChange: (value: string | undefined) => void;
+}
+export interface ResourceCollectionToolbarProps {
+    /** Resource type for i18n label resolution. */
+    resourceType: string;
+    /**
+     * Quick-filter tab strip ("All · <value> · …") rendered above the toolbar
+     * row — a promoted enum filter that shares the collection's filter state.
+     * The host must EXCLUDE the promoted field from `filterFields` so the panel
+     * and the tabs never render competing controls for the same field.
+     */
+    quickFilter?: ResourceCollectionToolbarQuickFilter;
+    /** Inline search state — omit to hide the search affordance entirely. */
+    search?: ResourceCollectionToolbarSearch;
+    /** Filter fields + state. Trigger/panel/chips are hidden when there are none. */
+    filterFields: readonly FilterFieldDefinition[];
+    filterValues: FilterValues;
+    onFiltersChange: (filters: FilterValues) => void;
+    /**
+     * Sort state — omit to hide the toolbar sort control (e.g. TABLE mode, where
+     * sorting lives in the column headers).
+     */
+    sort?: ResourceCollectionToolbarSort;
+    /** View-mode toggle — omit when only one display is available. */
+    viewMode?: ResourceCollectionToolbarViewMode;
+    /** Primary action node (e.g. the Create button), placed at the trailing edge. */
+    primaryAction?: React.ReactNode;
+    /**
+     * Selection state — omit for non-selectable collections. When present, a
+     * select-all + "N selected" + clear cluster renders in the leading (refine)
+     * zone beside search/filter/sort.
+     */
+    selection?: ResourceCollectionToolbarSelection;
+    /**
+     * Bulk-action node (the contextual bulk `ActionBar`). When a selection is
+     * active (`selection.count > 0`), this REPLACES `primaryAction` in the
+     * trailing zone; Create returns when the selection clears. Local to this
+     * collection — there is no global/floating bulk bar.
+     */
+    bulkActions?: React.ReactNode;
+    /**
+     * Collection-scoped action node (e.g. the `ResourceLayout_CollectionActions`
+     * bar for whole-scope "retry all" / "purge all"). Rendered in the trailing zone
+     * alongside the primary/bulk action. Unlike bulk (which contextually REPLACES
+     * the primary action during a selection), collection actions target the whole
+     * scope and stay visible regardless of selection. Omit when the resource has no
+     * collection-scoped operations.
+     */
+    collectionActions?: React.ReactNode;
+    /** Additional CSS classes for the toolbar region. */
+    className?: string;
+}
+export declare const ResourceCollectionToolbar: ({ resourceType, quickFilter, search, filterFields, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, bulkActions, collectionActions, className, }: ResourceCollectionToolbarProps) => React.JSX.Element;
+//# sourceMappingURL=ResourceCollectionToolbar.d.ts.map

package/dist/esm/components/resources/ResourceCollectionToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCollectionToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAC;AAUtG,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,sEAAsE;IACtE,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IACjC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,iCAAiC;IAChD,QAAQ,EAAE,qBAAqB,CAAC;IAChC,gBAAgB,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,kCAAkC;IACjD,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,WAAW,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,oCAAoC;IACnD,uFAAuF;IACvF,KAAK,EAAE,qBAAqB,CAAC;IAC7B,wEAAwE;IACxE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,8BAA8B;IAC7C,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,oCAAoC,CAAC;IACnD,yEAAyE;IACzE,MAAM,CAAC,EAAE,+BAA+B,CAAC;IACzC,iFAAiF;IACjF,YAAY,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC/C,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,IAAI,CAAC,EAAE,6BAA6B,CAAC;IACrC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,iCAAiC,CAAC;IAC7C,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,kCAAkC,CAAC;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yBAAyB,GAAI,0KAcvC,8BAA8B,KAAG,KAAK,CAAC,GAAG,CAAC,OAqJ7C,CAAC"}

package/dist/esm/components/resources/ResourceCollectionToolbar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ResourceCollectionToolbar — the shared, zoned control region for every resource
+ * collection view (LIST cards, LIST table, SEARCH).
+ *
+ * Layout (a single responsive flex row + stacked sub-rows):
+ *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]
+ *   [ filters panel (when expanded, full-width) ]
+ *   [ active filter chips ]
+ *
+ * "Refine" controls (search/filters/sort) cluster at the leading edge — search is
+ * always first; "view + act" controls (view-mode toggle, Create) cluster at the
+ * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media
+ * queries.
+ *
+ * The search is an expand-on-focus field: collapsed it reads as a search icon
+ * (icon-width), and it animates open to a full field when focused — the width
+ * transition is driven by the theme motion tokens (`--motion-duration-*` /
+ * `--motion-easing-*`) and respects `prefers-reduced-motion`, so any theme retunes
+ * the speed/curve. Filters and sort sit beside it as compact icon controls.
+ *
+ * The total item count is intentionally NOT shown here — the pagination footer
+ * owns the total ("Showing X–Y of Z") to keep a single source of truth.
+ *
+ * Presentational + slot-based: it owns only its own ephemeral UI state (search
+ * expand, filters-panel expand). All data/state/handlers are supplied by the
+ * collection host, so the same toolbar serves cards, table, and search.
+ */
+import { useCallback, useState } from 'react';
+import { cn } from '../../core/ui/cn.js';
+import { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';
+import { useI18n } from '../../core/i18n/useI18n.js';
+import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
+import { StandardIconReference, IconSize } from '../../core/icons/icon-registry.frontend.schemas.js';
+import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
+import { InlineSearchInput } from './InlineSearchInput.js';
+import { ResourceLayout_FiltersTrigger, ResourceLayout_FiltersPanel, countActiveFilters, } from './ResourceLayout_FiltersControl.js';
+import { ResourceLayout_FilterChips } from './ResourceLayout_FilterChips.js';
+import { ResourceCollectionQuickFilterTabs } from './ResourceCollectionQuickFilterTabs.js';
+import { ResourceLayout_SortControl } from './ResourceLayout_SortControl.js';
+import { ResourceViewModeToggle } from './ResourceViewModeToggle.js';
+import { CollectionSelectionControls } from './CollectionSelectionControls.js';
+/**
+ * Width transition for the expand-on-focus search field. Timing + curve come from
+ * the theme motion tokens (so a theme retunes them); suppressed under
+ * `prefers-reduced-motion` (the field still opens, just instantly).
+ */
+const SEARCH_WIDTH_TRANSITION = 'motion-safe:transition-[width] motion-safe:duration-[var(--motion-duration-normal)] motion-safe:ease-[var(--motion-easing-default)] motion-reduce:transition-none';
+export const ResourceCollectionToolbar = ({ resourceType, quickFilter, search, filterFields, filterValues, onFiltersChange, sort, viewMode, primaryAction, selection, bulkActions, collectionActions, className, }) => {
+    const [searchExpanded, setSearchExpanded] = useState(false);
+    const [filtersExpanded, setFiltersExpanded] = useState(false);
+    const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });
+    const { renderIcon } = useIconRegistry();
+    const searchPlaceholder = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'searchPlaceholder');
+    const handleSearchBlur = useCallback((e) => {
+        // Collapse back to the icon only when leaving an EMPTY field — an active
+        // query keeps the field open so the filter stays obvious.
+        if (!e.currentTarget.value)
+            setSearchExpanded(false);
+    }, []);
+    const handleSearchKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            search?.onClear();
+            setSearchExpanded(false);
+            e.currentTarget.blur();
+        }
+    }, [search]);
+    const hasFilters = filterFields.length > 0;
+    const hasSort = !!sort && sort.sortFields.length > 0;
+    // Count ONLY the panel's own fields. `filterValues` also carries the promoted
+    // quick-filter field's value (it shares this state object) but that field is
+    // rendered as the tab strip, not in the panel/chips — counting it here would
+    // show "Filters (1)" for a selected quick-filter tab while the opened panel is
+    // empty. Scoping to `filterFields` keeps the badge in sync with the panel.
+    const activeFilterCount = countActiveFilters(filterValues, filterFields.map(f => f.fieldName));
+    const isSearchOpen = !!search && (searchExpanded || !!search.query);
+    return (_jsxs("div", { className: cn('flex flex-col gap-element-sm', className), "data-slot": "collection-toolbar", children: [quickFilter && (_jsx(ResourceCollectionQuickFilterTabs, { resourceType: resourceType, field: quickFilter.field, value: quickFilter.value, onChange: quickFilter.onChange })), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [search && !isSearchOpen && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.ICON, onClick: () => setSearchExpanded(true), "aria-label": searchPlaceholder, "data-slot": "collection-toolbar-search-trigger", children: renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM }) })), search && isSearchOpen && (_jsx("div", { className: cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION), "data-state": "open", children: _jsx(InlineSearchInput, { query: search.query, onChange: search.onChange, onClear: search.onClear, resourceType: resourceType, autoFocus: true, onFocus: () => setSearchExpanded(true), onBlur: handleSearchBlur, onKeyDown: handleSearchKeyDown }) })), hasFilters && (_jsx(ResourceLayout_FiltersTrigger, { activeCount: activeFilterCount, isExpanded: filtersExpanded, onToggle: () => setFiltersExpanded(prev => !prev) })), hasSort && (_jsx(ResourceLayout_SortControl, { resourceType: resourceType, sortFields: sort.sortFields, currentSorts: sort.sortStates, onSortChange: sort.onSortChange })), selection && (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-5 w-px bg-border mx-element-xs", "aria-hidden": "true" }), _jsx(CollectionSelectionControls, { count: selection.count, allSelected: selection.allSelected, onToggleAll: selection.onToggleAll, onClear: selection.onClear })] })), (viewMode || primaryAction || bulkActions || collectionActions) && (_jsxs("div", { className: "flex items-center gap-element ms-auto", children: [viewMode && (_jsx(ResourceViewModeToggle, { viewMode: viewMode.viewMode, onViewModeChange: viewMode.onViewModeChange })), collectionActions, selection && selection.count > 0 && bulkActions ? bulkActions : primaryAction] }))] }), hasFilters && filtersExpanded && (_jsx(ResourceLayout_FiltersPanel, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange })), hasFilters && (_jsx(ResourceLayout_FilterChips, { resourceType: resourceType, filterFields: filterFields, currentFilters: filterValues, onFiltersChange: onFiltersChange }))] }));
+};
+//# sourceMappingURL=ResourceCollectionToolbar.js.map

package/dist/esm/components/resources/ResourceCollectionToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCollectionToolbar.js","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceCollectionToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ResourceCollectionToolbar — the shared, zoned control region for every resource\n * collection view (LIST cards, LIST table, SEARCH).\n *\n * Layout (a single responsive flex row + stacked sub-rows):\n *   [ search · filters · sort ] ───────────────── [ view-mode · primary action ]\n *   [ filters panel (when expanded, full-width) ]\n *   [ active filter chips ]\n *\n * \"Refine\" controls (search/filters/sort) cluster at the leading edge — search is\n * always first; \"view + act\" controls (view-mode toggle, Create) cluster at the\n * trailing edge via `ms-auto`. `flex-wrap` handles narrow widths with no media\n * queries.\n *\n * The search is an expand-on-focus field: collapsed it reads as a search icon\n * (icon-width), and it animates open to a full field when focused — the width\n * transition is driven by the theme motion tokens (`--motion-duration-*` /\n * `--motion-easing-*`) and respects `prefers-reduced-motion`, so any theme retunes\n * the speed/curve. Filters and sort sit beside it as compact icon controls.\n *\n * The total item count is intentionally NOT shown here — the pagination footer\n * owns the total (\"Showing X–Y of Z\") to keep a single source of truth.\n *\n * Presentational + slot-based: it owns only its own ephemeral UI state (search\n * expand, filters-panel expand). All data/state/handlers are supplied by the\n * collection host, so the same toolbar serves cards, table, and search.\n */\n\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { FrontendComponentType, ButtonSize } from '@wildo-ai/presets-components-models';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { StandardIconReference, IconSize } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { InlineSearchInput } from './InlineSearchInput';\nimport {\n  ResourceLayout_FiltersTrigger,\n  ResourceLayout_FiltersPanel,\n  countActiveFilters,\n  type FilterFieldDefinition,\n  type FilterValues,\n} from './ResourceLayout_FiltersControl';\nimport { ResourceLayout_FilterChips } from './ResourceLayout_FilterChips';\nimport { ResourceCollectionQuickFilterTabs } from './ResourceCollectionQuickFilterTabs';\nimport { ResourceLayout_SortControl, type SortState } from './ResourceLayout_SortControl';\nimport { ResourceViewModeToggle } from './ResourceViewModeToggle';\nimport { CollectionSelectionControls } from './CollectionSelectionControls';\nimport { CollectionDisplayMode } from '~wildo-frontend-lib/core/resources/resources.frontend.schemas';\n\n/**\n * Width transition for the expand-on-focus search field. Timing + curve come from\n * the theme motion tokens (so a theme retunes them); suppressed under\n * `prefers-reduced-motion` (the field still opens, just instantly).\n */\nconst SEARCH_WIDTH_TRANSITION =\n  'motion-safe:transition-[width] motion-safe:duration-[var(--motion-duration-normal)] motion-safe:ease-[var(--motion-easing-default)] motion-reduce:transition-none';\n\nexport interface ResourceCollectionToolbarSearch {\n  query: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onClear: () => void;\n}\n\nexport interface ResourceCollectionToolbarSort {\n  sortFields: readonly string[];\n  /** Active sort rules, highest priority first (empty = no sorting). */\n  sortStates: readonly SortState[];\n  onSortChange: (sorts: SortState[]) => void;\n}\n\nexport interface ResourceCollectionToolbarViewMode {\n  viewMode: CollectionDisplayMode;\n  onViewModeChange: (mode: CollectionDisplayMode) => void;\n}\n\nexport interface ResourceCollectionToolbarSelection {\n  /** Number of currently-selected items. */\n  count: number;\n  /** Whether every current-page item is selected (header select-all state). */\n  allSelected: boolean;\n  /** Toggle selection of every current-page item. */\n  onToggleAll: () => void;\n  /** Clear the whole selection. */\n  onClear: () => void;\n}\n\nexport interface ResourceCollectionToolbarQuickFilter {\n  /** The promoted enum filter field (see `collectionDisplayConfig.quickFilterField`). */\n  field: FilterFieldDefinition;\n  /** Current filter value for the field — `undefined` = the \"All\" tab. */\n  value: string | undefined;\n  /** Set (or clear, with `undefined`) the promoted field's filter value. */\n  onChange: (value: string | undefined) => void;\n}\n\nexport interface ResourceCollectionToolbarProps {\n  /** Resource type for i18n label resolution. */\n  resourceType: string;\n  /**\n   * Quick-filter tab strip (\"All · <value> · …\") rendered above the toolbar\n   * row — a promoted enum filter that shares the collection's filter state.\n   * The host must EXCLUDE the promoted field from `filterFields` so the panel\n   * and the tabs never render competing controls for the same field.\n   */\n  quickFilter?: ResourceCollectionToolbarQuickFilter;\n  /** Inline search state — omit to hide the search affordance entirely. */\n  search?: ResourceCollectionToolbarSearch;\n  /** Filter fields + state. Trigger/panel/chips are hidden when there are none. */\n  filterFields: readonly FilterFieldDefinition[];\n  filterValues: FilterValues;\n  onFiltersChange: (filters: FilterValues) => void;\n  /**\n   * Sort state — omit to hide the toolbar sort control (e.g. TABLE mode, where\n   * sorting lives in the column headers).\n   */\n  sort?: ResourceCollectionToolbarSort;\n  /** View-mode toggle — omit when only one display is available. */\n  viewMode?: ResourceCollectionToolbarViewMode;\n  /** Primary action node (e.g. the Create button), placed at the trailing edge. */\n  primaryAction?: React.ReactNode;\n  /**\n   * Selection state — omit for non-selectable collections. When present, a\n   * select-all + \"N selected\" + clear cluster renders in the leading (refine)\n   * zone beside search/filter/sort.\n   */\n  selection?: ResourceCollectionToolbarSelection;\n  /**\n   * Bulk-action node (the contextual bulk `ActionBar`). When a selection is\n   * active (`selection.count > 0`), this REPLACES `primaryAction` in the\n   * trailing zone; Create returns when the selection clears. Local to this\n   * collection — there is no global/floating bulk bar.\n   */\n  bulkActions?: React.ReactNode;\n  /**\n   * Collection-scoped action node (e.g. the `ResourceLayout_CollectionActions`\n   * bar for whole-scope \"retry all\" / \"purge all\"). Rendered in the trailing zone\n   * alongside the primary/bulk action. Unlike bulk (which contextually REPLACES\n   * the primary action during a selection), collection actions target the whole\n   * scope and stay visible regardless of selection. Omit when the resource has no\n   * collection-scoped operations.\n   */\n  collectionActions?: React.ReactNode;\n  /** Additional CSS classes for the toolbar region. */\n  className?: string;\n}\n\nexport const ResourceCollectionToolbar = ({\n  resourceType,\n  quickFilter,\n  search,\n  filterFields,\n  filterValues,\n  onFiltersChange,\n  sort,\n  viewMode,\n  primaryAction,\n  selection,\n  bulkActions,\n  collectionActions,\n  className,\n}: ResourceCollectionToolbarProps): React.JSX.Element => {\n  const [searchExpanded, setSearchExpanded] = useState(false);\n  const [filtersExpanded, setFiltersExpanded] = useState(false);\n  const { tComponent } = useI18n({ component: FrontendComponentType.RESOURCES_LAYOUTS_LIST });\n  const { renderIcon } = useIconRegistry();\n  const searchPlaceholder = tComponent(FrontendComponentType.RESOURCES_LAYOUTS_LIST, 'searchPlaceholder');\n\n  const handleSearchBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n    // Collapse back to the icon only when leaving an EMPTY field — an active\n    // query keeps the field open so the filter stays obvious.\n    if (!e.currentTarget.value) setSearchExpanded(false);\n  }, []);\n\n  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Escape') {\n      search?.onClear();\n      setSearchExpanded(false);\n      e.currentTarget.blur();\n    }\n  }, [search]);\n\n  const hasFilters = filterFields.length > 0;\n  const hasSort = !!sort && sort.sortFields.length > 0;\n  // Count ONLY the panel's own fields. `filterValues` also carries the promoted\n  // quick-filter field's value (it shares this state object) but that field is\n  // rendered as the tab strip, not in the panel/chips — counting it here would\n  // show \"Filters (1)\" for a selected quick-filter tab while the opened panel is\n  // empty. Scoping to `filterFields` keeps the badge in sync with the panel.\n  const activeFilterCount = countActiveFilters(filterValues, filterFields.map(f => f.fieldName));\n  const isSearchOpen = !!search && (searchExpanded || !!search.query);\n\n  return (\n    <div className={cn('flex flex-col gap-element-sm', className)} data-slot=\"collection-toolbar\">\n      {/* ── Quick-filter tab strip (promoted enum filter) — above the toolbar row ── */}\n      {quickFilter && (\n        <ResourceCollectionQuickFilterTabs\n          resourceType={resourceType}\n          field={quickFilter.field}\n          value={quickFilter.value}\n          onChange={quickFilter.onChange}\n        />\n      )}\n\n      <div className=\"flex flex-wrap items-center gap-element\">\n        {/* ── Refine cluster: search (always first) · filters · sort ──\n            Collapsed search is a REAL icon button, not a width-clipped input:\n            clipping a bordered InputRoot to icon width leaked a sheared slice of\n            the input box behind the icon (square corners, cut border). The\n            button expands to the field on click; the field keeps the animated\n            width while open and collapses back on empty-blur / Escape. */}\n        {search && !isSearchOpen && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.GHOST}\n            size={ButtonSize.ICON}\n            onClick={() => setSearchExpanded(true)}\n            aria-label={searchPlaceholder}\n            data-slot=\"collection-toolbar-search-trigger\"\n          >\n            {renderIcon(StandardIconReference.SEARCH, { size: IconSize.SM })}\n          </Button>\n        )}\n        {search && isSearchOpen && (\n          <div\n            className={cn('overflow-hidden shrink-0 w-64 max-w-full', SEARCH_WIDTH_TRANSITION)}\n            data-state=\"open\"\n          >\n            <InlineSearchInput\n              query={search.query}\n              onChange={search.onChange}\n              onClear={search.onClear}\n              resourceType={resourceType}\n              autoFocus\n              onFocus={() => setSearchExpanded(true)}\n              onBlur={handleSearchBlur}\n              onKeyDown={handleSearchKeyDown}\n            />\n          </div>\n        )}\n\n        {hasFilters && (\n          <ResourceLayout_FiltersTrigger\n            activeCount={activeFilterCount}\n            isExpanded={filtersExpanded}\n            onToggle={() => setFiltersExpanded(prev => !prev)}\n          />\n        )}\n\n        {hasSort && (\n          <ResourceLayout_SortControl\n            resourceType={resourceType}\n            sortFields={sort!.sortFields}\n            currentSorts={sort!.sortStates}\n            onSortChange={sort!.onSortChange}\n          />\n        )}\n\n        {/* ── Selection cluster (leading, beside the refine controls) ──\n            select-all-page + \"N selected\" + clear. Local to this list; there is\n            no global floating selection display. */}\n        {selection && (\n          <>\n            <div className=\"h-5 w-px bg-border mx-element-xs\" aria-hidden=\"true\" />\n            <CollectionSelectionControls\n              count={selection.count}\n              allSelected={selection.allSelected}\n              onToggleAll={selection.onToggleAll}\n              onClear={selection.onClear}\n            />\n          </>\n        )}\n\n        {/* ── View + act cluster (trailing) ── the bulk actions CONTEXTUALLY\n            replace the primary (Create) action while a selection is active. */}\n        {(viewMode || primaryAction || bulkActions || collectionActions) && (\n          <div className=\"flex items-center gap-element ms-auto\">\n            {viewMode && (\n              <ResourceViewModeToggle\n                viewMode={viewMode.viewMode}\n                onViewModeChange={viewMode.onViewModeChange}\n              />\n            )}\n            {/* Whole-scope maintenance actions (retry all / purge all) sit before\n                the create/bulk slot and are not swapped out by a selection. */}\n            {collectionActions}\n            {selection && selection.count > 0 && bulkActions ? bulkActions : primaryAction}\n          </div>\n        )}\n      </div>\n\n      {hasFilters && filtersExpanded && (\n        <ResourceLayout_FiltersPanel\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n\n      {hasFilters && (\n        <ResourceLayout_FilterChips\n          resourceType={resourceType}\n          filterFields={filterFields}\n          currentFilters={filterValues}\n          onFiltersChange={onFiltersChange}\n        />\n      )}\n    </div>\n  );\n};\n"]}

package/dist/esm/components/resources/ResourceInPlaceOperationRow.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { NavigationZone } from '../../core/navigation/navigation.schemas';
+export interface ResourceInPlaceOperationRowProps {
+    navigationZone: NavigationZone;
+    className?: string;
+}
+/**
+ * The body a collection element renders while it is TRANSFORMED
+ * (`ResourceOperationActionPresentation.INLINE`).
+ *
+ * It takes the place of the row's normal content and nothing else moves — that is the whole
+ * contract, and the reason this is not an overlay: the neighbouring rows stay on screen and in the
+ * document, so the user keeps the comparison that made them act on this row in the first place.
+ *
+ * Like the anchored panel, it is a thin frame around
+ * `ResourceLayout_SemanticOperationFallback` in `COMPACT` chrome. Every host executes the operation
+ * through the same body — same RMM contract, same CRITICAL double-validation, same success and error
+ * events — so "where the form is drawn" never becomes "which rules apply".
+ */
+export declare function ResourceInPlaceOperationRow({ navigationZone, className, }: ResourceInPlaceOperationRowProps): React.JSX.Element | null;
+//# sourceMappingURL=ResourceInPlaceOperationRow.d.ts.map

package/dist/esm/components/resources/ResourceInPlaceOperationRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceInPlaceOperationRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/resources/ResourceInPlaceOperationRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AAO7F,MAAM,WAAW,gCAAgC;IAC/C,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,SAAS,GACV,EAAE,gCAAgC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA8B7D"}