@almadar/ui 6.57.0 → 6.58.0

package/dist/{chunk-RHP5WL55.js → chunk-HB3D3HUJ.js}

@@ -1,6 +1,6 @@
 import { useTranslate, useRenderI18n, runTickFrame } from './chunk-N7JIG57B.js';
 import { ALL_SLOTS } from './chunk-VHTJRS2N.js';
-import { LoadingState, ErrorState, UISlotRenderer } from './chunk-PYJ2UQWM.js';
+import { LoadingState, ErrorState, UISlotRenderer } from './chunk-I2ZNE5TD.js';
 import { Box } from './chunk-HA7CJWQX.js';
 import { Typography } from './chunk-4ZGXIW3B.js';
 import { beginPending, endPending } from './chunk-I5QOYW2Z.js';
@@ -8,11 +8,11 @@ import { useEventBus } from './chunk-CHNC4UYE.js';
 import { registerTrait, unregisterTrait, perfTimeAsync } from './chunk-KJGVLXEN.js';
 import { bindTraitStateGetter, registerTraitSnapshot, recordTransition, recordingTransport, recordServerResponse } from './chunk-Q47ZN2DW.js';
 import { isNotificationSlot } from './chunk-PEST66PN.js';
-import React, { useState, useMemo, useEffect, useRef, useCallback, useSyncExternalStore } from 'react';
+import React, { createContext, useState, useMemo, useEffect, useRef, useCallback, useSyncExternalStore, useContext } from 'react';
 import { schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, traitsEmbeddedByEvent, traitReferencesCallsitePayload, configReferencesCallsitePayload, TRAIT_MOUNT_ERROR_TESTID, traitsEmbeddedByEffects, applyListenPayloadMapping, buildResolvedTraitConfigs, collectCallsiteCaptureChildren, orbitalInlineEntities, storesRowsInBrowser, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
-import { collectListenerTargets, LIFECYCLE_EVENTS, TraitMountError, InMemoryPersistence, loadLazyPage, createInProcessTransport, buildTraitIndex, createMemoryCircuitStore, createLocalStoreTransport, createResidenceTransport, createClientKernel, createTickScheduler, isValidCronExpression, parseDurationString, UNMOUNT_EVENT, createClientEffectHandlers, EffectExecutor, isSExpression, collectDeclaredConfigDefaults, createContextFromBindings, openBrowserStore, browserStoreName, normalizeCallSiteConfigToValues } from '@almadar/runtime';
-import { useUser, useHasServerBridge, useArbitraryClassStyles, getAllPages, matchPathAmong, CurrentPagePathProvider, NavStackProvider, OrbitalProvider, ServerBridgeProvider, useNavStack, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, EntityBindingContext, AwaitingSkeletonContext } from '@almadar/ui/providers';
+import { collectListenerTargets, LIFECYCLE_EVENTS, TraitMountError, loadLazyPage, createInProcessTransport, buildTraitIndex, createMemoryCircuitStore, createLocalStoreTransport, createResidenceTransport, createClientKernel, createTickScheduler, isValidCronExpression, parseDurationString, UNMOUNT_EVENT, createClientEffectHandlers, EffectExecutor, isSExpression, collectDeclaredConfigDefaults, createContextFromBindings, openBrowserStore, browserStoreName, normalizeCallSiteConfigToValues } from '@almadar/runtime';
+import { useUser, useArbitraryClassStyles, getAllPages, matchPathAmong, CurrentPagePathProvider, NavStackProvider, OrbitalProvider, ServerBridgeProvider, useNavStack, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, EntityBindingContext, AwaitingSkeletonContext } from '@almadar/ui/providers';
 import { evaluateListenPayloadExpr, evaluate, createMinimalContext, evaluateGuard, executeEffects } from '@almadar/evaluator';
 import { getPatternDefinition } from '@almadar/core/patterns';
 import { isKnownStdOperator } from '@almadar/std/registry';
@@ -21,6 +21,7 @@ export { adjustSchemaForMockData, buildMockData, collectEmbeddedTraits, prepareS
 import { useInRouterContext, useHref } from 'react-router-dom';
 import { UISlotProvider, useUISlots } from '@almadar/ui/context';
 import { useTranslate as useTranslate$1, createTranslate, I18nProvider } from '@almadar/ui/hooks';
+import { InMemoryPersistence } from '@almadar/db/mock';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { OrbitalServerRuntime } from '@almadar/runtime/OrbitalServerRuntime';
 import { localeDirection } from '@almadar/core/i18n';
@@ -440,6 +441,22 @@ function useBusIngress(traitBindings, traitIndex, settle, eventBus, appTraitName
       });
       unsubscribes.push(unsub);
     }
