@pisell/materials 6.11.39 → 6.11.41

package/lib/components/pisellRecordBoard/shellFrame/ResourceWall/VenueWallCard.js

@@ -38,6 +38,7 @@ var import_NoteTicker = require("./NoteTicker");
 var import_resourceWallConstants = require("./resourceWallConstants");
 var import_venueWallCardPresentation = require("./venueWallCardPresentation");
 var import_venueWallUtils = require("./venueWallUtils");
+var import_VenueWallCard = require("./VenueWallCard.less");
 function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false) {
   const [epoch, setEpoch] = (0, import_react.useState)(() => ({
     min: value ?? 0,
@@ -46,10 +47,14 @@ function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false)
   (0, import_react.useEffect)(() => {
     setEpoch({ min: value ?? 0, at: Date.now() });
   }, [resourceId, value]);
-  const drifted = epoch.min - Math.floor((now - epoch.at) / 6e4);
-  return allowNegative ? drifted : Math.max(0, drifted);
+  const elapsedMs = now - epoch.at;
+  const precise = epoch.min - elapsedMs / 6e4;
+  const drifted = epoch.min - Math.floor(elapsedMs / 6e4);
+  const whole = allowNegative ? drifted : Math.max(0, drifted);
+  const preciseClamped = allowNegative ? precise : Math.max(0, precise);
+  return { whole, precise: preciseClamped };
 }
-function useDriftUpMinutesFromEpoch(value, resourceId, now) {
+function useDriftAccumulatedMinutesFromEpoch(value, resourceId, now) {
   const [epoch, setEpoch] = (0, import_react.useState)(() => ({
     min: value ?? 0,
     at: Date.now()
@@ -57,52 +62,54 @@ function useDriftUpMinutesFromEpoch(value, resourceId, now) {
   (0, import_react.useEffect)(() => {
     setEpoch({ min: value ?? 0, at: Date.now() });
   }, [resourceId, value]);
-  return Math.max(0, epoch.min + Math.floor((now - epoch.at) / 6e4));
+  return epoch.min + Math.floor((now - epoch.at) / 6e4);
+}
+var NEXT_LIST_PLACEHOLDER_VALUES = /* @__PURE__ */ new Set([
+  "",
+  "-",
+  "–",
+  "—",
+  "―",
+  "—",
+  "–"
+]);
+function nextListFieldIsMeaningful(raw) {
+  const s = String(raw ?? "").trim();
+  if (!s) return false;
+  return !NEXT_LIST_PLACEHOLDER_VALUES.has(s);
 }
 var DEFAULT_OCCUPIED = "#6f4ae6";
-var DEFAULT_AVAILABLE = "#10b981";
+var DEFAULT_AVAILABLE = "#94a3b8";
 function VenueWallCardInner({
   card,
   wallNowMs,
   boardingSoonBeforeMin = 10,
   occupiedCardColor = DEFAULT_OCCUPIED,
   availableCardColor = DEFAULT_AVAILABLE,
-  heroMaxWidthRatio = 0.6,
   statusToneMap: statusToneMapProp,
   appearance = "light"
 }) {
-  var _a, _b;
+  var _a;
   const toneMap = statusToneMapProp ?? (0, import_venueWallUtils.getVenueWallStatusToneMap)();
   const isDark = appearance === "dark";
   const idleMain = isDark ? "#e2e8f0" : "#0f172a";
   const idleSub = isDark ? "#94a3b8" : "#94a3b8";
-  const cardRef = (0, import_react.useRef)(null);
-  const [cardSize, setCardSize] = (0, import_react.useState)({ width: 420, height: 300 });
-  (0, import_react.useEffect)(() => {
-    if (!cardRef.current) return;
-    const node = cardRef.current;
-    const updateSize = () => {
-      const rect = node.getBoundingClientRect();
-      setCardSize({ width: rect.width, height: rect.height });
-    };
-    updateSize();
-    const observer = new ResizeObserver(updateSize);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
-  const liveRemainingMin = useDriftMinutesFromEpoch(
+  const {
+    whole: liveRemainingMin,
+    precise: liveRemainingPreciseMin
+  } = useDriftMinutesFromEpoch(
     card.remainingMin,
     card.resourceId,
     wallNowMs,
     true
   );
-  const liveStartsInMin = useDriftMinutesFromEpoch(
+  const { whole: liveStartsInMin } = useDriftMinutesFromEpoch(
     card.startsInMin,
     card.resourceId,
     wallNowMs,
     false
   );
-  const liveLateMin = useDriftUpMinutesFromEpoch(
+  const liveLateMin = useDriftAccumulatedMinutesFromEpoch(
     card.lateMin,
     card.resourceId,
     wallNowMs
@@ -111,7 +118,9 @@ function VenueWallCardInner({
     () => (0, import_venueWallCardPresentation.buildVenueWallCardPresentation)({
       card,
       toneMap,
+      wallNowMs,
       liveRemainingMin,
+      liveRemainingPreciseMin,
       liveStartsInMin,
       liveLateMin,
       boardingSoonBeforeMin,
@@ -123,7 +132,9 @@ function VenueWallCardInner({
     [
       card,
       toneMap,
+      wallNowMs,
       liveRemainingMin,
+      liveRemainingPreciseMin,
       liveStartsInMin,
       liveLateMin,
       boardingSoonBeforeMin,
@@ -134,492 +145,230 @@ function VenueWallCardInner({
     ]
   );
   const {
-    statusKey,
-    isOccupied,
-    heroText,
-    heroColor,
-    noteText,
-    noteTextColor,
-    noteBg,
-    subColor,
+    floorLikeStatus,
+    headerStatusKey,
+    headerStatusLabel,
+    headerStatusColor,
+    cardVariant,
     mainColor,
-    currentLabel,
-    currentTime,
-    currentName,
-    currentNameColor,
-    nextNameColor,
+    subColor,
+    surfaceAccentColor,
+    primaryEmphasisLine,
+    primaryEmphasisColor,
+    timeRangeLine,
+    contactLine,
+    showProgress,
     progress,
     progressColor,
-    rightTag,
-    rightTagColor,
-    rightTagBg,
-    rightTagBorder,
-    surfaceAccentColor
+    showEndingSoonMarquee,
+    marqueeText,
+    marqueeColor,
+    marqueeShellBackground
   } = presentation;
   const nextItem = (_a = card.nextList) == null ? void 0 : _a[0];
-  const nextCountLabel = nextItem ? `1/${((_b = card.nextList) == null ? void 0 : _b.length) ?? 0}` : "";
-  const cardBg = isOccupied ? `linear-gradient(180deg, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.96)} 0%, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.88)} 100%)` : (0, import_venueWallUtils.alphaColor)(
-    surfaceAccentColor,
-    statusKey === "boardingSoon" || statusKey === "late" ? 0.06 : 0.03
-  );
-  const cardBorder = isOccupied ? (0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.5) : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.18);
-  const moduleBorder = isOccupied ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.2);
-  const totalUnits = 1.5 + 4 + 2 + 1 + 0.4 * 2 + 0.2 * 3;
-  const heightUnit = Math.max(4, cardSize.height / totalUnits);
-  const widthScale = (0, import_venueWallUtils.clamp)(cardSize.width / 420, 0.42, 1.6);
-  const heightScale = (0, import_venueWallUtils.clamp)(cardSize.height / 300, 0.42, 1.8);
-  const fitScale = Math.min(widthScale, heightScale);
-  const unit = heightUnit;
-  const shellPad = unit * 0.4;
-  const sectionGap = unit * 0.2;
-  const blockPad = Math.max(unit * 0.2, Math.min(unit * 0.3, 20));
-  const cardRadius = (0, import_venueWallUtils.clamp)(unit * 0.62 * fitScale, 4, 28);
-  const blockRadius = (0, import_venueWallUtils.clamp)(unit * 0.48 * fitScale, 3, 24);
-  const noteRadius = (0, import_venueWallUtils.clamp)(unit * 0.4 * fitScale, 3, 20);
-  const tagRadius = (0, import_venueWallUtils.clamp)(unit * 0.34 * fitScale, 3, 999);
-  const headerHeight = unit * 1.5;
-  const currentHeight = unit * 4;
-  const nextHeight = unit * 2;
-  const noteHeight = unit * 1;
-  const areaSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.18 * fitScale, 9, 18);
-  const resourceSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.34 * fitScale, 16, 42);
-  const tagSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.12 * fitScale, 10, 14);
-  const tagHeight = (0, import_venueWallUtils.clamp)(headerHeight * 0.42, 28, 36);
-  const currentMetaSize = (0, import_venueWallUtils.clamp)(currentHeight * 0.09 * fitScale, 9, 16);
-  const currentNameSize = (0, import_venueWallUtils.clamp)(currentHeight * 0.15 * fitScale, 12, 30);
-  const heroTextMaxWidth = Math.max(
-    80,
-    (cardSize.width - shellPad * 2 - blockPad * 2) * heroMaxWidthRatio
+  const nextTimeMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.time) : false;
+  const nextContactMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.booking) : false;
+  const hasNextWallSection = Boolean(
+    nextItem && (nextTimeMeaningful || nextContactMeaningful)
   );
-  const heroMaxByName = currentNameSize * 2.5;
-  const heroApproxFactor = Math.max(heroText.length * 0.58, 1);
-  const heroFitByWidth = heroTextMaxWidth / heroApproxFactor;
-  const heroSize = (0, import_venueWallUtils.clamp)(
-    Math.min(heroFitByWidth, heroMaxByName),
-    18,
-    heroMaxByName
+  const nextTimeSoloLarge = nextTimeMeaningful && !nextContactMeaningful;
+  const cardBg = cardVariant === "occupied" ? `linear-gradient(180deg, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.96)} 0%, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.88)} 100%)` : (0, import_venueWallUtils.alphaColor)(
+    surfaceAccentColor,
+    floorLikeStatus === "reserved" ? 0.06 : 0.03
   );
-  const nextNameSize = (0, import_venueWallUtils.clamp)(nextHeight * 0.24 * fitScale, 12, 30);
-  const nextMetaSize = (0, import_venueWallUtils.clamp)(
-    currentMetaSize,
-    9,
-    Math.max(10, nextNameSize * 0.68)
+  const cardBorder = cardVariant === "occupied" ? (0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.5) : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.18);
+  const moduleBorder = cardVariant === "occupied" ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.2);
+  const currentPanelBg = cardVariant === "occupied" ? "rgba(255,255,255,0.16)" : (0, import_venueWallUtils.alphaColor)(
+    surfaceAccentColor,
+    floorLikeStatus === "reserved" ? 0.18 : 0.2
   );
-  const nextBlockPad = Math.max(unit * 0.16, Math.min(unit * 0.24, 16));
-  const noteSize = (0, import_venueWallUtils.clamp)(noteHeight * 0.28 * fitScale, 10, 18);
-  const tagFont = Math.max(8, tagSize * 0.68);
-  const gridTemplateRows = `${headerHeight}px minmax(${Math.max(
-    120,
-    currentHeight
-  )}px, 4fr) minmax(${Math.max(72, nextHeight)}px, 2fr) ${noteHeight}px`;
+  const currentSectionInk = cardVariant === "occupied" ? "#ffffff" : floorLikeStatus === "reserved" ? (0, import_venueWallUtils.alphaColor)(idleMain, 0.78) : subColor;
+  const nextPanelBg = cardVariant === "occupied" ? "rgba(255,255,255,0.04)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, floorLikeStatus === "reserved" ? 0.1 : 0.08);
+  const nextSectionInk = cardVariant === "occupied" ? subColor : floorLikeStatus === "reserved" ? (0, import_venueWallUtils.alphaColor)(idleMain, 0.78) : subColor;
+  const resourceTitleLabel = String(card.resource ?? "").trim();
+  const resourceTypeLabel = String(card.area ?? "").trim();
+  const headerStatusClass = `pisell-resource-wall-card__header-status--${headerStatusKey}`;
+  const headerStatusStyle = (() => {
+    if (headerStatusKey === "empty") {
+      return { color: headerStatusColor };
+    }
+    if (headerStatusKey === "reserved" || headerStatusKey === "late") {
+      return { color: headerStatusColor };
+    }
+    if (headerStatusKey === "expired") {
+      return { color: "#ffffff", background: headerStatusColor };
+    }
+    return { color: "#ffffff" };
+  })();
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      ref: cardRef,
       className: "pisell-resource-wall-card",
       style: {
-        position: "relative",
-        height: "100%",
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        borderRadius: cardRadius,
         background: cardBg,
-        borderWidth: 1,
-        borderStyle: "solid",
         borderColor: cardBorder,
         boxShadow: isDark ? "0 18px 48px rgba(0,0,0,0.35)" : "0 18px 48px rgba(15,23,42,0.06)"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__scale-root" }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        style: {
-          flex: 1,
-          display: "grid",
-          minHeight: 0,
-          height: "100%",
-          padding: shellPad,
-          gap: sectionGap,
-          gridTemplateRows
-        }
+        className: `pisell-resource-wall-card__grid ${hasNextWallSection ? "pisell-resource-wall-card__grid--with-next" : "pisell-resource-wall-card__grid--no-next"}`
       },
-      /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement("header", { className: "pisell-resource-wall-card__header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__header-main" }, resourceTypeLabel ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-resource-wall-card__tier2 pisell-resource-wall-card__header-type",
+          style: { color: subColor }
+        },
+        resourceTypeLabel
+      ) : null, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-resource-wall-card__header-name",
+          style: { color: mainColor }
+        },
+        resourceTitleLabel || " "
+      )), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
+          className: `pisell-resource-wall-card__header-status ${headerStatusClass}`,
+          style: headerStatusStyle
+        },
+        headerStatusLabel
+      )),
+      /* @__PURE__ */ import_react.default.createElement(
+        "section",
+        {
+          className: `pisell-resource-wall-card__panel${cardVariant === "occupied" ? " pisell-resource-wall-card__panel--occupied-current" : floorLikeStatus === "reserved" ? " pisell-resource-wall-card__panel--reserved-current" : ""}`,
           style: {
-            display: "grid",
-            minHeight: 0,
-            gridTemplateRows: "1fr 2fr",
-            rowGap: sectionGap
+            borderColor: cardVariant === "occupied" ? "rgba(255,255,255,0.28)" : moduleBorder,
+            background: currentPanelBg,
+            minHeight: 0
           }
         },
         /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            style: {
-              textTransform: "uppercase",
-              letterSpacing: "0.24em",
-              fontSize: areaSize,
-              color: subColor,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              display: "flex",
-              alignItems: "center"
-            }
+            className: `pisell-resource-wall-card__section-title${cardVariant === "occupied" ? " pisell-resource-wall-card__section-title--occupied-current" : floorLikeStatus === "reserved" ? " pisell-resource-wall-card__section-title--reserved-current" : ""}`,
+            style: { color: currentSectionInk }
           },
-          card.area
+          (0, import_locales.getText)("pisell-resource-wall-card-label-current")
         ),
-        /* @__PURE__ */ import_react.default.createElement(
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-main" }, timeRangeLine ? /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            style: {
-              display: "grid",
-              alignItems: "center",
-              minHeight: 0,
-              gridTemplateColumns: "1fr auto",
-              columnGap: 8
-            }
+            className: "pisell-resource-wall-card__tier2",
+            style: { color: currentSectionInk }
           },
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                fontWeight: 700,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                minWidth: 0,
-                fontSize: resourceSize,
-                lineHeight: 0.96,
-                color: mainColor
-              }
-            },
-            card.resource
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                flexShrink: 0
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  borderWidth: 1,
-                  borderStyle: "solid",
-                  fontWeight: 600,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  fontSize: tagSize,
-                  lineHeight: 1,
-                  minHeight: tagHeight,
-                  borderRadius: tagRadius,
-                  padding: `0 ${Math.max(8, tagFont)}px`,
-                  color: rightTagColor,
-                  borderColor: rightTagBorder,
-                  background: rightTagBg
-                }
-              },
-              rightTag
-            )
-          )
-        )
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            borderWidth: 1,
-            borderStyle: "solid",
-            position: "relative",
-            minHeight: 0,
-            borderRadius: blockRadius,
-            borderColor: moduleBorder,
-            background: isOccupied ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(
-              surfaceAccentColor,
-              statusKey === "boardingSoon" ? 0.18 : 0.2
-            ),
-            padding: blockPad
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
+          timeRangeLine
+        ) : null, contactLine ? /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "pisell-resource-wall-card__tier2",
+            style: { color: currentSectionInk }
+          },
+          contactLine
+        ) : null), primaryEmphasisLine || showProgress || showEndingSoonMarquee && marqueeText || floorLikeStatus === "empty" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-footer" }, floorLikeStatus === "empty" ? /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier2",
+            style: { color: currentSectionInk }
+          },
+          (0, import_locales.getText)("pisell-resource-wall-card-current-not-in-use")
+        ) : null, primaryEmphasisLine ? /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier1",
+            style: { color: primaryEmphasisColor }
+          },
+          primaryEmphasisLine
+        ) : null, showProgress ? /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
+            className: "pisell-resource-wall-card__progress-wrap",
             style: {
-              height: "100%",
-              display: "grid",
-              minHeight: 0,
-              gridTemplateRows: "1.4fr 2.6fr auto",
-              rowGap: sectionGap
+              background: cardVariant === "occupied" ? "rgba(255,255,255,0.14)" : "rgba(148,163,184,0.18)"
             }
           },
           /* @__PURE__ */ import_react.default.createElement(
             "div",
             {
+              className: "pisell-resource-wall-card__progress-fill",
               style: {
-                display: "grid",
-                minHeight: 0,
-                gridTemplateColumns: "1fr auto",
-                columnGap: 8,
-                alignItems: "start"
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  textTransform: "uppercase",
-                  letterSpacing: "0.22em",
-                  lineHeight: 1,
-                  fontSize: currentMetaSize,
-                  color: subColor
-                }
-              },
-              currentLabel
-            ), /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  lineHeight: 1,
-                  marginTop: "0.2em",
-                  fontSize: currentMetaSize,
-                  color: subColor
-                }
-              },
-              currentTime || " "
-            )),
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  fontWeight: 600,
-                  textAlign: "right",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  minWidth: 0,
-                  alignSelf: "start",
-                  fontSize: currentNameSize,
-                  lineHeight: 1.08,
-                  color: currentNameColor,
-                  maxWidth: cardSize.width * 0.42,
-                  paddingTop: "0.04em",
-                  paddingBottom: "0.08em"
-                }
-              },
-              currentName
-            )
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "flex-end",
-                minHeight: 0,
-                overflow: "hidden"
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  fontWeight: 600,
-                  letterSpacing: "-0.02em",
-                  whiteSpace: "nowrap",
-                  fontSize: heroSize,
-                  lineHeight: 1.08,
-                  color: heroColor,
-                  maxWidth: heroTextMaxWidth
-                }
-              },
-              heroText
-            )
-          ),
-          statusKey === "boardingSoon" || isOccupied ? /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                borderRadius: 9999,
-                overflow: "hidden",
-                height: Math.max(5, unit * 0.08),
-                background: isOccupied ? "rgba(255,255,255,0.14)" : "rgba(148,163,184,0.18)"
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  height: "100%",
-                  borderRadius: 9999,
-                  width: `${progress}%`,
-                  background: progressColor
-                }
+                width: `${progress}%`,
+                background: progressColor
               }
