@almadar/ui 5.154.0 → 5.156.0

package/dist/avl/index.cjs

@@ -11609,10 +11609,21 @@ function ControlGrid({
   directionAssets,
   size = "md",
   disabled,
+  visibility = "auto",
   className
 }) {
   const eventBus = useEventBus();
   const [active, setActive] = React94__namespace.useState(/* @__PURE__ */ new Set());
+  const [coarse, setCoarse] = React94__namespace.useState(
+    () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches
+  );
+  React94__namespace.useEffect(() => {
+    if (visibility !== "auto" || typeof window === "undefined") return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const onChange = (e) => setCoarse(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [visibility]);
   const handlePress = React94__namespace.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
@@ -11645,6 +11656,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, directionReleaseEvents, eventBus, onAction, onDirection]
   );
+  if (visibility === "auto" && !coarse) return null;
   if (kind === "dpad") {
     const ds = dpadSizeMap[size];
     const dir = (d) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -11794,7 +11806,7 @@ function StatBadge({
   assetUrl,
   iconUrl,
   label,
-  value = 0,
+  value,
   max,
   format = "number",
   icon,
@@ -11805,6 +11817,7 @@ function StatBadge({
   source: _source,
   field: _field
 }) {
+  const hasValue = value !== void 0 && value !== null;
   const numValue = typeof value === "number" ? value : parseInt(String(value), 10) || 0;
   const resolvedAsset = iconUrl ?? assetUrl;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11818,8 +11831,8 @@ function StatBadge({
       ),
       children: [
         resolvedAsset ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: resolvedAsset, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground font-medium", children: label }),
-        format === "hearts" && max && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground font-medium text-xs", children: label }),
+        hasValue && format === "hearts" && max && /* @__PURE__ */ jsxRuntime.jsx(
           HealthBar,
           {
             current: numValue,
@@ -11828,7 +11841,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "bar" && max && /* @__PURE__ */ jsxRuntime.jsx(
+        hasValue && format === "bar" && max && /* @__PURE__ */ jsxRuntime.jsx(
           HealthBar,
           {
             current: numValue,
@@ -11837,14 +11850,15 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "number" && /* @__PURE__ */ jsxRuntime.jsx(
+        hasValue && format === "number" && /* @__PURE__ */ jsxRuntime.jsx(
           ScoreDisplay,
           {
             value: numValue,
-            size: size === "lg" ? "md" : "sm"
+            size: size === "lg" ? "md" : "sm",
+            className: "font-display"
           }
         ),
-        format === "text" && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
+        hasValue && format === "text" && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -11860,6 +11874,7 @@ var init_StatBadge = __esm({
     init_HealthBar();
     init_ScoreDisplay();
     sizeMap6 = {
+      xs: "text-xs px-1.5 py-0.5",
       sm: "text-xs px-2 py-1",
       md: "text-sm px-3 py-1.5",
       lg: "text-base px-4 py-2"
@@ -11902,6 +11917,7 @@ function GameHud({
   items,
   elements,
   size = "md",
+  variant = "floating",
   className,
   transparent = true
 }) {
@@ -11916,7 +11932,7 @@ function GameHud({
       /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
-  if (position === "top" || position === "bottom") {
+  if ((position === "top" || position === "bottom") && variant === "bar") {
     const mid = Math.ceil(stats.length / 2);
     const leftStats = stats.slice(0, mid);
     const rightStats = stats.slice(mid);
@@ -15137,7 +15153,7 @@ var init_StateJsonView = __esm({
     StateJsonView.displayName = "StateJsonView";
   }
 });
-var FONT_BASE, GAME_FONTS, FONT_FACES, GameShell;
+var GAME_FONTS, GameShell;
 var init_GameShell = __esm({
   "components/game/templates/GameShell.tsx"() {
     init_cn();
@@ -15145,7 +15161,6 @@ var init_GameShell = __esm({
     init_Card();
     init_Typography();
     init_AtlasImage();
-    FONT_BASE = "https://almadar-kflow-assets.web.app/shared/_shared/kenney-fonts/fonts";
     GAME_FONTS = {
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
@@ -15153,14 +15168,6 @@ var init_GameShell = __esm({
       blocks: "Kenney Blocks",
       mini: "Kenney Mini"
     };
-    FONT_FACES = `
-@font-face { font-family: 'Kenney Future'; src: url('${FONT_BASE}/Kenney%20Future.ttf') format('truetype'); font-display: swap; }
-@font-face { font-family: 'Kenney Future Narrow'; src: url('${FONT_BASE}/Kenney%20Future%20Narrow.ttf') format('truetype'); font-display: swap; }
-@font-face { font-family: 'Kenney Pixel'; src: url('${FONT_BASE}/Kenney%20Pixel.ttf') format('truetype'); font-display: swap; }
-@font-face { font-family: 'Kenney Blocks'; src: url('${FONT_BASE}/Kenney%20Blocks.ttf') format('truetype'); font-display: swap; }
-@font-face { font-family: 'Kenney Mini'; src: url('${FONT_BASE}/Kenney%20Mini.ttf') format('truetype'); font-display: swap; }
-.game-shell, .game-shell * { font-family: inherit; }
-`;
     GameShell = ({
       appName = "Game",
       hud,
@@ -15187,10 +15194,12 @@ var init_GameShell = __esm({
             overflow: "hidden",
             background: "var(--color-background, #0a0a0f)",
             color: "var(--color-foreground, #e0e0e0)",
-            fontFamily: `'${font}', system-ui, sans-serif`
+            // The fontFamily knob is a scoped override of the theme contract's
+            // display slot: titles/numerics take the game face, body text keeps
+            // the active theme's --font-family-body.
+            "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif`
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("style", { children: FONT_FACES }),
             backgroundAsset && /* @__PURE__ */ jsxRuntime.jsx(
               AtlasPanel,
               {
@@ -15228,6 +15237,7 @@ var init_GameShell = __esm({
                         Typography,
                         {
                           as: "span",
+                          className: "font-display",
                           style: {
                             fontWeight: 700,
                             fontSize: "1.05rem",
@@ -15308,6 +15318,11 @@ var init_molecules = __esm({
     init_puzzleObject();
   }
 });
+function themeBodyFont(el) {
+  if (typeof getComputedStyle !== "function") return "system-ui, sans-serif";
+  const v = getComputedStyle(el).getPropertyValue("--font-family-body").trim();
+  return v || "system-ui, sans-serif";
+}
 function resolveColor2(color, ctx, fallback) {
   if (!color) return fallback;
   if (color.startsWith("var(")) {
@@ -15507,7 +15522,7 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "text": {
       if (shape.x == null || shape.y == null || !shape.text) break;
       ctx.fillStyle = stroke;
-      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
+      ctx.font = `${shape.fontSize ?? 14}px ${themeBodyFont(ctx.canvas)}`;
       ctx.textAlign = shape.align ?? "left";
       ctx.textBaseline = "middle";
       ctx.fillText(shape.text, shape.x, shape.y);
@@ -24031,7 +24046,22 @@ function eventStartDate(event, startField) {
   const raw = getNestedValue(event, startField);
   return new Date(raw ?? "");
 }
-function generateDefaultTimeSlots(events2, startField) {
+function eventEndDate(event, endField) {
+  const raw = getNestedValue(event, endField);
+  if (raw === void 0 || raw === null || raw === "") return null;
+  const end = new Date(raw);
+  return Number.isNaN(end.getTime()) ? null : end;
+}
+function eventContinuesInSlot(event, day, slotTime, startField, endField) {
+  const eventStart = eventStartDate(event, startField);
+  const eventEnd = eventEndDate(event, endField);
+  if (eventEnd === null || Number.isNaN(eventStart.getTime())) return false;
+  const [slotHour] = slotTime.split(":").map(Number);
+  const slotStart = new Date(day);
+  slotStart.setHours(slotHour, 0, 0, 0);
+  return slotStart.getTime() > eventStart.getTime() && slotStart.getTime() < eventEnd.getTime();
+}
+function generateDefaultTimeSlots(events2, startField, endField) {
   let first = DEFAULT_FIRST_HOUR;
   let last = DEFAULT_LAST_HOUR;
   for (const ev of events2) {
@@ -24040,6 +24070,11 @@ function generateDefaultTimeSlots(events2, startField) {
     const hour = start.getHours();
     if (hour < first) first = hour;
     if (hour > last) last = hour;
+    const end = eventEndDate(ev, endField);
+    if (end && end.toDateString() === start.toDateString()) {
+      const endHour = end.getMinutes() === 0 && end.getSeconds() === 0 ? end.getHours() - 1 : end.getHours();
+      if (endHour > last) last = endHour;
+    }
   }
   const slots = [];
   for (let hour = first; hour <= last; hour++) {
@@ -24068,6 +24103,7 @@ function CalendarGrid({
   dayWindow = "auto",
   titleField = "title",
   startField = "startTime",
+  endField = "endTime",
   colorField = "color",
   children,
   renderItem
@@ -24085,8 +24121,8 @@ function CalendarGrid({
     [resolvedWeekStart]
   );
   const resolvedTimeSlots = React94.useMemo(
-    () => timeSlots ?? generateDefaultTimeSlots(evs, startField),
-    [timeSlots, evs, startField]
+    () => timeSlots ?? generateDefaultTimeSlots(evs, startField, endField),
+    [timeSlots, evs, startField, endField]
   );
   const visibleCount = useDayWindow(dayWindow);
   const [dayOffset, setDayOffset] = React94.useState(0);
@@ -24246,12 +24282,15 @@ function CalendarGrid({
                   const slotEvents = evs.filter(
                     (ev) => eventInSlot(ev, day, time, startField)
                   );
+                  const continuingEvents = evs.filter(
+                    (ev) => eventContinuesInSlot(ev, day, time, startField, endField)
+                  );
                   const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     TimeSlotCell,
                     {
                       time,
-                      isOccupied: slotEvents.length > 0,
+                      isOccupied: slotEvents.length > 0 || continuingEvents.length > 0,
                       onClick: () => handleSlotClick(day, time),
                       className: cn(
                         "border-l border-border",
@@ -24262,7 +24301,25 @@ function CalendarGrid({
                         onPointerUp: clearLongPress,
                         onPointerCancel: clearLongPress
                       } : {},
-                      children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+                        slotEvents.map(renderEvent),
+                        continuingEvents.map((event) => {
+                          const color = getNestedValue(event, colorField);
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            Box,
+                            {
+                              rounded: "sm",
+                              border: true,
+                              className: cn(
+                                "cursor-pointer h-2",
+                                color ? cn(color, "opacity-50") : "bg-primary/10 border-primary/20"
+                              ),
+                              onClick: (e) => handleEventClick(event, e)
+                            },
+                            `${event.id}-cont`
+                          );
+                        })
+                      ] })
                     },
                     `${day.toISOString()}-${time}`
                   );
@@ -34321,13 +34378,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect65, useRef: useRef65, useCallback: useCallback96, useState: useState100 } = React94__namespace.default;
+      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState100 } = React94__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef65({ centerLat, centerLng, zoom });
-        useEffect65(() => {
+        useEffect67(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -34338,7 +34395,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect65(() => {
+        useEffect67(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -34867,14 +34924,34 @@ var init_UploadDropZone = __esm({
           if (valid.length > 0) {
             onFiles?.(valid);
             if (action) {
-              eventBus.emit(`UI:${action}`, {
-                ...actionPayload,
-                files: valid.map((f3) => ({ name: f3.name, size: f3.size, type: f3.type }))
+              void Promise.all(
+                valid.map(
+                  (f3) => new Promise(
+                    (resolvePayload, rejectPayload) => {
+                      const reader = new FileReader();
+                      reader.onload = () => resolvePayload({
+                        name: f3.name,
+                        size: f3.size,
+                        type: f3.type,
+                        content: String(reader.result ?? "")
+                      });
+                      reader.onerror = () => rejectPayload(reader.error);
+                      reader.readAsDataURL(f3);
+                    }
+                  )
+                )
+              ).then((payloadFiles) => {
+                eventBus.emit(`UI:${action}`, {
+                  ...actionPayload,
+                  files: payloadFiles
+                });
+              }).catch(() => {
+                setError(t("Could not read the selected file"));
               });
             }
           }
         },
-        [validateFiles, onFiles, action, actionPayload, eventBus]
+        [validateFiles, onFiles, action, actionPayload, eventBus, t]
       );
       const handleDragOver = (e) => {
         e.preventDefault();
@@ -43982,22 +44059,6 @@ var init_DataTable = __esm({
     DataTable.displayName = "DataTable";
   }
 });
-function getFieldIcon(fieldName) {
-  const name = fieldName.toLowerCase();
-  if (name.includes("date") || name.includes("time")) return LucideIcons2.Calendar;
-  if (name.includes("status")) return LucideIcons2.Tag;
-  if (name.includes("priority")) return LucideIcons2.AlertCircle;
-  if (name.includes("progress") || name.includes("percent")) return LucideIcons2.TrendingUp;
-  if (name.includes("assignee") || name.includes("owner") || name.includes("user") || name.includes("member"))
-    return LucideIcons2.User;
-  if (name.includes("due")) return LucideIcons2.Clock;
-  if (name.includes("complete")) return LucideIcons2.CheckCircle2;
-  if (name.includes("budget") || name.includes("cost") || name.includes("price"))
-    return LucideIcons2.DollarSign;
-  if (name.includes("description") || name.includes("note") || name.includes("comment"))
-    return LucideIcons2.FileText;
-  return LucideIcons2.Package;
-}
 function getBadgeVariant(fieldName, value) {
   const name = fieldName.toLowerCase();
   const val = String(value).toLowerCase();
@@ -44047,6 +44108,18 @@ function renderRichFieldValue(value, fieldName, fieldType, meta) {
           }
         ) });
       }
+      if (fieldType === "url" && /^https?:\/\//i.test(str)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: str,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "text-primary hover:underline break-all",
+            children: str
+          }
+        );
+      }
       return str;
     }
     case "markdown":
@@ -44145,6 +44218,23 @@ function renderRichFieldValue(value, fieldName, fieldType, meta) {
       }
       return str;
     }
+    case "boolean": {
+      if (typeof value === "boolean") return value ? "Yes" : "No";
+      if (str === "true") return "Yes";
+      if (str === "false") return "No";
+      return str;
+    }
+    case "array": {
+      if (Array.isArray(value) && value.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", wrap: true, children: value.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", children: String(item) }, i)) });
+      }
+      if (Array.isArray(value)) return "\u2014";
+      return str;
+    }
+    case "email":
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${str}`, className: "text-primary hover:underline break-all", children: str });
+    case "phone":
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${str}`, className: "text-primary hover:underline", children: str });
     default:
       if (meta?.values && meta.values.length > 0 && meta.values.includes(str)) {
         return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getBadgeVariant(fieldName, str), children: humanizeEnumValue(str) });
@@ -44217,10 +44307,11 @@ var init_DetailPanel = __esm({
       avatar,
       sections: propSections,
       actions,
-      maxInlineActions,
+      maxInlineActions = 2,
       backAction,
       footer,
       slideOver = false,
+      showActions = true,
       className,
       entity,
       fields: propFields,
@@ -44268,9 +44359,6 @@ var init_DetailPanel = __esm({
         },
         [eventBus]
       );
-      const handleClose = React94.useCallback(() => {
-        eventBus.emit("UI:CLOSE", {});
-      }, [eventBus]);
       const entityRecord = Array.isArray(entity) ? entity[0] : entity;
       const data = entityRecord ?? initialData;
       let title = propTitle;
@@ -44284,8 +44372,7 @@ var init_DetailPanel = __esm({
               const value = getNestedValue(normalizedData, field);
               return {
                 label: labelFor(field),
-                value: formatFieldValue2(value, field),
-                icon: getFieldIcon(field)
+                value: formatFieldValue2(value, field)
               };
             }
             return field;
@@ -44319,15 +44406,14 @@ var init_DetailPanel = __esm({
           (f3) => (!titleDerivedFromPrimary || f3 !== primaryField) && !statusFields.includes(f3) && !progressFields.includes(f3) && !metricFields.includes(f3) && !dateFields.includes(f3) && !descriptionFields.includes(f3)
         );
         sections = [];
-        if (statusFields.length > 0 || otherFields.length > 0) {
+        if (otherFields.length > 0) {
           const overviewFields = [];
-          [...statusFields, ...otherFields].forEach((field) => {
+          otherFields.forEach((field) => {
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               overviewFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
-                icon: getFieldIcon(field)
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field))
               });
             }
           });
@@ -44342,8 +44428,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               metricsFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
-                icon: getFieldIcon(field)
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field))
               });
             }
           });
@@ -44358,8 +44443,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               timelineFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
-                icon: getFieldIcon(field)
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field))
               });
             }
           });
@@ -44374,8 +44458,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               descFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
-                icon: getFieldIcon(field)
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field))
               });
             }
           });
@@ -44384,6 +44467,15 @@ var init_DetailPanel = __esm({
           }
         }
       }
+      const renderSlot = providers.useRenderSlot();
+      const navStack = providers.useNavStack();
+      const { setCurrentLabel } = navStack;
+      const resolvedTitle = normalizedData ? title : void 0;
+      React94.useEffect(() => {
+        if (renderSlot === "main" && !slideOver && resolvedTitle) {
+          setCurrentLabel(resolvedTitle);
+        }
+      }, [renderSlot, slideOver, resolvedTitle, setCurrentLabel]);
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           LoadingState,
@@ -44422,8 +44514,7 @@ var init_DetailPanel = __esm({
               const value = normalizedData ? getNestedValue(normalizedData, field) : void 0;
               allFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
-                icon: getFieldIcon(field)
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field))
               });
             } else {
               allFields.push(field);
@@ -44435,24 +44526,50 @@ var init_DetailPanel = __esm({
         (a) => a.event === "CLOSE" || a.event === "CANCEL" || a.label?.toLowerCase() === "close"
       );
       const otherActions = actions?.filter((a) => a !== closeAction) ?? [];
-      const effectiveCloseAction = closeAction ?? { event: void 0};
-      const content = /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", className: "p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "between", align: "center", gap: "xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "xs", children: backAction && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+      const statusBadges = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
+          (f3) => f3.toLowerCase().includes("status") || f3.toLowerCase().includes("priority")
+        ).map((field) => {
+          const value = getNestedValue(normalizedData, field);
+          if (!value) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
             {
-              variant: backAction.variant || "ghost",
-              size: "sm",
-              action: backAction.navigatesTo ? void 0 : backAction.event,
-              actionPayload: { row: normalizedData },
-              onClick: backAction.navigatesTo ? () => handleActionClick(backAction, normalizedData) : void 0,
-              icon: backAction.icon ?? LucideIcons2.ArrowLeft,
-              "data-testid": backAction.event ? `action-${backAction.event}` : "action-back",
-              children: backAction.label
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "end", align: "center", gap: "xs", children: [
-            (maxInlineActions != null ? otherActions.slice(0, maxInlineActions) : otherActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              variant: getBadgeVariant(field, String(value)),
+              children: humanizeEnumValue(String(value))
+            },
+            field
+          );
+        }),
+        status && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: status.variant ?? "default", children: status.label })
+      ] });
+      const content = /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "between", align: "start", gap: "md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", gap: "sm", className: "min-w-0", children: [
+            backAction && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: backAction.variant || "ghost",
+                size: "sm",
+                action: backAction.navigatesTo ? void 0 : backAction.event,
+                actionPayload: { row: normalizedData },
+                onClick: backAction.navigatesTo ? () => handleActionClick(backAction, normalizedData) : void 0,
+                icon: backAction.icon ?? LucideIcons2.ArrowLeft,
+                "data-testid": backAction.event ? `action-${backAction.event}` : "action-back",
+                children: backAction.label
+              }
+            ),
+            avatar,
+            /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "sm", wrap: true, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+                statusBadges
+              ] }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: subtitle })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "end", align: "center", gap: "xs", className: "shrink-0", children: [
+            otherActions.slice(0, maxInlineActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: action.variant || "secondary",
@@ -44467,7 +44584,7 @@ var init_DetailPanel = __esm({
               },
               idx
             )),
-            maxInlineActions != null && otherActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+            otherActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
               Menu,
               {
                 position: "bottom-end",
@@ -44483,40 +44600,20 @@ var init_DetailPanel = __esm({
                 }))
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            closeAction && /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
-                action: effectiveCloseAction.event,
+                action: closeAction.event,
                 actionPayload: { row: normalizedData },
-                onClick: effectiveCloseAction.event ? void 0 : handleClose,
+                onClick: closeAction.event ? void 0 : () => handleActionClick(closeAction, normalizedData),
                 icon: LucideIcons2.X,
-                "data-testid": effectiveCloseAction.event ? `action-${effectiveCloseAction.event}` : "action-close"
+                "data-testid": closeAction.event ? `action-${closeAction.event}` : "action-close"
               }
             )
           ] })
         ] }),
