@pisell/materials 6.11.28 → 6.11.29

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

@@ -0,0 +1,636 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/ResourceWall/VenueWallCard.tsx
+var VenueWallCard_exports = {};
+__export(VenueWallCard_exports, {
+  VenueWallCard: () => VenueWallCard
+});
+module.exports = __toCommonJS(VenueWallCard_exports);
+var import_react = __toESM(require("react"));
+var import_NoteTicker = require("./NoteTicker");
+var import_venueWallUtils = require("./venueWallUtils");
+function useVenueWallClockNow() {
+  const [now, setNow] = (0, import_react.useState)(() => Date.now());
+  (0, import_react.useEffect)(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 1e3);
+    return () => window.clearInterval(id);
+  }, []);
+  return now;
+}
+function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false) {
+  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
+    min: value ?? 0,
+    at: Date.now()
+  }));
+  (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);
+}
+function useDriftUpMinutesFromEpoch(value, resourceId, now) {
+  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
+    min: value ?? 0,
+    at: Date.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));
+}
+var DEFAULT_OCCUPIED = "#6f4ae6";
+var DEFAULT_AVAILABLE = "#10b981";
+var VenueWallCard = ({
+  card,
+  boardingSoonBeforeMin = 10,
+  occupiedCardColor = DEFAULT_OCCUPIED,
+  availableCardColor = DEFAULT_AVAILABLE,
+  heroMaxWidthRatio = 0.6
+}) => {
+  var _a, _b;
+  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 wallNow = useVenueWallClockNow();
+  const liveRemainingMin = useDriftMinutesFromEpoch(
+    card.remainingMin,
+    card.resourceId,
+    wallNow,
+    true
+  );
+  const liveStartsInMin = useDriftMinutesFromEpoch(
+    card.startsInMin,
+    card.resourceId,
+    wallNow,
+    false
+  );
+  const liveLateMin = useDriftUpMinutesFromEpoch(
+    card.lateMin,
+    card.resourceId,
+    wallNow
+  );
+  const statusKey = (0, import_venueWallUtils.deriveVenueWallStatus)({
+    ...card,
+    remainingMin: liveRemainingMin
+  });
+  const tone = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP[statusKey] ?? import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.inUse;
+  const isOccupied = ["inUse", "endingSoon", "expired"].includes(statusKey);
+  let heroText = isOccupied ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : "Available";
+  let heroColor = isOccupied ? statusKey === "inUse" ? "#ffffff" : tone.color : import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+  let noteText = isOccupied ? tone.note : import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.note;
+  let noteTextColor = isOccupied ? "#ffffff" : "#0f172a";
+  let noteBg = isOccupied ? tone.noteBg : (0, import_venueWallUtils.alphaColor)(availableCardColor, 0.2);
+  const subColor = isOccupied ? "rgba(255,255,255,0.80)" : "#94a3b8";
+  const mainColor = isOccupied ? "#ffffff" : "#0f172a";
+  let currentLabel = "Current";
+  let currentTime = card.currentTime ?? "";
+  let currentName = isOccupied ? card.currentBooking ?? "" : "";
+  let currentNameColor = mainColor;
+  let nextNameColor = mainColor;
+  let progress = isOccupied ? (0, import_venueWallUtils.clamp)(liveRemainingMin / 60 * 100, 0, 100) : 0;
+  let progressColor = heroColor;
+  let rightTag = tone.label;
+  let rightTagColor = isOccupied ? "#ffffff" : tone.color;
+  let rightTagBg = isOccupied ? statusKey === "inUse" ? "rgba(255,255,255,0.14)" : tone.color : (0, import_venueWallUtils.alphaColor)(tone.color, 0.12);
+  let rightTagBorder = isOccupied ? "rgba(255,255,255,0.18)" : (0, import_venueWallUtils.alphaColor)(tone.color, 0.35);
+  const nextItem = (_a = card.nextList) == null ? void 0 : _a[0];
+  const nextCountLabel = nextItem ? `1/${((_b = card.nextList) == null ? void 0 : _b.length) ?? 0}` : "";
+  if (statusKey === "boardingSoon") {
+    heroText = `Starts in ${liveStartsInMin}m`;
+    heroColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    noteText = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.note;
+    noteTextColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    noteBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.18);
+    currentLabel = "Next";
+    currentName = card.currentBooking ?? "";
+    currentNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    nextNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    progress = (0, import_venueWallUtils.clamp)(
+      (boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100,
+      0,
+      100
+    );
+    progressColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    rightTag = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.label;
+    rightTagColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
+    rightTagBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.12);
+    rightTagBorder = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.35);
+  }
+  if (statusKey === "late") {
+    heroText = `Late +${liveLateMin}m`;
+    heroColor = "rgb(239, 68, 68)";
+    noteText = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.late.note;
+    noteTextColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    noteBg = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.noteBg;
+    currentLabel = "Next";
+    currentName = card.currentBooking ?? "";
+    currentNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    nextNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    progress = 100;
+    progressColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    rightTag = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.late.label;
+    rightTagColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
+    rightTagBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.12);
+    rightTagBorder = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.35);
+  }
+  if (statusKey === "expired") {
+    heroText = liveRemainingMin < 0 ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : liveRemainingMin === 0 ? "0m overtime" : (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin);
+  }
+  const surfaceAccentColor = statusKey === "late" ? availableCardColor : statusKey === "boardingSoon" ? import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color : availableCardColor;
+  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 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 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 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);
+  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: "0 18px 48px rgba(15,23,42,0.06)"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "grid",
+          minHeight: 0,
+          padding: shellPad,
+          gap: sectionGap,
+          gridTemplateRows: `${headerHeight}px ${currentHeight}px ${nextHeight}px ${noteHeight}px`
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            display: "grid",
+            minHeight: 0,
+            gridTemplateRows: "1fr 2fr",
+            rowGap: sectionGap
+          }
+        },
+        /* @__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"
+            }
+          },
+          card.area
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: {
+              display: "grid",
+              alignItems: "center",
+              minHeight: 0,
+              gridTemplateColumns: "1fr auto",
+              columnGap: 8
+            }
+          },
+          /* @__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(
+          "div",
+          {
+            style: {
+              height: "100%",
+              display: "grid",
+              minHeight: 0,
+              gridTemplateRows: "1.4fr 2.6fr auto",
+              rowGap: sectionGap
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              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
+                }
+              }
+            )
+          ) : 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(
+          "div",
+          {
+            style: {
+              height: "100%",
+              minHeight: 0,
+              display: "grid",
+              gridTemplateRows: "1fr 2fr",
+              rowGap: sectionGap
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: 8,
+                minHeight: 0
+              }
+            },
+            /* @__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) ? `Next · ${nextItem.time}` : "Next"
+            ),
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                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
+              }
+            },
+            /* @__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) ?? ""
+            )
+          )
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          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"
+          }
+        },
+        /* @__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"
+            }
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: {
+              fontSize: noteSize,
+              color: noteTextColor,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center"
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_NoteTicker.NoteTicker,
+            {
+              text: noteText,
+              color: noteTextColor,
+              duration: 24,
+              shouldMarquee: noteText.length > 32
+            }
+          )
+        )
+      )
+    )
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VenueWallCard
+});

package/lib/components/pisellRecordBoard/shellFrame/ResourceWall/VenueWallMarquee.less

@@ -0,0 +1,52 @@
+@keyframes pisell-resource-wall-note-marquee {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(calc(-33.333% - (var(--pisell-rw-marquee-gap) / 3)), 0, 0);
+  }
+}
+
+.pisell-resource-wall-note-marquee-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 24px,
+    #000 calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+.pisell-resource-wall-note-marquee-track {
+  --pisell-rw-marquee-gap: 2.4rem;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  min-width: max-content;
+  will-change: transform;
+  animation-name: pisell-resource-wall-note-marquee;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  transform: translate3d(0, 0, 0);
+}
+
+.pisell-resource-wall-note-marquee-copy {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding-right: var(--pisell-rw-marquee-gap);
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.pisell-resource-wall-note-marquee-static {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+}

package/lib/components/pisellRecordBoard/shellFrame/ResourceWall/venueWallUtils.d.ts

@@ -0,0 +1,14 @@
+import type { RecordBoardResourceWallCardModel } from '../../types';
+export declare type VenueWallStatusKey = 'inUse' | 'endingSoon' | 'expired' | 'available' | 'boardingSoon' | 'late';
+export declare const VENUE_WALL_STATUS_COLOR_MAP: Record<VenueWallStatusKey, {
+    key: VenueWallStatusKey;
+    label: string;
+    note: string;
+    color: string;
+    noteBg: string;
+}>;
+export declare function alphaColor(hex: string, alpha: number): string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** 由卡片字段推导状态键（与演示页 test.tsx 规则一致） */
+export declare function deriveVenueWallStatus(card: RecordBoardResourceWallCardModel): VenueWallStatusKey;
+export declare function formatVenueWallCountdown(min: number): string;