-            )
-          ) : null
-        )
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            borderWidth: 1,
-            borderStyle: "solid",
-            minHeight: 0,
-            borderRadius: blockRadius,
-            borderColor: moduleBorder,
-            background: isOccupied ? "rgba(255,255,255,0.04)" : (0, import_venueWallUtils.alphaColor)(
-              surfaceAccentColor,
-              statusKey === "boardingSoon" ? 0.1 : 0.08
-            ),
-            padding: nextBlockPad
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
+            }
+          )
+        ) : null, showEndingSoonMarquee && marqueeText ? /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
+            className: "pisell-resource-wall-card__marquee-shell",
             style: {
-              height: "100%",
-              minHeight: 0,
-              display: "grid",
-              gridTemplateRows: "1fr 2fr",
-              rowGap: sectionGap
+              background: marqueeShellBackground
             }
           },
           /* @__PURE__ */ import_react.default.createElement(
             "div",
             {
-              style: {
-                display: "flex",
-                alignItems: "flex-start",
-                justifyContent: "space-between",
-                gap: 8,
-                minHeight: 0
-              }
+              className: "pisell-resource-wall-card__tier3",
+              style: { color: marqueeColor }
             },
             /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  textTransform: "uppercase",
-                  letterSpacing: "0.12em",
-                  lineHeight: 1,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  fontSize: nextMetaSize,
-                  color: subColor
-                }
-              },
-              (nextItem == null ? void 0 : nextItem.time) ? (0, import_locales.getText)("pisell-resource-wall-card-next-line").replace(
-                "{time}",
-                nextItem.time
-              ) : (0, import_locales.getText)("pisell-resource-wall-card-label-next")
-            ),
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
+              import_NoteTicker.NoteTicker,
               {
-                style: {
-                  fontWeight: 600,
-                  flexShrink: 0,
-                  fontSize: nextMetaSize,
-                  color: subColor,
-                  lineHeight: 1
-                }
-              },
-              nextCountLabel
-            )
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "flex-start",
-                minWidth: 0,
-                minHeight: 0
+                text: marqueeText,
+                color: marqueeColor,
+                duration: 24,
+                shouldMarquee: marqueeText.length > import_resourceWallConstants.RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
               }
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                style: {
-                  fontWeight: 600,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  fontSize: nextNameSize,
-                  lineHeight: 1,
-                  color: nextNameColor,
-                  paddingTop: sectionGap
-                }
-              },
-              (nextItem == null ? void 0 : nextItem.booking) ?? ""
             )
           )