+    const routedBareEvents = /* @__PURE__ */ new Set();
+    for (const binding of traitBindings) {
+      for (const listen of binding.trait.listens ?? []) {
+        if (listen.source !== void 0 && listen.source.kind !== "any") routedBareEvents.add(listen.event);
+      }
+    }
+    for (const eventKey of routedBareEvents) {
+      const unsub = eventBus.on(`UI:${eventKey}`, (event) => {
+        if (deliveredHere(event.source) || event.source?.trait === void 0) return;
+        for (const target of collectListenerTargets(traitIndex, event.source, eventKey, event.payload)) {
+          log2.debug("listen-bare:fire", { event: eventKey, source: event.source.trait, listener: target.listenerTrait, triggers: target.triggers });
+          dispatch(target.listenerTrait, target.triggers, target.payload, event.source);
+        }
+      });
+      unsubscribes.push(unsub);
+    }
     return () => {
       for (const unsub of unsubscribes) unsub();
     };
@@ -518,7 +535,7 @@ function resolveLambdaBindings(body, params, item, index) {
   return body;
 }
 var LazySlotContentRenderer = React.lazy(
-  () => import('./UISlotRenderer-NCGDIXN4.js').then((m) => ({ default: m.SlotContentRenderer }))
+  () => import('./UISlotRenderer-N5DFYE6K.js').then((m) => ({ default: m.SlotContentRenderer }))
 );
 function deferLambdaEntityExprs(value) {
   if (typeof value === "string") {
@@ -1331,9 +1348,16 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   useEffect(() => {
     if (!transport?.subscribe) return;
     return transport.subscribe((emitted, target) => {
-      for (const t2 of collectListenerTargets(traitIndex, emitted.source, emitted.event, emitted.payload)) {
-        void (target === "origin" ? progressAndSettle(t2.listenerTrait, t2.triggers, t2.payload) : dispatchAndSettle(t2.listenerTrait, t2.triggers, t2.payload));
+      const listeners = collectListenerTargets(traitIndex, emitted.source, emitted.event, emitted.payload);
+      if (target !== "origin") {
+        for (const t2 of listeners) void dispatchAndSettle(t2.listenerTrait, t2.triggers, t2.payload);
+        return;
+      }
+      const caller = emitted.source?.trait;
+      if (caller !== void 0 && traitIndex.byName.has(caller) && !listeners.some((t2) => t2.listenerTrait === caller && t2.triggers === emitted.event)) {
+        void progressAndSettle(caller, emitted.event, emitted.payload);
       }
+      for (const t2 of listeners) void progressAndSettle(t2.listenerTrait, t2.triggers, t2.payload);
     }, { clientId: getTabClientId() });
   }, [transport, traitIndex, progressAndSettle, dispatchAndSettle]);
   useEffect(() => {
@@ -1343,7 +1367,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       if (traitName === void 0 || !traitIndex.byName.has(traitName)) return;
       const composedBefore = new Map(store.callsitePayloads);
       void kernel.foldHostDispatch(request, response).then((outcome) => settleOutcome(traitName, request.event, request.payload, outcome, composedBefore));
-    });
+    }, { clientId: getTabClientId() });
   }, [transport, traitIndex, kernel, store, settleOutcome]);
   const mountAndSettle = useCallback(async (seeds, payload) => {
     const composedBefore = new Map(store.callsitePayloads);
@@ -1404,6 +1428,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     prevActiveTraitNamesRef.current = nextActiveTraitNames;
   }, [traitBindings, uiSlots]);
   const mountedRef = useRef(null);
