@almadar/ui 5.155.0 → 5.156.0

package/dist/providers/index.cjs

@@ -7867,10 +7867,21 @@ function ControlGrid({
   directionAssets,
   size = "md",
   disabled,
+  visibility = "auto",
   className
 }) {
   const eventBus = useEventBus();
   const [active, setActive] = React87__namespace.useState(/* @__PURE__ */ new Set());
+  const [coarse, setCoarse] = React87__namespace.useState(
+    () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches
+  );
+  React87__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 = React87__namespace.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
@@ -7903,6 +7914,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(
@@ -8052,7 +8064,7 @@ function StatBadge({
   assetUrl,
   iconUrl,
   label,
-  value = 0,
+  value,
   max,
   format = "number",
   icon,
@@ -8063,6 +8075,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(
@@ -8076,8 +8089,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,
@@ -8086,7 +8099,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "bar" && max && /* @__PURE__ */ jsxRuntime.jsx(
+        hasValue && format === "bar" && max && /* @__PURE__ */ jsxRuntime.jsx(
           HealthBar,
           {
             current: numValue,
@@ -8095,14 +8108,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 })
       ]
     }
   );
@@ -8118,6 +8132,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"
@@ -8160,6 +8175,7 @@ function GameHud({
   items,
   elements,
   size = "md",
+  variant = "floating",
   className,
   transparent = true
 }) {
@@ -8174,7 +8190,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);
@@ -11662,7 +11678,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();
@@ -11670,7 +11686,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",
@@ -11678,14 +11693,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,
@@ -11712,10 +11719,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,
               {
@@ -11753,6 +11762,7 @@ var init_GameShell = __esm({
                         Typography,
                         {
                           as: "span",
+                          className: "font-display",
                           style: {
                             fontWeight: 700,
                             fontSize: "1.05rem",
@@ -11833,6 +11843,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(")) {
@@ -12032,7 +12047,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);
@@ -21766,7 +21781,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) {
@@ -21775,6 +21805,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++) {
@@ -21803,6 +21838,7 @@ function CalendarGrid({
   dayWindow = "auto",
   titleField = "title",
   startField = "startTime",
+  endField = "endTime",
   colorField = "color",
   children,
   renderItem
@@ -21820,8 +21856,8 @@ function CalendarGrid({
     [resolvedWeekStart]
   );
   const resolvedTimeSlots = React87.useMemo(
-    () => timeSlots ?? generateDefaultTimeSlots(evs, startField),
-    [timeSlots, evs, startField]
+    () => timeSlots ?? generateDefaultTimeSlots(evs, startField, endField),
+    [timeSlots, evs, startField, endField]
   );
   const visibleCount = useDayWindow(dayWindow);
   const [dayOffset, setDayOffset] = React87.useState(0);
@@ -21981,12 +22017,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",
@@ -21997,7 +22036,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}`
                   );
@@ -32056,13 +32113,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect65, useRef: useRef64, useCallback: useCallback97, useState: useState95 } = React87__namespace.default;
+      const { useEffect: useEffect67, useRef: useRef64, useCallback: useCallback97, useState: useState95 } = React87__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 = useRef64({ centerLat, centerLng, zoom });
-        useEffect65(() => {
+        useEffect67(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -32073,7 +32130,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);
@@ -32602,14 +32659,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();
@@ -42126,22 +42203,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();
@@ -42191,6 +42252,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":
@@ -42289,6 +42362,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) });
@@ -42361,10 +42451,11 @@ var init_DetailPanel = __esm({
       avatar,
       sections: propSections,
       actions,
-      maxInlineActions,
+      maxInlineActions = 2,
       backAction,
       footer,
       slideOver = false,
+      showActions = true,
       className,
       entity,
       fields: propFields,
@@ -42412,9 +42503,6 @@ var init_DetailPanel = __esm({
         },
         [eventBus]
       );
-      const handleClose = React87.useCallback(() => {
-        eventBus.emit("UI:CLOSE", {});
-      }, [eventBus]);
       const entityRecord = Array.isArray(entity) ? entity[0] : entity;
       const data = entityRecord ?? initialData;
       let title = propTitle;
@@ -42428,8 +42516,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;
@@ -42463,15 +42550,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))
               });
             }
           });
@@ -42486,8 +42572,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))
               });
             }
           });
@@ -42502,8 +42587,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))
               });
             }
           });
@@ -42518,8 +42602,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))
               });
             }
           });
@@ -42528,6 +42611,15 @@ var init_DetailPanel = __esm({
           }
         }
       }
+      const renderSlot = providers.useRenderSlot();
+      const navStack = providers.useNavStack();
+      const { setCurrentLabel } = navStack;
+      const resolvedTitle = normalizedData ? title : void 0;
+      React87.useEffect(() => {
+        if (renderSlot === "main" && !slideOver && resolvedTitle) {
+          setCurrentLabel(resolvedTitle);
+        }
+      }, [renderSlot, slideOver, resolvedTitle, setCurrentLabel]);
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           LoadingState,
@@ -42566,8 +42658,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);
@@ -42579,24 +42670,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",
@@ -42611,7 +42728,7 @@ var init_DetailPanel = __esm({
               },
               idx
             )),
-            maxInlineActions != null && otherActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+            otherActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
               Menu,
               {
                 position: "bottom-end",
@@ -42627,40 +42744,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) => {
@@ -42693,9 +42790,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
                 }
               ),
@@ -42764,7 +42862,7 @@ var init_DrawerSlot = __esm({
           position,
           width: size,
           className,
-          children
+          children: /* @__PURE__ */ jsxRuntime.jsx(providers.RenderSlotProvider, { slot: "drawer", children })
         }
       );
     };
@@ -44811,7 +44909,7 @@ var init_ModalSlot = __esm({
           title,
           size,
           className,
-          children
+          children: /* @__PURE__ */ jsxRuntime.jsx(providers.RenderSlotProvider, { slot: "modal", children })
         }
       );
     };
@@ -49214,7 +49312,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,
@@ -50783,6 +50884,12 @@ var CurrentPagePathProvider = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(CurrentPagePathContext.Provider, { value, children });
 CurrentPagePathProvider.displayName = "CurrentPagePathProvider";
 var useCurrentPagePath2 = () => React87.useContext(CurrentPagePathContext);
+var RenderSlotContext = React87.createContext("main");
+var RenderSlotProvider4 = ({ slot, children }) => /* @__PURE__ */ jsxRuntime.jsx(RenderSlotContext.Provider, { value: slot, children });
+RenderSlotProvider4.displayName = "RenderSlotProvider";
+function useRenderSlot2() {
+  return React87.useContext(RenderSlotContext);
+}
 var EntitySchemaContext = React87.createContext(null);
 function EntitySchemaProvider({
   entities,
@@ -51573,6 +51680,18 @@ function syncNavStack(state, pages, path, pending) {
   }
   return { state: { ...state, [page.orbital]: stack }, orbital: page.orbital };
 }
+function relabelCurrent(state, pages, path, label) {
+  const normalized = normalizePath(path);
+  const page = matchNavPage(pages, normalized);
+  if (!page || !label) return state;
+  const stack = state[page.orbital];
+  if (!stack || stack.length === 0) return state;
+  const idx = stack.findIndex((e) => e.href === normalized);
+  if (idx < 0 || stack[idx].label === label) return state;
+  const next = [...stack];
+  next[idx] = { href: normalized, label };
+  return { ...state, [page.orbital]: next };
+}
 function previousEntry(state, pages, path) {
   const page = matchNavPage(pages, normalizePath(path));
   if (!page) return null;
@@ -51589,10 +51708,11 @@ var INERT_API = {
   canGoBack: false,
   beginNavigate: () => void 0,
   back: () => void 0,
-  goTo: () => void 0
+  goTo: () => void 0,
+  setCurrentLabel: () => void 0
 };
 var NavStackContext = React87.createContext(INERT_API);
-function useNavStack2() {
+function useNavStack3() {
   return React87.useContext(NavStackContext);
 }
 function loadStored(storageKey) {
@@ -51649,6 +51769,16 @@ var NavStackProvider = ({
     },
     [navigate]
   );
+  const setCurrentLabel = React87.useCallback(
+    (label) => {
+      setState((prev) => {
+        const next = relabelCurrent(prev, pages, currentPath, label);
+        if (next !== prev) persistStored(storageKey, next);
+        return next;
+      });
+    },
+    [pages, currentPath, storageKey]
+  );
   const entries = React87.useMemo(
     () => entriesFor(state, pages, currentPath),
     [state, pages, currentPath]
@@ -51659,9 +51789,10 @@ var NavStackProvider = ({
       canGoBack: previousEntry(state, pages, currentPath) !== null,
       beginNavigate,
       back,
-      goTo
+      goTo,
+      setCurrentLabel
     }),
-    [entries, state, pages, currentPath, beginNavigate, back, goTo]
+    [entries, state, pages, currentPath, beginNavigate, back, goTo, setCurrentLabel]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(NavStackContext.Provider, { value: api, children });
 };
@@ -51718,6 +51849,7 @@ exports.NavigationProvider = NavigationProvider2;
 exports.OfflineModeProvider = OfflineModeProvider;
 exports.OrbitalProvider = OrbitalProvider;
 exports.OrbitalThemeProvider = OrbitalThemeProvider;
+exports.RenderSlotProvider = RenderSlotProvider4;
 exports.SelectionContext = SelectionContext;
 exports.SelectionProvider = SelectionProvider;
 exports.ServerBridgeProvider = ServerBridgeProvider;
@@ -51746,13 +51878,14 @@ exports.useGameAudioContextOptional = useGameAudioContextOptional2;
 exports.useHasPermission = useHasPermission;
 exports.useHasRole = useHasRole;
 exports.useInitPayload = useInitPayload2;
-exports.useNavStack = useNavStack2;
+exports.useNavStack = useNavStack3;
 exports.useNavigateTo = useNavigateTo2;
 exports.useNavigation = useNavigation2;
 exports.useNavigationId = useNavigationId2;
 exports.useNavigationState = useNavigationState2;
 exports.useOfflineMode = useOfflineMode;
 exports.useOptionalOfflineMode = useOptionalOfflineMode;
+exports.useRenderSlot = useRenderSlot2;
 exports.useSelection = useSelection;
 exports.useSelectionOptional = useSelectionOptional;
 exports.useServerBridge = useServerBridge;