@donotdev/ui 0.0.15 → 0.0.16

package/dist/components/common/TechBento.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TechBento.d.ts","sourceRoot":"","sources":["../../../src/components/common/TechBento.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAa,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAK/D,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;QACX,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;QAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;KACvB,CAAC,CAAC;IACH;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwCF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,IAAQ,EACR,OAAO,EACP,GAAc,EACd,SAAiB,EACjB,IAAiB,EACjB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,cAAc,2CA4DhB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TechBento.d.ts","sourceRoot":"","sources":["../../../src/components/common/TechBento.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,cAAc,EACd,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAa,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAK/D,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;QACX,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;QAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;KACvB,CAAC,CAAC;IACH;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0CF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,IAAQ,EACR,OAAO,EACP,GAAc,EACd,SAAiB,EACjB,IAAiB,EACjB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,cAAc,2CA4DhB;AAED,eAAe,SAAS,CAAC"}

package/dist/components/common/TechBento.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/ui/src/components/common/TechBento.tsx
 import { useState } from 'react';
-import { Bento, Card, Section, Stack, Text, TONE, cn } from '@donotdev/components';
+import { Bento, Card, Section, Stack, Text, TONE, cn, } from '@donotdev/components';
 import { techLogos } from '../../data/techLogos';
 import { sanitizeSvg } from '../../utils/sanitizeSvg';
 function TechCard({ techKey, variant, }) {

package/dist/components/layout/components/header/HeaderNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/HeaderNavigation.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,OAAO,EAIR,MAAM,sBAAsB,CAAC;AAU9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CAwE1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/HeaderNavigation.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,OAAO,EAIR,MAAM,sBAAsB,CAAC;AAa9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CA4E1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/layout/components/header/HeaderNavigation.js

@@ -24,7 +24,7 @@ import { Link } from '../../../../routing/Link';
 import { Icon } from '../../../common/icon';
 import { DnDevNavigationMenu } from '../../../../routing/DnDevNavigationMenu';
 import { NavigationItemComponent } from '../../../../routing/NavigationItem';
-import { useNavigationItems, useNavigationRoute } from '../../../../routing/useNavigation';
+import { useNavigationItems, useNavigationRoute, } from '../../../../routing/useNavigation';
 /**
  * HeaderNavigation - DISPLAY-aware adaptive navigation component
  *
@@ -47,7 +47,7 @@ const HeaderNavigation = ({ className = '', showIcons = true, display = DISPLAY.
     if (path) {
         if (!singleRoute)
             return null;
-        return (_jsx(Button, { variant: "ghost", display: display, icon: showIcons ? _jsx(Icon, { icon: singleRoute.icon, fallback: LinkIcon }) : undefined, className: className, render: ({ children, ...props }) => (_jsx(Link, { path: singleRoute.path, ...props, children: children })), children: singleRoute.label }));
+        return (_jsx(Button, { variant: "ghost", display: display, icon: showIcons ? (_jsx(Icon, { icon: singleRoute.icon, fallback: LinkIcon })) : undefined, className: className, render: ({ children, ...props }) => (_jsx(Link, { path: singleRoute.path, ...props, children: children })), children: singleRoute.label }));
     }
     const effectiveDisplay = display === DISPLAY.AUTO
         ? isMobile || isTablet

package/dist/crud/components/CrudCardLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CrudCardLink.d.ts","sourceRoot":"","sources":["../../../src/crud/components/CrudCardLink.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,OAAO,EACP,GAAG,IAAI,EACR,EAAE,aAAa,2CAqBf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CrudCardLink.d.ts","sourceRoot":"","sources":["../../../src/crud/components/CrudCardLink.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAkBvE;AAED,eAAe,QAAQ,CAAC"}

package/dist/crud/components/EntityCardList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityCardList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityCardList.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAC;AAIxE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAmB,EACnB,SAA0B,EAAE,2BAA2B;AACvD,MAAM,EACN,WAAmB,EACnB,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,2CA4MrB"}
+{"version":3,"file":"EntityCardList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityCardList.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAC;AAIxE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAmB,EACnB,SAA0B,EAAE,2BAA2B;AACvD,MAAM,EACN,WAAmB,EACnB,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,2CA2LrB"}

package/dist/crud/components/EntityCardList.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * **Routing:** Convention basePath = `/${collection}`. View = basePath/:id.
  * Override basePath for nested routes; use onClick(id) to open sheet instead of navigating.
  *
- * @version 0.2.0
+ * @version 0.3.0
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -18,7 +18,7 @@ import { Heart } from 'lucide-react';
 import { Card, Grid, Stack, Text, Spinner, Section, Button, } from '@donotdev/components';
 import { useTranslation, getListCardFieldNames } from '@donotdev/core';
 import { useNavigate } from '../../routing';
-import { useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, useCrudFilters, } from '@donotdev/crud';
+import { useCrudCardList, EntityFilters, useEntityFavorites, useCrudFilters, } from '@donotdev/crud';
 import { CrudCard } from './CrudCardLink';
 /**
  * Entity Card List Component - Card grid view for public/user-facing browsing
@@ -35,33 +35,19 @@ export function EntityCardList({ entity, basePath, onClick, cols = [1, 2, 3, 4],
 filter, hideFilters = false, resultLabel, tone, }) {
     const navigate = useNavigate();
     const base = basePath ?? `/${entity.collection}`;
-    // useCrudCardList -> handles fetching optimized for cards automatically
-    const { data: listData, loading } = useCrudCardList(entity, { staleTime });
-    const rawData = listData?.items || [];
+    // useCrudCardList -> handles fetching + client-side filter/search/sort via `processed`
+    const { items: rawData, processed, loading, } = useCrudCardList(entity, { staleTime });
     // Favorites - always enabled, no props needed
     const { isFavorite, toggleFavorite, favoritesFilter } = useEntityFavorites({
         collection: entity.collection,
     });
     // Favorites toggle from CrudStore (persists across navigation)
-    // Note: EntityFilters now manages its own filters internally via useCrudFilters
-    const { showFavoritesOnly, setShowFavoritesOnly, filters } = useCrudFilters({
+    const { showFavoritesOnly, setShowFavoritesOnly } = useCrudFilters({
         collection: entity.collection,
     });
-    // Apply filters from EntityFilters component
-    const applyFilters = useCallback((item) => {
-        if (Object.keys(filters).length === 0)
-            return true;
-        return Object.entries(filters).every(([fieldName, filterValue]) => {
-            const itemValue = item[fieldName];
-            const fieldConfig = entity.fields[fieldName];
-            const fieldType = fieldConfig?.type || 'text';
-            return matchesFilter(itemValue, filterValue, fieldType);
-        });
-    }, [filters, entity.fields]);
-    // Apply client-side filtering (including favorites)
+    // Apply UI-specific filters (favorites, consumer filter prop) on top of processed
     const data = useMemo(() => {
-        let result = rawData;
-        result = result.filter(applyFilters);
+        let result = processed;
         // Apply favorites filter if enabled
         if (showFavoritesOnly) {
             result = result.filter(favoritesFilter);
@@ -70,7 +56,7 @@ filter, hideFilters = false, resultLabel, tone, }) {
             result = result.filter(filter);
         }
         return result;
-    }, [rawData, applyFilters, showFavoritesOnly, favoritesFilter, filter]);
+    }, [processed, showFavoritesOnly, favoritesFilter, filter]);
     // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
     const { t } = useTranslation([entity.namespace, 'crud']);
     const { t: tCrud } = useTranslation('crud');

package/dist/crud/components/EntityList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityList.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,UAAiB,GAClB,EAAE,eAAe,2CAiTjB"}
+{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityList.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,UAAiB,GAClB,EAAE,eAAe,2CA2QjB"}

package/dist/crud/components/EntityList.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * **Routing:** Convention basePath = `/${collection}`. View/Edit = basePath/:id, Create = basePath/new.
  * Override basePath for nested routes; use onClick(id) to open sheet instead of navigating.
  *
- * @version 0.3.2
+ * @version 0.4.0
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -18,7 +18,7 @@ import { useMemo, useCallback, useState } from 'react';
 import { DataTable, Button, Stack, ActionButton, Section, Input, } from '@donotdev/components';
 import { useTranslation } from '@donotdev/core';
 import { useNavigate } from '../../routing';
-import { translateFieldLabel, useCrud, useCrudList, EntityFilters, matchesFilter, formatValue, useCrudFilters, } from '@donotdev/crud';
+import { translateFieldLabel, useCrud, useCrudList, EntityFilters, formatValue, } from '@donotdev/crud';
 /**
  * Entity List Component - Table view for admin/internal operations
  *
@@ -37,11 +37,11 @@ export function EntityList({ entity, basePath, onClick, hideFilters = false, pag
     // For server-side, we need to track pageSize state (DataTable will call onPageSizeChange)
     // For client-side, we just pass pageSizeProp to DataTable and it handles its own state
     const [serverPageSize, setServerPageSize] = useState(pageSizeProp);
-    // Separation of Concerns:
-    // Client mode: fetches ALL items, DataTable handles pagination
-    // Server mode: fetches per page, controlled pagination
-    const { data: listData, loading, mutate: refreshList, } = useCrudList(entity, {
+    const [searchQuery, setSearchQuery] = useState('');
+    // useCrudList now handles client-side filter + search + sort via `processed`
+    const { data: listData, items: rawData, processed: filteredData, loading, mutate: refreshList, } = useCrudList(entity, {
         pagination,
+        searchQuery,
         ...(queryOptions && { queryOptions }),
         ...(pagination === 'server' && {
             page: currentPage,
@@ -51,14 +51,8 @@ export function EntityList({ entity, basePath, onClick, hideFilters = false, pag
     // useCrud -> handles actions (delete)
     const { delete: deleteItem } = useCrud(entity);
     const { t: tCrud } = useTranslation('crud');
-    const data = listData?.items || [];
     // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
     const { t } = useTranslation([entity.namespace, 'crud']);
-    // Get filters for applying to data (EntityFilters manages its own state)
-    const { filters } = useCrudFilters({
-        collection: entity.collection,
-    });
-    const [searchQuery, setSearchQuery] = useState('');
     // Refresh handler - triggers manual refetch in useList
     const handleRefresh = useCallback(async () => {
         await refreshList();
@@ -84,36 +78,6 @@ export function EntityList({ entity, basePath, onClick, hideFilters = false, pag
     const handleDelete = useCallback(async (itemId) => {
         await deleteItem(itemId);
     }, [deleteItem]);
-    // Apply search and filters to data
-    // @todo Server-side filtering: Currently only handles client-side filtering.
-    // When pagination='server', filters should be sent to the server via useCrudList options.
-    // Until then, filters are applied client-side after fetching.
-    const filteredData = useMemo(() => {
-        let result = data;
-        // Apply search query (searches all fields)
-        if (searchQuery) {
-            const searchLower = searchQuery.toLowerCase();
-            result = result.filter((item) => {
-                return Object.values(item).some((value) => {
-                    if (value === null || value === undefined)
-                        return false;
-                    return String(value).toLowerCase().includes(searchLower);
-                });
-            });
-        }
-        // Apply column filters
-        if (Object.keys(filters).length > 0) {
-            result = result.filter((item) => {
-                return Object.entries(filters).every(([fieldName, filterValue]) => {
-                    const itemValue = item[fieldName];
-                    const fieldConfig = entity.fields[fieldName];
-                    const fieldType = fieldConfig?.type || 'text';
-                    return matchesFilter(itemValue, filterValue, fieldType);
-                });
-            });
-        }
-        return result;
-    }, [data, searchQuery, filters, entity.fields]);
     // Generate columns from entity.listFields or entity.fields
     const columns = useMemo(() => {
         const fieldsToShow = entity.listFields || Object.keys(entity.fields);
@@ -170,7 +134,7 @@ export function EntityList({ entity, basePath, onClick, hideFilters = false, pag
                     defaultValue: `Browse ${entityName} - Filters`,
                 }), collapsible: true, defaultOpen: true, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", gap: "tight", align: "center", className: "dndev-w-full", style: { display: 'grid', gridTemplateColumns: '1fr auto auto' }, children: [_jsx(Input, { placeholder: tCrud('search.placeholder', {
                                         defaultValue: 'Search...',
-                                    }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), icon: Search, className: "dndev-w-full" }), _jsx(Button, { icon: RefreshCw, variant: "outline", onClick: handleRefresh, disabled: loading, display: "compact", "aria-label": tCrud('refresh', { defaultValue: 'Refresh' }) }), _jsx(Button, { icon: Plus, onClick: handleCreate, display: "compact", children: tCrud('addNew', { defaultValue: 'Add New' }) })] }), !hideFilters && (_jsx(EntityFilters, { entity: entity, data: data, fieldsToFilter: entity.listFields }))] }) }), _jsx(Section, { title: loading
+                                    }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), icon: Search, className: "dndev-w-full" }), _jsx(Button, { icon: RefreshCw, variant: "outline", onClick: handleRefresh, disabled: loading, display: "compact", "aria-label": tCrud('refresh', { defaultValue: 'Refresh' }) }), _jsx(Button, { icon: Plus, onClick: handleCreate, display: "compact", children: tCrud('addNew', { defaultValue: 'Add New' }) })] }), !hideFilters && (_jsx(EntityFilters, { entity: entity, data: rawData, fieldsToFilter: entity.listFields }))] }) }), _jsx(Section, { title: loading
                     ? tCrud('results.title.fetching', {
                         defaultValue: 'Fetching...',
                     })

package/dist/dndev.css

@@ -3422,80 +3422,120 @@ em {
 
 /* packages/components/src/atomic/Combobox/Combobox.css */
 
-.dndev-combobox-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  text-align: start;
-}
+/* ──────────────────────────────────────────────────
+   Trailing icon group — flex row inside the input area
+   ────────────────────────────────────────────────── */
 