+  const aliveRef = useRef(true);
+  useEffect(() => {
+    aliveRef.current = true;
+    return () => {
+      aliveRef.current = false;
+    };
+  }, []);
   const mountKey = `${options.mountKey ?? ""}\0${JSON.stringify(Object.entries(options.initPayload ?? {}).sort(([a], [b]) => a.localeCompare(b)))}`;
   useEffect(() => {
     const prev = mountedRef.current;
@@ -1434,6 +1465,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         const failed = err instanceof TraitMountError ? err.trait : traits.join(", ");
         const cause = err instanceof TraitMountError ? err.original : err;
         stateLog.warn("mount:failed", { traits, failed, error: message, stack: cause instanceof Error ? cause.stack : void 0 });
+        if (!aliveRef.current) return;
         uiSlots.render({
           target: "main",
           pattern: "error-state",
@@ -1562,6 +1594,7 @@ function TraitInitializer({ traits, routeParams, mountKey, orbitals, onNavigate,
 }
 var CONTENT_STAGE_WIDTH = 480;
 var NO_ORBITALS = [];
+var LazyPageOfRegisteredProgram = createContext(false);
 function FitToBox({ children, mode = "box" }) {
   const outerRef = useRef(null);
   const innerRef = useRef(null);
@@ -1833,7 +1866,7 @@ function OrbPreview({
     if (localFallback) return;
     setLocalFallback(true);
   }, [localFallback]);
-  const hasOuterBridge = useHasServerBridge();
+  const isLazyPageOfRegisteredProgram = useContext(LazyPageOfRegisteredProgram);
   const parseResult = useMemo(() => {
     let parsed;
     if (typeof schema === "string") {
@@ -2025,13 +2058,13 @@ function OrbPreview({
     navLog.info("interceptor:installed", { pageCount: pages.length, paths: pages.map((p) => p.page.path) });
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate, isolated, hostHrefBase]);
-  const withBridge = (node) => (serverUrl || transport) && !hasOuterBridge ? /* @__PURE__ */ jsx(ServerBridgeProvider, { schema: parseResult.schema, serverUrl, transport, getAccessToken, children: node }) : node;
+  const withBridge = (node) => (serverUrl || transport) && !isLazyPageOfRegisteredProgram ? /* @__PURE__ */ jsx(ServerBridgeProvider, { schema: parseResult.schema, serverUrl, transport, getAccessToken, children: node }) : node;
   if (lazyRoute) {
     return withBridge(
       /* @__PURE__ */ jsxs(Box, { ref: containerRef, className: `overflow-auto ${className ?? ""}`, style: { height }, children: [
         lazyLoad.status === "loading" && /* @__PURE__ */ jsx(LoadingState, {}),
         lazyLoad.status === "error" && /* @__PURE__ */ jsx(ErrorState, { "data-testid": "lazy-page-error", message: lazyLoad.error }),
-        lazyLoad.status === "ready" && /* @__PURE__ */ jsx(
+        lazyLoad.status === "ready" && /* @__PURE__ */ jsx(LazyPageOfRegisteredProgram.Provider, { value: true, children: /* @__PURE__ */ jsx(
           OrbPreview,
           {
             schema: lazyLoad.schema,
@@ -2051,7 +2084,7 @@ function OrbPreview({
             onUnmatchedNavigate: handleNavigate
           },
           lazyRoute.page.orbRef
-        )
+        ) })
       ] })
     );
   }
@@ -2148,21 +2181,28 @@ function BrowserPlayground({
       runtime.resumeTicks();
     }
   }, [runtime, paused]);
-  const registrationReady = useMemo(() => {
-    const orbitalNames = schema.orbitals.map((o) => o.name);
-    playgroundLog.debug("register:start", { schema: schema.name, orbitalNames });
+  const lazySchemas = useMemo(() => {
     const lazyPages = schema.lazyPages ?? [];
-    const lazy = lazyPages.length > 0 && lazyLoader !== void 0 ? Promise.all(lazyPages.map(async (page) => {
+    if (lazyPages.length === 0 || lazyLoader === void 0) return Promise.resolve([]);
+    return Promise.all(lazyPages.map(async (page) => {
       const loaded = await loadLazyPage(lazyLoader, page, schemaPath);
       if (!loaded.success) throw new Error(loaded.error);
       return loaded.data;
-    })) : Promise.resolve([]);
-    return lazy.then(
-      (lazySchemas) => runtime.register(schema, { ...messages !== void 0 ? { messages } : {}, lazy: lazySchemas })
-    ).then(() => {
-      playgroundLog.debug("register:done", { schema: schema.name, orbitalNames });
+    }));
+  }, [schema.lazyPages, lazyLoader, schemaPath]);
+  const registerProgram = useCallback((program) => {
+    const orbitalNames = program.orbitals.map((o) => o.name);
+    playgroundLog.debug("register:start", { schema: program.name, orbitalNames });
+    return lazySchemas.then((lazy) => runtime.register(program, { ...messages !== void 0 ? { messages } : {}, lazy })).then(() => {
+      playgroundLog.debug("register:done", { schema: program.name, orbitalNames });
     });
-  }, [runtime, schema, messages, lazyLoader, schemaPath]);
+  }, [runtime, lazySchemas, messages]);
+  const latestRegistration = useRef(Promise.resolve());
+  const registrationReady = useMemo(() => {
+    const ready = registerProgram(schema);
+    latestRegistration.current = ready;
+    return ready;
+  }, [registerProgram, schema]);
   const teardownTimerRef = useRef(null);
   useEffect(() => {
     if (teardownTimerRef.current !== null) {
@@ -2180,18 +2220,22 @@ function BrowserPlayground({
   const transport = useMemo(
     () => createInProcessTransport(
       async (orbitalName, request) => {
-        await registrationReady;
+        await latestRegistration.current;
         return runtime.processOrbitalEvent(orbitalName, request);
       },
       {
-        // The program (lazy behaviors included) is registered above; the bridge only waits for it.
-        onRegister: () => registrationReady,
+        // Registers what the bridge hands over (lazy behaviors included): a bridge that unregistered first gets it back.
+        onRegister: (program) => {
+          const ready = registerProgram(program);
+          latestRegistration.current = ready;
+          return ready;
+        },
         onUnregister: () => {
           runtime.unregisterAll();
         }
       }
     ),
-    [runtime, registrationReady]
+    [runtime, registerProgram, registrationReady]
   );
   const viewerLocale = locale ?? schema.locales?.[0];
   const i18n = useMemo(() => {

package/dist/{chunk-PYJ2UQWM.js → chunk-I2ZNE5TD.js}

@@ -6850,7 +6850,7 @@ function renderVariant(variant, rows2, columns, fields, className) {
 }
 Skeleton.displayName = "Skeleton";
 var LazySlotContentRenderer = lazy(
-  () => import('./UISlotRenderer-NCGDIXN4.js').then((m) => ({
+  () => import('./UISlotRenderer-N5DFYE6K.js').then((m) => ({
     default: m.SlotContentRenderer
   }))
 );
@@ -13098,6 +13098,7 @@ var Tabs = ({
     }
   };
   const activeTabContent = safeItems.find((item) => item.id === activeTab)?.content;
+  const rendersPanel = activeTabContent !== void 0 && activeTabContent !== null;
   if (safeItems.length === 0) {
     return /* @__PURE__ */ jsx(Box, { ...domPassthrough(rest), className: cn("w-full", className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "py-4", children: t("empty.noItems") }) });
   }
@@ -13148,7 +13149,7 @@ var Tabs = ({
             id: tabId(item.id),
             role: "tab",
             "aria-selected": isActive,
-            "aria-controls": isActive ? panelId(item.id) : void 0,
+            "aria-controls": isActive && rendersPanel ? panelId(item.id) : void 0,
             "aria-disabled": isDisabled,
             tabIndex: isActive ? 0 : -1,
             onClick: () => !isDisabled && handleTabChange(item.id, item.event),
@@ -13208,7 +13209,7 @@ var Tabs = ({
         )
       ] })
     ] }) : tablist,
-    activeTabContent !== void 0 && activeTabContent !== null && /* @__PURE__ */ jsx(
+    rendersPanel && /* @__PURE__ */ jsx(
       Box,
       {
         role: "tabpanel",
@@ -26909,8 +26910,11 @@ function DataGrid({
                   children: [
                     imageField && (() => {
                       const imgUrl = resolveImageUrl(getNestedValue(itemData, imageField));
-                      if (!imgUrl) return null;
-                      return /* @__PURE__ */ jsx(Box, { className: asRows ? "w-12 h-12 flex-shrink-0 overflow-hidden rounded-container" : "w-full aspect-video overflow-hidden rounded-t-container", children: /* @__PURE__ */ jsx(
+                      const mediaClass = asRows ? "w-12 h-12 flex-shrink-0 overflow-hidden rounded-container" : "w-full aspect-video overflow-hidden rounded-t-container";
+                      if (!imgUrl) {
+                        return /* @__PURE__ */ jsx(Box, { "data-media-placeholder": true, "aria-hidden": "true", className: cn(mediaClass, "flex items-center justify-center bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsx(Icon, { name: "image", size: asRows ? "sm" : "lg" }) });
+                      }
+                      return /* @__PURE__ */ jsx(Box, { className: mediaClass, children: /* @__PURE__ */ jsx(
                         "img",
                         {
                           src: imgUrl,
@@ -26943,7 +26947,7 @@ function DataGrid({
                                 Typography,
                                 {
                                   variant: titleField?.variant === "h3" && !asRows ? "h3" : "h4",
-                                  className: "font-semibold truncate min-w-0",
+                                  className: cn("font-semibold min-w-0", asRows ? "truncate" : "line-clamp-2 break-words"),
                                   children: titleDisplay
                                 }
                               )
@@ -27027,6 +27031,19 @@ function DataGrid({
   ));
 }
 DataGrid.displayName = "DataGrid";
+
+// lib/groupRows.ts
+function groupRows(items, field, format, fmt2 = {}) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const raw = getNestedValue(item, field);
+    const key = format ? formatValue(raw ?? void 0, format, fmt2) : String(raw ?? "");
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
 var dataListLog = createLogger("almadar:ui:data-list");
 function renderIconInput2(icon, props) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
@@ -27037,16 +27054,6 @@ function formatValue2(value, format, fmt2, relationOptions) {
   if (relationDisplay !== void 0) return relationDisplay;
   return formatValue(value, format, fmt2);
 }
-function groupData(items, field) {
-  const groups = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const key = String(getNestedValue(item, field) ?? "");
-    const group = groups.get(key);
-    if (group) group.push(item);
-    else groups.set(key, [item]);
-  }
-  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
-}
 var listLookStyles = {
   dense: "[&_[data-entity-row]>div]:!py-1 [&_[data-entity-row]>div]:!px-3",
   spacious: "[&_[data-entity-row]>div]:!py-5 [&_[data-entity-row]>div]:!px-8",
@@ -27064,6 +27071,7 @@ function DataList({
   gap = "none",
   variant = "default",
   groupBy,
+  groupFormat,
   senderField,
   senderLabelField,
   currentUser,
@@ -27171,9 +27179,9 @@ function DataList({
     e.stopPropagation();
     fireRowAction(action, itemData, String(itemData.id ?? ""));
   };
-  const renderItemActions = (itemData, onPrimary = false) => {
+  const renderItemActions = (itemData, onPrimary = false, only) => {
     if (!itemActions || itemActions.length === 0) return null;
-    const shown = rowActions(itemActions, itemData);
+    const shown = only ?? rowActions(itemActions, itemData);
     if (shown.length === 0) return null;
     const inline = maxInlineActions != null ? shown.slice(0, maxInlineActions) : shown;
     const overflow = maxInlineActions != null ? shown.slice(maxInlineActions) : [];
@@ -27257,7 +27265,7 @@ function DataList({
   const isMessage = variant === "message";
   if (isMessage) {
     const items2 = [...data];
-    const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
+    const groups2 = groupBy ? groupRows(items2, groupBy, groupFormat, fmt2) : [{ label: "", items: items2 }];
     const contentField = (fieldDefs.find((f3) => f3.variant === "body") ?? titleField)?.name ?? "";
     const senderLabel = (itemData, raw) => {
       if (!senderLabelField) return raw;
@@ -27354,7 +27362,7 @@ function DataList({
     ] });
   }
   const items = [...data];
-  const groups = groupBy ? groupData(items, groupBy) : [{ label: "", items }];
+  const groups = groupBy ? groupRows(items, groupBy, groupFormat, fmt2) : [{ label: "", items }];
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
@@ -27365,7 +27373,11 @@ function DataList({
     const divider = (isCard || isCompact) && !isLast ? /* @__PURE__ */ jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") }) : null;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
-      const actions = renderItemActions(itemData);
+      const allActions = itemActions ? rowActions(itemActions, itemData) : [];
+      const primaryActions = allActions.filter((a) => a.variant === "primary");
+      const otherActions = allActions.filter((a) => a.variant !== "primary");
+      const primary = primaryActions.length > 0 ? renderItemActions(itemData, false, primaryActions) : null;
+      const actions = otherActions.length > 0 ? renderItemActions(itemData, false, otherActions) : null;
       return wrapDnd(
         /* @__PURE__ */ jsxs(
           Box,
@@ -27386,6 +27398,7 @@ function DataList({
                 }
               ),
               /* @__PURE__ */ jsx(Box, { className: cn(onOpen && "relative"), children: itemRenderer(itemData, index) }),
+              primary && /* @__PURE__ */ jsx(HStack, { justify: "end", className: cn("relative px-4 pb-3", STRETCHED_ABOVE), children: primary }),
               actions && /* @__PURE__ */ jsxs(Box, { onClick: (e) => e.stopPropagation(), className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
                 /* @__PURE__ */ jsx(Box, { className: "rounded-container border border-border bg-card/95 backdrop-blur-sm shadow-elevation-popover surface-material p-0.5 [@media(pointer:coarse)]:hidden", children: actions }),
                 /* @__PURE__ */ jsx(Box, { className: "hidden [@media(pointer:coarse)]:block rounded-container border border-border bg-card/95 backdrop-blur-sm shadow-elevation-popover surface-material p-0.5", children: /* @__PURE__ */ jsx(
@@ -27393,7 +27406,7 @@ function DataList({
                   {
                     position: "bottom-end",
                     trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                    items: rowActions(itemActions ?? [], itemData).map((action) => ({
+                    items: otherActions.map((action) => ({
                       label: action.label,
                       icon: action.icon,
                       variant: action.variant === "danger" ? "danger" : "default",
@@ -28564,16 +28577,6 @@ var formatCell = (value, format, relationOptions, fmt2) => {
   if (relationDisplay !== void 0) return relationDisplay;
   return formatValue(value, format, fmt2);
 };
-function groupData2(items, field) {
-  const groups = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const key = String(getNestedValue(item, field) ?? "");
-    const group = groups.get(key);
-    if (group) group.push(item);
-    else groups.set(key, [item]);
-  }
-  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
-}
 var MAX_MEASURED_COL_CH = 32;
 var BADGE_CHROME_CH = 4;
 var alignClass = {
@@ -28903,7 +28906,7 @@ function TableView({
     return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React93__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
-  const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
+  const groups = groupBy ? groupRows(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
   const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React93__default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),

package/dist/components/index.cjs

@@ -10934,6 +10934,7 @@ var init_Tabs = __esm({
         }
       };
       const activeTabContent = safeItems.find((item) => item.id === activeTab)?.content;
+      const rendersPanel = activeTabContent !== void 0 && activeTabContent !== null;
       if (safeItems.length === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { ...domPassthrough(rest), className: cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "muted", className: "py-4", children: t("empty.noItems") }) });
       }
@@ -10984,7 +10985,7 @@ var init_Tabs = __esm({
                 id: tabId(item.id),
                 role: "tab",
                 "aria-selected": isActive,
-                "aria-controls": isActive ? panelId(item.id) : void 0,
+                "aria-controls": isActive && rendersPanel ? panelId(item.id) : void 0,
                 "aria-disabled": isDisabled,
                 tabIndex: isActive ? 0 : -1,
                 onClick: () => !isDisabled && handleTabChange(item.id, item.event),
@@ -11044,7 +11045,7 @@ var init_Tabs = __esm({
             )
           ] })
         ] }) : tablist,
-        activeTabContent !== void 0 && activeTabContent !== null && /* @__PURE__ */ jsxRuntime.jsx(
+        rendersPanel && /* @__PURE__ */ jsxRuntime.jsx(
           exports.Box,
           {
             role: "tabpanel",
@@ -32212,8 +32213,11 @@ function DataGrid({
                   children: [
                     imageField && (() => {
                       const imgUrl = resolveImageUrl(core.getNestedValue(itemData, imageField));
-                      if (!imgUrl) return null;
-                      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: asRows ? "w-12 h-12 flex-shrink-0 overflow-hidden rounded-container" : "w-full aspect-video overflow-hidden rounded-t-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      const mediaClass = asRows ? "w-12 h-12 flex-shrink-0 overflow-hidden rounded-container" : "w-full aspect-video overflow-hidden rounded-t-container";
+                      if (!imgUrl) {
+                        return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { "data-media-placeholder": true, "aria-hidden": "true", className: cn(mediaClass, "flex items-center justify-center bg-muted text-muted-foreground"), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "image", size: asRows ? "sm" : "lg" }) });
+                      }
+                      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: mediaClass, children: /* @__PURE__ */ jsxRuntime.jsx(
                         "img",
                         {
                           src: imgUrl,
@@ -32246,7 +32250,7 @@ function DataGrid({
                                 exports.Typography,
                                 {
                                   variant: titleField?.variant === "h3" && !asRows ? "h3" : "h4",
-                                  className: "font-semibold truncate min-w-0",
+                                  className: cn("font-semibold min-w-0", asRows ? "truncate" : "line-clamp-2 break-words"),
                                   children: titleDisplay
                                 }
                               )
@@ -32375,24 +32379,33 @@ var init_DataGrid = __esm({
     DataGrid.displayName = "DataGrid";
   }
 });
-function renderIconInput2(icon, props) {
-  return typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, ...props });
-}
-function formatValue2(value, format, fmt2, relationOptions) {
-  const relationDisplay = resolveRelationCellDisplay(value, relationOptions);
-  if (relationDisplay !== void 0) return relationDisplay;
-  return formatValue(value, format, fmt2);
-}
-function groupData(items, field) {
+
+// lib/groupRows.ts
+function groupRows(items, field, format, fmt2 = {}) {
   const groups = /* @__PURE__ */ new Map();
   for (const item of items) {
-    const key = String(core.getNestedValue(item, field) ?? "");
+    const raw = core.getNestedValue(item, field);
+    const key = format ? formatValue(raw ?? void 0, format, fmt2) : String(raw ?? "");
     const group = groups.get(key);
     if (group) group.push(item);
     else groups.set(key, [item]);
   }
   return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
 }
+var init_groupRows = __esm({
+  "lib/groupRows.ts"() {
+    init_format();
+    init_getNestedValue();
+  }
+});
+function renderIconInput2(icon, props) {
+  return typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, ...props });
+}
+function formatValue2(value, format, fmt2, relationOptions) {
+  const relationDisplay = resolveRelationCellDisplay(value, relationOptions);
+  if (relationDisplay !== void 0) return relationDisplay;
+  return formatValue(value, format, fmt2);
+}
 function DataList({
   entity,
   fields,
@@ -32403,6 +32416,7 @@ function DataList({
   gap = "none",
   variant = "default",
   groupBy,
+  groupFormat,
   senderField,
   senderLabelField,
   currentUser,
@@ -32510,9 +32524,9 @@ function DataList({
     e.stopPropagation();
     fireRowAction(action, itemData, String(itemData.id ?? ""));
   };
-  const renderItemActions = (itemData, onPrimary = false) => {
+  const renderItemActions = (itemData, onPrimary = false, only) => {
     if (!itemActions || itemActions.length === 0) return null;
-    const shown = rowActions(itemActions, itemData);
+    const shown = only ?? rowActions(itemActions, itemData);
     if (shown.length === 0) return null;
     const inline = maxInlineActions != null ? shown.slice(0, maxInlineActions) : shown;
     const overflow = maxInlineActions != null ? shown.slice(maxInlineActions) : [];
@@ -32596,7 +32610,7 @@ function DataList({
   const isMessage = variant === "message";
   if (isMessage) {
     const items2 = [...data];
-    const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
+    const groups2 = groupBy ? groupRows(items2, groupBy, groupFormat, fmt2) : [{ label: "", items: items2 }];
     const contentField = (fieldDefs.find((f3) => f3.variant === "body") ?? titleField)?.name ?? "";
     const senderLabel = (itemData, raw) => {
       if (!senderLabelField) return raw;
@@ -32693,7 +32707,7 @@ function DataList({
     ] });
   }
   const items = [...data];
-  const groups = groupBy ? groupData(items, groupBy) : [{ label: "", items }];
+  const groups = groupBy ? groupRows(items, groupBy, groupFormat, fmt2) : [{ label: "", items }];
   const idFieldName = dndItemIdField ?? "id";
   const renderItem = (itemData, index, isLast) => {
     const dndId = itemData[idFieldName] ?? `__idx_${index}`;
@@ -32704,7 +32718,11 @@ function DataList({
     const divider = (isCard || isCompact) && !isLast ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") }) : null;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
-      const actions = renderItemActions(itemData);
+      const allActions = itemActions ? rowActions(itemActions, itemData) : [];
+      const primaryActions = allActions.filter((a) => a.variant === "primary");
+      const otherActions = allActions.filter((a) => a.variant !== "primary");
+      const primary = primaryActions.length > 0 ? renderItemActions(itemData, false, primaryActions) : null;
+      const actions = otherActions.length > 0 ? renderItemActions(itemData, false, otherActions) : null;
       return wrapDnd(
         /* @__PURE__ */ jsxRuntime.jsxs(
           exports.Box,
@@ -32725,6 +32743,7 @@ function DataList({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn(onOpen && "relative"), children: itemRenderer(itemData, index) }),
+              primary && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { justify: "end", className: cn("relative px-4 pb-3", STRETCHED_ABOVE), children: primary }),
               actions && /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { onClick: (e) => e.stopPropagation(), className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "rounded-container border border-border bg-card/95 backdrop-blur-sm shadow-elevation-popover surface-material p-0.5 [@media(pointer:coarse)]:hidden", children: actions }),
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "hidden [@media(pointer:coarse)]:block rounded-container border border-border bg-card/95 backdrop-blur-sm shadow-elevation-popover surface-material p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -32732,7 +32751,7 @@ function DataList({
                   {
                     position: "bottom-end",
                     trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "more-horizontal", size: "xs" }) }),
-                    items: rowActions(itemActions ?? [], itemData).map((action) => ({
+                    items: otherActions.map((action) => ({
                       label: action.label,
                       icon: action.icon,
                       variant: action.variant === "danger" ? "danger" : "default",
@@ -32923,6 +32942,7 @@ var init_DataList = __esm({
     init_format();
     init_relationLabel();
     init_getNestedValue();
+    init_groupRows();
     init_useEventBus();
     init_useRowActions();
     init_Box();
@@ -34016,16 +34036,6 @@ function asFieldValue(v) {
   if (t === "object") return v;
   return void 0;
 }
-function groupData2(items, field) {
-  const groups = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const key = String(core.getNestedValue(item, field) ?? "");
-    const group = groups.get(key);
-    if (group) group.push(item);
-    else groups.set(key, [item]);
-  }
-  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
-}
 function TableView({
   entity,
   columns,
@@ -34336,7 +34346,7 @@ function TableView({
     return dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsxRuntime.jsx(React89__namespace.default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
-  const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
+  const groups = groupBy ? groupRows(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
   const body = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React89__namespace.default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsxRuntime.jsx(exports.Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
@@ -34375,6 +34385,7 @@ var init_TableView = __esm({
     init_format();
     init_relationLabel();
     init_getNestedValue();
+    init_groupRows();
     init_useEventBus();
     init_useRowActions();
     init_Box();