-        avatar,
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: subtitle }),
-        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", wrap: true, children: [
-          normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
-            (f3) => f3.toLowerCase().includes("status") || f3.toLowerCase().includes("priority")
-          ).map((field) => {
-            const value = getNestedValue(normalizedData, field);
-            if (!value) return null;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: getBadgeVariant(field, String(value)),
-                children: String(value)
-              },
-              field
-            );
-          }),
-          status && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: status.variant ?? "default", children: status.label })
-        ] }),
         normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
           (f3) => f3.toLowerCase().includes("progress") || f3.toLowerCase().includes("percent")
         ).map((field) => {
@@ -44549,9 +44646,10 @@ var init_DetailPanel = __esm({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
-                  variant: "small",
-                  color: "secondary",
+                  variant: "caption",
+                  color: "muted",
                   weight: "medium",
+                  className: "uppercase tracking-wider",
                   children: field.label
                 }
               ),
@@ -44620,7 +44718,7 @@ var init_DrawerSlot = __esm({
           position,
           width: size,
           className,
-          children
+          children: /* @__PURE__ */ jsxRuntime.jsx(providers.RenderSlotProvider, { slot: "drawer", children })
         }
       );
     };
@@ -46667,7 +46765,7 @@ var init_ModalSlot = __esm({
           title,
           size,
           className,
-          children
+          children: /* @__PURE__ */ jsxRuntime.jsx(providers.RenderSlotProvider, { slot: "modal", children })
         }
       );
     };
@@ -51089,7 +51187,10 @@ function MaybeTraitScope({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
-function UISlotComponent({
+function UISlotComponent(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(providers.RenderSlotProvider, { slot: props.slot, children: /* @__PURE__ */ jsxRuntime.jsx(UISlotComponentInner, { ...props }) });
+}
+function UISlotComponentInner({
   slot,
   portal = false,
   position,