@almadar/ui 5.129.0 → 5.130.0

package/dist/avl/index.cjs

@@ -26549,7 +26549,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -26567,10 +26567,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -26906,7 +26906,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -26997,6 +26997,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = hooks.useTranslate();
+      const [open, setOpen] = React91.useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsxRuntime.jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -30638,9 +30674,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React91__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -30807,7 +30853,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -30825,6 +30871,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/avl/index.js

@@ -26473,7 +26473,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -26491,10 +26491,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -26830,7 +26830,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -26921,6 +26921,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = useTranslate();
+      const [open, setOpen] = useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -30562,9 +30598,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React91__default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
@@ -30731,7 +30777,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -30749,6 +30795,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/components/index.cjs

@@ -22705,7 +22705,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6; exports.FilterGroup = void 0;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover; exports.FilterGroup = void 0;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -22723,10 +22723,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    exports.FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -23062,7 +23062,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -23153,6 +23153,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = hooks.useTranslate();
+      const [open, setOpen] = React74.useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    exports.FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsxRuntime.jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FilterGroupControls, { ...props });
     exports.FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -29606,9 +29642,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React74__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -29775,7 +29821,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -29793,6 +29839,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/components/index.d.cts

@@ -4011,10 +4011,6 @@ interface FilterGroupProps {
     /** Declarative clear event — emits UI:{clearEvent} via eventBus on clear-all (alongside canonical UI:CLEAR_FILTERS) */
     clearEvent?: EventKey;
 }
-/**
- * FilterGroup - Renders filter controls for entity data
- * Uses atoms: Button, Select, Badge, HStack
- */
 declare const FilterGroup: React__default.FC<FilterGroupProps>;
 
 /**

package/dist/components/index.d.ts

@@ -4011,10 +4011,6 @@ interface FilterGroupProps {
     /** Declarative clear event — emits UI:{clearEvent} via eventBus on clear-all (alongside canonical UI:CLEAR_FILTERS) */
     clearEvent?: EventKey;
 }
-/**
- * FilterGroup - Renders filter controls for entity data
- * Uses atoms: Button, Select, Badge, HStack
- */
 declare const FilterGroup: React__default.FC<FilterGroupProps>;
 
 /**

package/dist/components/index.js

@@ -22630,7 +22630,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -22648,10 +22648,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -22987,7 +22987,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -23078,6 +23078,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = useTranslate();
+      const [open, setOpen] = useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -29531,9 +29567,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React74__default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
@@ -29700,7 +29746,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -29718,6 +29764,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/providers/index.cjs

@@ -24283,7 +24283,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24301,10 +24301,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -24640,7 +24640,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -24731,6 +24731,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = hooks.useTranslate();
+      const [open, setOpen] = React84.useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsxRuntime.jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -28372,9 +28408,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React84__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -28541,7 +28587,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28559,6 +28605,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/providers/index.js

@@ -24209,7 +24209,7 @@ var init_useQuerySingleton = __esm({
     queryStores = /* @__PURE__ */ new Map();
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -24227,10 +24227,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -24566,7 +24566,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -24657,6 +24657,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = useTranslate();
+      const [open, setOpen] = useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -28298,9 +28334,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React84__default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
@@ -28467,7 +28513,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28485,6 +28531,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/runtime/index.cjs

@@ -23773,7 +23773,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -23791,10 +23791,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -24130,7 +24130,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -24221,6 +24221,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = hooks.useTranslate();
+      const [open, setOpen] = React82.useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsxRuntime.jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -27862,9 +27898,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React82__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -28031,7 +28077,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28049,6 +28095,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/dist/runtime/index.js

@@ -23699,7 +23699,7 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-var resolveFilterType, lookStyles6, FilterGroup;
+var resolveFilterType, lookStyles6, FilterGroupControls, FilterGroupPopover, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
     "use client";
@@ -23717,10 +23717,10 @@ var init_FilterGroup = __esm({
       toolbar: "",
       chips: "gap-1 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill [&_input]:!px-3 [&_select]:!px-3 [&_input]:bg-muted [&_select]:bg-muted [&_label]:hidden",
       pills: "gap-2 [&_input]:rounded-pill [&_select]:rounded-pill [&_button]:rounded-pill",
-      "popover-trigger": "[&>*:not(:first-child)]:hidden",
+      "popover-trigger": "",
       "inline-column-header": "hidden"
     };
-    FilterGroup = ({
+    FilterGroupControls = ({
       entity,
       filters,
       onFilterChange,
@@ -24056,7 +24056,7 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-wide", children: t("filterGroup.filters") })
                 ]
               }
             ),
@@ -24147,6 +24147,42 @@ var init_FilterGroup = __esm({
         }
       );
     };
+    FilterGroupControls.displayName = "FilterGroupControls";
+    FilterGroupPopover = (props) => {
+      const { t } = useTranslate();
+      const [open, setOpen] = useState(false);
+      const queryState = useQuerySingleton(props.query);
+      const activeFilterCount = queryState?.filters ? Object.values(queryState.filters).filter((v) => v !== null && v !== void 0).length : 0;
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", props.className), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: activeFilterCount > 0 ? "secondary" : "ghost",
+            size: "sm",
+            leftIcon: "filter",
+            onClick: () => setOpen((o) => !o),
+            "aria-expanded": open,
+            "aria-haspopup": "true",
+            children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+              /* @__PURE__ */ jsx("span", { children: t("filterGroup.filters") }),
+              activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: activeFilterCount })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-50 mt-2 min-w-[16rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-card-md shadow-main", children: /* @__PURE__ */ jsx(
+          FilterGroupControls,
+          {
+            ...props,
+            className: void 0,
+            look: "toolbar",
+            variant: "vertical",
+            showIcon: false
+          }
+        ) })
+      ] });
+    };
+    FilterGroupPopover.displayName = "FilterGroupPopover";
+    FilterGroup = (props) => props.look === "popover-trigger" ? /* @__PURE__ */ jsx(FilterGroupPopover, { ...props }) : /* @__PURE__ */ jsx(FilterGroupControls, { ...props });
     FilterGroup.displayName = "FilterGroup";
   }
 });
@@ -27788,9 +27824,19 @@ function TableView({
   const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
   const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const colFloors = React82__default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      return Math.min(longest, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
-    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
     actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
@@ -27957,7 +28003,7 @@ function TableView({
     }
   );
 }
-var alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -27975,6 +28021,7 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
+    MAX_MEASURED_COL_CH = 32;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.129.0",
+  "version": "5.130.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -122,7 +122,7 @@
     "@almadar/evaluator": "^2.37.0",
     "@almadar/logger": "^1.10.0",
     "@almadar/runtime": "^6.41.0",
-    "@almadar/std": "^16.147.0",
+    "@almadar/std": "^16.148.0",
     "@almadar/syntax": "^1.13.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",