@almadar/ui 5.155.0 → 5.156.0

package/dist/providers/index.js

@@ -1,6 +1,6 @@
 import * as React87 from 'react';
 import React87__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useSyncExternalStore, useLayoutEffect, lazy, useId } from 'react';
-import { EventBusContext, useTraitScopeChain, useEntitySchemaOptional, useEntityBindingSnapshot, useTraitScope, TraitScopeProvider, useNavStack, useCurrentPagePath, useGameAudioContextOptional, matchPathAmong } from '@almadar/ui/providers';
+import { EventBusContext, useTraitScopeChain, RenderSlotProvider, useEntitySchemaOptional, useEntityBindingSnapshot, useTraitScope, TraitScopeProvider, useNavStack, useCurrentPagePath, useRenderSlot, useGameAudioContextOptional, matchPathAmong } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import { createContextFromBindings, interpolateValue } from '@almadar/runtime';
 import { ANONYMOUS_USER, isRenderBindingMarker, isFileValue, isInlineTrait, ANIMATION_NAMES } from '@almadar/core';
@@ -8,7 +8,7 @@ export { ANONYMOUS_USER } from '@almadar/core';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Check, Copy, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp, Tag, User } from 'lucide-react';
+import { Loader2, X, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Check, Copy, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useTranslate } from '@almadar/ui/hooks';
@@ -7793,10 +7793,21 @@ function ControlGrid({
   directionAssets,
   size = "md",
   disabled,
+  visibility = "auto",
   className
 }) {
   const eventBus = useEventBus();
   const [active, setActive] = React87.useState(/* @__PURE__ */ new Set());
+  const [coarse, setCoarse] = React87.useState(
+    () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches
+  );
+  React87.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.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
@@ -7829,6 +7840,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__ */ jsx(
@@ -7978,7 +7990,7 @@ function StatBadge({
   assetUrl,
   iconUrl,
   label,
-  value = 0,
+  value,
   max,
   format = "number",
   icon,
@@ -7989,6 +8001,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__ */ jsxs(
@@ -8002,8 +8015,8 @@ function StatBadge({
       ),
       children: [
         resolvedAsset ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: resolvedAsset, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
-        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground font-medium", children: label }),
-        format === "hearts" && max && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground font-medium text-xs", children: label }),
+        hasValue && format === "hearts" && max && /* @__PURE__ */ jsx(
           HealthBar,
           {
             current: numValue,
@@ -8012,7 +8025,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "bar" && max && /* @__PURE__ */ jsx(
+        hasValue && format === "bar" && max && /* @__PURE__ */ jsx(
           HealthBar,
           {
             current: numValue,
@@ -8021,14 +8034,15 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "number" && /* @__PURE__ */ jsx(
+        hasValue && format === "number" && /* @__PURE__ */ jsx(
           ScoreDisplay,
           {
             value: numValue,
-            size: size === "lg" ? "md" : "sm"
+            size: size === "lg" ? "md" : "sm",
+            className: "font-display"
           }
         ),
-        format === "text" && /* @__PURE__ */ jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
+        hasValue && format === "text" && /* @__PURE__ */ jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -8044,6 +8058,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"
@@ -8086,6 +8101,7 @@ function GameHud({
   items,
   elements,
   size = "md",
+  variant = "floating",
   className,
   transparent = true
 }) {
@@ -8100,7 +8116,7 @@ function GameHud({
       /* @__PURE__ */ 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__ */ 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);
@@ -11588,7 +11604,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();
@@ -11596,7 +11612,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",
@@ -11604,14 +11619,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,
@@ -11638,10 +11645,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__ */ jsx("style", { children: FONT_FACES }),
             backgroundAsset && /* @__PURE__ */ jsx(
               AtlasPanel,
               {
@@ -11679,6 +11688,7 @@ var init_GameShell = __esm({
                         Typography,
                         {
                           as: "span",
+                          className: "font-display",
                           style: {
                             fontWeight: 700,
                             fontSize: "1.05rem",
@@ -11759,6 +11769,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(")) {
@@ -11958,7 +11973,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);
@@ -21692,7 +21707,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) {
@@ -21701,6 +21731,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++) {
@@ -21729,6 +21764,7 @@ function CalendarGrid({
   dayWindow = "auto",
   titleField = "title",
   startField = "startTime",
+  endField = "endTime",
   colorField = "color",
   children,
   renderItem
@@ -21746,8 +21782,8 @@ function CalendarGrid({
     [resolvedWeekStart]
   );
   const resolvedTimeSlots = useMemo(
-    () => timeSlots ?? generateDefaultTimeSlots(evs, startField),
-    [timeSlots, evs, startField]
+    () => timeSlots ?? generateDefaultTimeSlots(evs, startField, endField),
+    [timeSlots, evs, startField, endField]
   );
   const visibleCount = useDayWindow(dayWindow);
   const [dayOffset, setDayOffset] = useState(0);
@@ -21907,12 +21943,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__ */ jsx(
                     TimeSlotCell,
                     {
                       time,
-                      isOccupied: slotEvents.length > 0,
+                      isOccupied: slotEvents.length > 0 || continuingEvents.length > 0,
                       onClick: () => handleSlotClick(day, time),
                       className: cn(
                         "border-l border-border",
@@ -21923,7 +21962,25 @@ function CalendarGrid({
                         onPointerUp: clearLongPress,
                         onPointerCancel: clearLongPress
                       } : {},
-                      children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
+                      children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+                        slotEvents.map(renderEvent),
+                        continuingEvents.map((event) => {
+                          const color = getNestedValue(event, colorField);
+                          return /* @__PURE__ */ 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}`
                   );
@@ -31982,13 +32039,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect65, useRef: useRef64, useCallback: useCallback97, useState: useState95 } = React87__default;
+      const { useEffect: useEffect67, useRef: useRef64, useCallback: useCallback97, useState: useState95 } = React87__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);
@@ -31999,7 +32056,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);
@@ -32528,14 +32585,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();
@@ -42052,22 +42129,6 @@ var init_DataTable = __esm({
     DataTable.displayName = "DataTable";
   }
 });
-function getFieldIcon(fieldName) {
-  const name = fieldName.toLowerCase();
-  if (name.includes("date") || name.includes("time")) return Calendar;
-  if (name.includes("status")) return Tag;
-  if (name.includes("priority")) return AlertCircle;
-  if (name.includes("progress") || name.includes("percent")) return TrendingUp;
-  if (name.includes("assignee") || name.includes("owner") || name.includes("user") || name.includes("member"))
-    return User;
-  if (name.includes("due")) return Clock;
-  if (name.includes("complete")) return CheckCircle2;
-  if (name.includes("budget") || name.includes("cost") || name.includes("price"))
-    return DollarSign;
-  if (name.includes("description") || name.includes("note") || name.includes("comment"))
-    return FileText;
-  return Package;
-}
 function getBadgeVariant(fieldName, value) {
   const name = fieldName.toLowerCase();
   const val = String(value).toLowerCase();
@@ -42117,6 +42178,18 @@ function renderRichFieldValue(value, fieldName, fieldType, meta) {
           }
         ) });
       }
+      if (fieldType === "url" && /^https?:\/\//i.test(str)) {
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: str,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "text-primary hover:underline break-all",
+            children: str
+          }
+        );
+      }
       return str;
     }
     case "markdown":
@@ -42215,6 +42288,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__ */ jsx(HStack, { gap: "xs", wrap: true, children: value.map((item, i) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: String(item) }, i)) });
+      }
+      if (Array.isArray(value)) return "\u2014";
+      return str;
+    }
+    case "email":
+      return /* @__PURE__ */ jsx("a", { href: `mailto:${str}`, className: "text-primary hover:underline break-all", children: str });
+    case "phone":
+      return /* @__PURE__ */ 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__ */ jsx(Badge, { variant: getBadgeVariant(fieldName, str), children: humanizeEnumValue(str) });
@@ -42287,10 +42377,11 @@ var init_DetailPanel = __esm({
       avatar,
       sections: propSections,
       actions,
-      maxInlineActions,
+      maxInlineActions = 2,
       backAction,
       footer,
       slideOver = false,
+      showActions = true,
       className,
       entity,
       fields: propFields,
@@ -42338,9 +42429,6 @@ var init_DetailPanel = __esm({
         },
         [eventBus]
       );
-      const handleClose = useCallback(() => {
-        eventBus.emit("UI:CLOSE", {});
-      }, [eventBus]);
       const entityRecord = Array.isArray(entity) ? entity[0] : entity;
       const data = entityRecord ?? initialData;
       let title = propTitle;
@@ -42354,8 +42442,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;
@@ -42389,15 +42476,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))
               });
             }
           });
@@ -42412,8 +42498,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))
               });
             }
           });
@@ -42428,8 +42513,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))
               });
             }
           });
@@ -42444,8 +42528,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))
               });
             }
           });
@@ -42454,6 +42537,15 @@ var init_DetailPanel = __esm({
           }
         }
       }
+      const renderSlot = useRenderSlot();
+      const navStack = useNavStack();
+      const { setCurrentLabel } = navStack;
+      const resolvedTitle = normalizedData ? title : void 0;
+      useEffect(() => {
+        if (renderSlot === "main" && !slideOver && resolvedTitle) {
+          setCurrentLabel(resolvedTitle);
+        }
+      }, [renderSlot, slideOver, resolvedTitle, setCurrentLabel]);
       if (isLoading) {
         return /* @__PURE__ */ jsx(
           LoadingState,
@@ -42492,8 +42584,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);
@@ -42505,24 +42596,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__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
-        /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", gap: "xs", children: [
-          /* @__PURE__ */ jsx(HStack, { align: "center", gap: "xs", children: backAction && /* @__PURE__ */ jsx(
-            Button,
+      const statusBadges = /* @__PURE__ */ jsxs(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__ */ 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 ?? ArrowLeft,
-              "data-testid": backAction.event ? `action-${backAction.event}` : "action-back",
-              children: backAction.label
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(HStack, { justify: "end", align: "center", gap: "xs", children: [
-            (maxInlineActions != null ? otherActions.slice(0, maxInlineActions) : otherActions).map((action, idx) => /* @__PURE__ */ jsx(
+              variant: getBadgeVariant(field, String(value)),
+              children: humanizeEnumValue(String(value))
+            },
+            field
+          );
+        }),
+        status && /* @__PURE__ */ jsx(Badge, { variant: status.variant ?? "default", children: status.label })
+      ] });
+      const content = /* @__PURE__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
+        /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", gap: "md", children: [
+          /* @__PURE__ */ jsxs(HStack, { align: "start", gap: "sm", className: "min-w-0", children: [
+            backAction && /* @__PURE__ */ 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 ?? ArrowLeft,
+                "data-testid": backAction.event ? `action-${backAction.event}` : "action-back",
+                children: backAction.label
+              }
+            ),
+            avatar,
+            /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "sm", wrap: true, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+                statusBadges
+              ] }),
+              subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: subtitle })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsxs(HStack, { justify: "end", align: "center", gap: "xs", className: "shrink-0", children: [
+            otherActions.slice(0, maxInlineActions).map((action, idx) => /* @__PURE__ */ jsx(
               Button,
               {
                 variant: action.variant || "secondary",
@@ -42537,7 +42654,7 @@ var init_DetailPanel = __esm({
               },
               idx
             )),
-            maxInlineActions != null && otherActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+            otherActions.length > maxInlineActions && /* @__PURE__ */ jsx(
               Menu,
               {
                 position: "bottom-end",
@@ -42553,40 +42670,20 @@ var init_DetailPanel = __esm({
                 }))
               }
             ),
-            /* @__PURE__ */ jsx(
+            closeAction && /* @__PURE__ */ 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: X,
-                "data-testid": effectiveCloseAction.event ? `action-${effectiveCloseAction.event}` : "action-close"
+                "data-testid": closeAction.event ? `action-${closeAction.event}` : "action-close"
               }
             )
           ] })
         ] }),
-        avatar,
-        /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
-        subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: subtitle }),
-        /* @__PURE__ */ 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__ */ jsx(
-              Badge,
-              {
-                variant: getBadgeVariant(field, String(value)),
-                children: String(value)
-              },
-              field
-            );
-          }),
-          status && /* @__PURE__ */ jsx(Badge, { variant: status.variant ?? "default", children: status.label })
-        ] }),
         normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
           (f3) => f3.toLowerCase().includes("progress") || f3.toLowerCase().includes("percent")
         ).map((field) => {
@@ -42619,9 +42716,10 @@ var init_DetailPanel = __esm({
               /* @__PURE__ */ jsx(
                 Typography,
                 {
-                  variant: "small",
-                  color: "secondary",
+                  variant: "caption",
+                  color: "muted",
                   weight: "medium",
+                  className: "uppercase tracking-wider",
                   children: field.label
                 }
               ),
@@ -42690,7 +42788,7 @@ var init_DrawerSlot = __esm({
           position,
           width: size,
           className,
-          children
+          children: /* @__PURE__ */ jsx(RenderSlotProvider, { slot: "drawer", children })
         }
       );
     };
@@ -44737,7 +44835,7 @@ var init_ModalSlot = __esm({
           title,
           size,
           className,
-          children
+          children: /* @__PURE__ */ jsx(RenderSlotProvider, { slot: "modal", children })
         }
       );
     };
@@ -49140,7 +49238,10 @@ function MaybeTraitScope({
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function UISlotComponent({
+function UISlotComponent(props) {
+  return /* @__PURE__ */ jsx(RenderSlotProvider, { slot: props.slot, children: /* @__PURE__ */ jsx(UISlotComponentInner, { ...props }) });
+}
+function UISlotComponentInner({
   slot,
   portal = false,
   position,
@@ -50709,6 +50810,12 @@ var CurrentPagePathProvider = ({
 }) => /* @__PURE__ */ jsx(CurrentPagePathContext.Provider, { value, children });
 CurrentPagePathProvider.displayName = "CurrentPagePathProvider";
 var useCurrentPagePath2 = () => useContext(CurrentPagePathContext);
+var RenderSlotContext = createContext("main");
+var RenderSlotProvider4 = ({ slot, children }) => /* @__PURE__ */ jsx(RenderSlotContext.Provider, { value: slot, children });
+RenderSlotProvider4.displayName = "RenderSlotProvider";
+function useRenderSlot2() {
+  return useContext(RenderSlotContext);
+}
 var EntitySchemaContext = createContext(null);
 function EntitySchemaProvider({
   entities,
@@ -51499,6 +51606,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;
@@ -51515,10 +51634,11 @@ var INERT_API = {
   canGoBack: false,
   beginNavigate: () => void 0,
   back: () => void 0,
-  goTo: () => void 0
+  goTo: () => void 0,
+  setCurrentLabel: () => void 0
 };
 var NavStackContext = createContext(INERT_API);
-function useNavStack2() {
+function useNavStack3() {
   return useContext(NavStackContext);
 }
 function loadStored(storageKey) {
@@ -51575,6 +51695,16 @@ var NavStackProvider = ({
     },
     [navigate]
   );
+  const setCurrentLabel = useCallback(
+    (label) => {
+      setState((prev) => {
+        const next = relabelCurrent(prev, pages, currentPath, label);
+        if (next !== prev) persistStored(storageKey, next);
+        return next;
+      });
+    },
+    [pages, currentPath, storageKey]
+  );
   const entries = useMemo(
     () => entriesFor(state, pages, currentPath),
     [state, pages, currentPath]
@@ -51585,9 +51715,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__ */ jsx(NavStackContext.Provider, { value: api, children });
 };
@@ -51618,4 +51749,4 @@ var NavStackRouterBridge = ({
 };
 NavStackRouterBridge.displayName = "NavStackRouterBridge";
 
-export { CurrentPagePathContext, CurrentPagePathProvider, EntityBindingContext, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, GameAudioContext2 as GameAudioContext, GameAudioProvider2 as GameAudioProvider, NavStackProvider, NavStackRouterBridge, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, comparePathSpecificity2 as comparePathSpecificity, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, matchPathAmong2 as matchPathAmong, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntityBindingSnapshot2 as useEntityBindingSnapshot, useEntitySchema, useEntitySchemaOptional6 as useEntitySchemaOptional, useGameAudioContext2 as useGameAudioContext, useGameAudioContextOptional2 as useGameAudioContextOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavStack2 as useNavStack, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope2 as useTraitScope, useTraitScopeChain2 as useTraitScopeChain, useUser, useUserForEvaluation };
+export { CurrentPagePathContext, CurrentPagePathProvider, EntityBindingContext, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, GameAudioContext2 as GameAudioContext, GameAudioProvider2 as GameAudioProvider, NavStackProvider, NavStackRouterBridge, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, RenderSlotProvider4 as RenderSlotProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, comparePathSpecificity2 as comparePathSpecificity, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, matchPathAmong2 as matchPathAmong, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntityBindingSnapshot2 as useEntityBindingSnapshot, useEntitySchema, useEntitySchemaOptional6 as useEntitySchemaOptional, useGameAudioContext2 as useGameAudioContext, useGameAudioContextOptional2 as useGameAudioContextOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavStack3 as useNavStack, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useRenderSlot2 as useRenderSlot, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope2 as useTraitScope, useTraitScopeChain2 as useTraitScopeChain, useUser, useUserForEvaluation };