-.dndev-combobox-trigger button {
+.dndev-combobox-trailing {
+  position: absolute;
+  inset-inline-end: var(--gap-sm);
+  top: 0;
+  height: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  gap: var(--gap-tight, 4px);
+  z-index: 1;
+  pointer-events: none; /* pass clicks through to input by default */
 }
 
-.dndev-combobox-placeholder {
-  opacity: var(--opacity-muted);
-}
+/* Input padding: reserve space for trailing content.
+   --combobox-pad-end is set as an inline CSS variable on .dndev-combobox-wrapper. */
 
-.dndev-combobox-trigger-icons {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-tight);
-  margin-inline-start: auto;
+.dndev-combobox-wrapper .dndev-input {
+  padding-inline-end: var(--combobox-pad-end);
 }
 
-.dndev-combobox-clear {
+/* Action buttons (create "+", clear "X") */
+
+.dndev-combobox-action-btn {
+  all: unset;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--radius-interactive, var(--radius-sm, 4px));
   cursor: pointer;
-  opacity: var(--opacity-muted);
-  transition: opacity var(--dur-fast) var(--ease-in-out);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  pointer-events: auto; /* re-enable clicks on buttons */
+  color: var(--muted-foreground);
+  opacity: var(--opacity-muted, 0.5);
+  transition:
+    opacity var(--dur-fast) var(--ease-in-out),
+    background-color var(--dur-fast) var(--ease-in-out);
 }
 
-.dndev-combobox-clear:hover,
-.dndev-combobox-clear:focus {
+.dndev-combobox-action-btn:hover {
+  opacity: 1;
+  background-color: var(--accent, rgba(0, 0, 0, 0.06));
+}
+
+.dndev-combobox-action-btn:focus-visible {
   opacity: 1;
   outline: none;
+  box-shadow:
+    0 0 0 2px var(--ring),
+    0 0 0 4px rgb(from var(--ring) r g b / 0.2);
 }
 
-.dndev-combobox-clear svg {
-  width: var(--icon-sm);
-  height: var(--icon-sm);
+.dndev-combobox-action-btn:active {
+  opacity: 0.8;
+}
+
+.dndev-combobox-action-btn svg {
+  width: var(--size-icon-sm, 16px);
+  height: var(--size-icon-sm, 16px);
+}
+
+/* Create button accent color */
+
+.dndev-combobox-action-btn--create {
+  color: var(--primary);
+}
+
+/* Clear button */
+
+.dndev-combobox-action-btn--clear {
+  color: var(--muted-foreground);
 }
 
+/* Chevron indicator (non-interactive, just visual) */
+
 .dndev-combobox-chevron {
   width: var(--icon-md);
   height: var(--icon-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
   opacity: var(--opacity-muted);
+  pointer-events: none;
+}
+
+.dndev-combobox-chevron svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
   transition: transform var(--dur-fast) var(--ease-in-out);
 }
 
-[data-state='open'] .dndev-combobox-chevron {
+.dndev-combobox-open .dndev-combobox-chevron svg {
   transform: rotate(180deg);
 }
 
-.dndev-combobox-loading-container {
+/* Spinner replaces chevron */
+
+.dndev-combobox-spinner {
   display: flex;
   align-items: center;
-  gap: var(--gap-sm);
-}
-
-.dndev-combobox-loading-spinner {
+  justify-content: center;
   width: var(--icon-md);
   height: var(--icon-md);
-  border-radius: var(--radius-full);
-  border: 2px solid currentColor;
-  border-top-color: transparent;
+  pointer-events: none;
 }
 
+/* ──────────────────────────────────────────────────
+   Dropdown content
+   ────────────────────────────────────────────────── */
+
 .dndev-combobox-content {
   width: var(--radix-popover-trigger-width);
   min-width: var(--radix-popover-trigger-width);
@@ -3505,15 +3545,6 @@ em {
   padding: 0;
 }
 
-.dndev-combobox-search-container {
-  padding: var(--gap-sm);
-  border-bottom: var(--border-width) solid var(--line-2);
-}
-
-.dndev-combobox-search-input {
-  width: 100%;
-}
-
 .dndev-combobox-option {
   all: unset;
   display: flex;
@@ -3584,20 +3615,6 @@ em {
   flex-shrink: 0;
 }
 
-.dndev-combobox-create-btn:hover {
-  opacity: 0.8;
-}
-
-.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon svg,
-.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon > * {
-  transform: rotate(180deg);
-}
-
-.dndev-input-with-trailing-icon .dndev-input-icon svg,
-.dndev-input-with-trailing-icon .dndev-input-icon > * {
-  transition: transform var(--dur-fast) var(--ease-in-out);
-}
-
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -9498,7 +9515,10 @@ main[role='main'][data-routing-animation='none'] {
   max-height: none;
   overflow-y: visible;
   overflow-x: hidden;
-  grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
+  grid-template-rows: var(--header-height) minmax(
+      calc(100dvh - var(--header-height)),
+      auto
+    ) auto;
 }
 
 .dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
@@ -9539,7 +9559,10 @@ main[role='main'][data-routing-animation='none'] {
     max-height: none;
     overflow-y: visible;
     overflow-x: hidden;
-    grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
+    grid-template-rows: var(--header-height) minmax(
+        calc(100dvh - var(--header-height)),
+        auto
+      ) auto;
   }
 
     .dndev-layout header[role='banner'] {