-        )
+        ) : null) : null)
       ),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
+      hasNextWallSection ? /* @__PURE__ */ import_react.default.createElement(
+        "section",
         {
+          className: `pisell-resource-wall-card__panel${floorLikeStatus === "reserved" ? " pisell-resource-wall-card__panel--reserved-next" : ""}`,
           style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 12,
-            overflow: "hidden",
-            minHeight: 0,
-            padding: Math.max(6, blockPad * 0.66),
-            borderRadius: noteRadius,
-            background: noteBg,
-            border: "1px solid transparent"
+            borderColor: moduleBorder,
+            background: nextPanelBg,
+            minHeight: 0
           }
         },
         /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            style: {
-              width: Math.max(8, unit * 0.12),
-              height: Math.max(8, unit * 0.12),
-              borderRadius: 999,
-              background: heroColor,
-              flex: "0 0 auto"
-            }
-          }
+            className: `pisell-resource-wall-card__section-title${floorLikeStatus === "reserved" ? " pisell-resource-wall-card__section-title--reserved-next" : ""}`,
+            style: { color: nextSectionInk }
+          },
+          (0, import_locales.getText)("pisell-resource-wall-card-label-next")
         ),
         /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
-            style: {
-              fontSize: noteSize,
-              color: noteTextColor,
-              width: "100%",
-              height: "100%",
-              display: "flex",
-              alignItems: "center"
-            }
+            className: `pisell-resource-wall-card__next-stack${nextContactMeaningful && nextTimeMeaningful ? " pisell-resource-wall-card__next-stack--both-lines" : ""}`
           },
-          /* @__PURE__ */ import_react.default.createElement(
-            import_NoteTicker.NoteTicker,
+          nextContactMeaningful && nextItem ? /* @__PURE__ */ import_react.default.createElement(
+            "div",
             {
-              text: noteText,
-              color: noteTextColor,
-              duration: 24,
-              shouldMarquee: noteText.length > import_resourceWallConstants.RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
-            }
-          )
+              className: "pisell-resource-wall-card__tier2",
+              style: { color: nextSectionInk }
+            },
+            String(nextItem.booking).trim()
+          ) : null,
+          nextTimeMeaningful && nextItem ? /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: nextTimeSoloLarge ? "pisell-resource-wall-card__next-time-solo" : "pisell-resource-wall-card__tier2",
+              style: { color: nextSectionInk }
+            },
+            String(nextItem.time).trim()
+          ) : null
         )
-      )
-    )
+      ) : null
+    ))
   );
 }
 var VenueWallCard = import_react.default.memo(VenueWallCardInner);