@tribe-nest/forge 3.57.0 → 3.58.0

package/src/ui/styled/seating/SeatMapCanvas.tsx

@@ -0,0 +1,647 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  type SVGProps,
+} from "react";
+import { Maximize2, Minus, Plus } from "lucide-react";
+import {
+  boundingBoxOfPoints,
+  documentBoundingBox,
+  rectCenter,
+  SEAT_RADIUS,
+  sectionOutline,
+  shapeBoundingBox,
+  type Decor,
+  type GaArea,
+  type Rect,
+  type Seat,
+  type SeatMapDocument,
+  type Section,
+  type Shape,
+  type Table,
+  type TextObject,
+} from "@tribe-nest/seating-core";
+import type { EventSeat } from "../../headless/event/useEventSeating";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
+import {
+  DECOR_DEFAULTS,
+  LABEL_COLOR,
+  MIN_SEAT_SCREEN_PX,
+  MIN_TAP_TARGET_PX,
+  MUTED_LABEL_COLOR,
+  ROW_LABEL_MIN_SCALE,
+  SEAT_LABEL_MIN_SCALE,
+  seatPaint,
+  STAGE_FILL,
+} from "./paint";
+import { useSeatMapViewport } from "./useSeatMapViewport";
+
+export interface SeatMapCanvasProps {
+  /** The layout frozen at bind time. */
+  layout: SeatMapDocument;
+  /** Event seats by their id INSIDE the layout, which is what a `<circle>` carries. */
+  bySource: ReadonlyMap<string, EventSeat>;
+  /** Tier id -> colour. Seats of a tier with no entry draw as "not for sale". */
+  tierColors: Readonly<Record<string, string>>;
+  /** EVENT seat ids the buyer holds. */
+  selectedIds: ReadonlySet<string>;
+  /** A tap on an available (or already selected) seat. Never fired for an unavailable one. */
+  onSeatTap: (seat: EventSeat) => void;
+  /** Rendered over the map's top-left, for notices that belong on the canvas. */
+  overlay?: ReactNode;
+  /** Host classes on the outer element, passed through untouched. */
+  className?: string;
+}
+
+/** Append an alpha to a 6-digit hex color. */
+const a = (hex: string, alpha: number) =>
+  hex +
+  Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, "0");
+
+const pointsAttr = (points: readonly { x: number; y: number }[]) =>
+  points.map((point) => `${point.x},${point.y}`).join(" ");
+
+const SOURCE_ATTR = "data-seat-source";
+
+/** Which layout seat, if any, a pointer event landed on. One `closest()`, not one handler per seat. */
+const resolveSeatSource = (target: EventTarget | null): string | null => {
+  if (!(target instanceof Element)) return null;
+  const hit = target.closest<Element>(`[${SOURCE_ATTR}]`);
+  return hit?.getAttribute(SOURCE_ATTR) ?? null;
+};
+
+/**
+ * The SVG of a seat map for the BUYER: the frozen layout with every seat
+ * coloured by the tier that prices it, unavailable seats grey, the buyer's
+ * own seats ringed. Pan, zoom and tap come from `useSeatMapViewport`; the
+ * canvas itself only draws and resolves which seat a tap landed on.
+ *
+ * Everything is drawn in WORLD units under one `<g transform>`, so zooming is
+ * a transform change and not a re-layout of a few thousand nodes. Strokes
+ * that must stay hairline use `vectorEffect="non-scaling-stroke"`.
+ */
+export function SeatMapCanvas({ layout, bySource, tierColors, selectedIds, onSeatTap, overlay, className }: SeatMapCanvasProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [hoveredSource, setHoveredSource] = useState<string | null>(null);
+
+  const fitRect = useMemo<Rect>(() => {
+    const box = documentBoundingBox(layout) ?? { x: 0, y: 0, width: layout.canvas.width, height: layout.canvas.height };
+    return { x: box.x - 40, y: box.y - 40, width: box.width + 80, height: box.height + 80 };
+  }, [layout]);
+
+  const onTap = useCallback(
+    (target: EventTarget | null) => {
+      const source = resolveSeatSource(target);
+      if (!source) return;
+      const seat = bySource.get(source);
+      if (!seat) return;
+      // A grey seat is not a control. The picker says why elsewhere; the map
+      // simply does not react, the way a disabled button does not.
+      if (seat.status !== "available" && !selectedIds.has(seat.id)) return;
+      onSeatTap(seat);
+    },
+    [bySource, onSeatTap, selectedIds],
+  );
+
+  const view = useSeatMapViewport({ containerRef, fitRect, onTap });
+  const { viewport, size } = view;
+
+  const seatRadius = Math.max(SEAT_RADIUS, MIN_SEAT_SCREEN_PX / viewport.scale);
+  const tapRadius = Math.max(seatRadius, MIN_TAP_TARGET_PX / 2 / viewport.scale);
+  const showSeatLabels = viewport.scale >= SEAT_LABEL_MIN_SCALE;
+  const showRowLabels = viewport.scale >= ROW_LABEL_MIN_SCALE;
+
+  const onPointerMove = (event: ReactPointerEvent<SVGSVGElement>) => {
+    view.pointerHandlers.onPointerMove(event);
+    if (event.pointerType !== "mouse") return;
+    const source = resolveSeatSource(event.target);
+    const seat = source ? bySource.get(source) : undefined;
+    // Unavailable seats get no hover: nothing happens if you click them, so
+    // nothing should light up when you approach them.
+    setHoveredSource(seat && (seat.status === "available" || selectedIds.has(seat.id)) ? source : null);
+  };
+
+  const cursor = view.isPanning ? "grabbing" : hoveredSource ? "pointer" : "grab";
+  const bg = layout.canvas.background;
+
+  return (
+    <div
+      ref={containerRef}
+      data-testid="seat-map-canvas"
+      className={className ?? "fg:relative fg:w-full fg:h-[320px] fg:md:h-[440px] fg:overflow-hidden fg:touch-none fg:select-none"}
+      style={{
+        border: `1px solid ${a(theme.colors.primary, 0.25)}`,
+        borderRadius: theme.cornerRadius,
+        background: theme.colors.background,
+        touchAction: "none",
+      }}
+    >
+      <svg
+        role="application"
+        aria-label={t("forge.seat_map_canvas.aria_label")}
+        className="fg:block fg:w-full fg:h-full fg:touch-none fg:select-none"
+        width={size.width}
+        height={size.height}
+        viewBox={`0 0 ${size.width} ${size.height}`}
+        style={{ cursor, touchAction: "none" }}
+        onPointerDown={view.pointerHandlers.onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={view.pointerHandlers.onPointerUp}
+        onPointerCancel={view.pointerHandlers.onPointerCancel}
+        onPointerLeave={() => setHoveredSource(null)}
+      >
+        <g transform={`translate(${viewport.x} ${viewport.y}) scale(${viewport.scale})`}>
+          <rect
+            x={0}
+            y={0}
+            width={layout.canvas.width}
+            height={layout.canvas.height}
+            fill="#ffffff"
+            stroke="#e5e7eb"
+            vectorEffect="non-scaling-stroke"
+          />
+          {bg ? (
+            <image
+              href={bg.url}
+              x={bg.x}
+              y={bg.y}
+              width={bg.width}
+              height={bg.height}
+              opacity={bg.opacity}
+              preserveAspectRatio="none"
+              pointerEvents="none"
+            />
+          ) : null}
+          {layout.objects.map((object) => {
+            switch (object.type) {
+              case "section":
+                return (
+                  <SectionLayer
+                    key={object.id}
+                    section={object}
+                    bySource={bySource}
+                    tierColors={tierColors}
+                    selectedIds={selectedIds}
+                    hoveredSource={hoveredSource}
+                    primary={theme.colors.primary}
+                    seatRadius={seatRadius}
+                    tapRadius={tapRadius}
+                    showSeatLabels={showSeatLabels}
+                    showRowLabels={showRowLabels}
+                    t={t}
+                  />
+                );
+              case "table":
+                return (
+                  <TableLayer
+                    key={object.id}
+                    table={object}
+                    bySource={bySource}
+                    tierColors={tierColors}
+                    selectedIds={selectedIds}
+                    hoveredSource={hoveredSource}
+                    primary={theme.colors.primary}
+                    seatRadius={seatRadius}
+                    tapRadius={tapRadius}
+                    showSeatLabels={showSeatLabels}
+                    t={t}
+                  />
+                );
+              case "ga":
+                return <GaLayer key={object.id} ga={object} chip={t("forge.seat_map_canvas.general_admission")} />;
+              case "shape":
+                return <DecorLayer key={object.id} decor={object} />;
+              case "text":
+                return <TextLayer key={object.id} text={object} />;
+            }
+          })}
+        </g>
+      </svg>
+      {overlay ? <div className="fg:absolute fg:top-2 fg:left-2 fg:right-14 fg:pointer-events-none">{overlay}</div> : null}
+      <div className="fg:absolute fg:top-2 fg:right-2 fg:flex fg:flex-col fg:gap-1">
+        <ZoomButton label={t("forge.seat_map_canvas.zoom_in")} onClick={view.zoomIn} testId="seat-map-zoom-in">
+          <Plus size={16} />
+        </ZoomButton>
+        <ZoomButton label={t("forge.seat_map_canvas.zoom_out")} onClick={view.zoomOut} testId="seat-map-zoom-out">
+          <Minus size={16} />
+        </ZoomButton>
+        <ZoomButton label={t("forge.seat_map_canvas.fit")} onClick={view.fit} testId="seat-map-fit">
+          <Maximize2 size={16} />
+        </ZoomButton>
+      </div>
+    </div>
+  );
+}
+
+function ZoomButton({ label, onClick, testId, children }: { label: string; onClick: () => void; testId: string; children: ReactNode }) {
+  const theme = useForgeTheme();
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      data-testid={testId}
+      onClick={onClick}
+      className="fg:flex fg:items-center fg:justify-center fg:w-9 fg:h-9 fg:cursor-pointer"
+      style={{
+        background: theme.colors.background,
+        color: theme.colors.text,
+        border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+        borderRadius: theme.cornerRadius,
+        boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ── Layers ────────────────────────────────────────────────────────────────────
+
+interface SeatLayerCommon {
+  bySource: ReadonlyMap<string, EventSeat>;
+  tierColors: Readonly<Record<string, string>>;
+  selectedIds: ReadonlySet<string>;
+  hoveredSource: string | null;
+  primary: string;
+  seatRadius: number;
+  tapRadius: number;
+  showSeatLabels: boolean;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}
+
+const SectionLayer = memo(function SectionLayer({
+  section,
+  showRowLabels,
+  ...common
+}: SeatLayerCommon & { section: Section; showRowLabels: boolean }) {
+  const outline = sectionOutline(section);
+  const box = outline.length > 0 ? boundingBoxOfPoints(outline) : null;
+  const labelAt = section.labelPosition ?? (box ? rectCenter(box) : null);
+  const rowLabelSide = section.rowLabelSide ?? "left";
+  const labelFont = Math.max(10, common.seatRadius * 1.6);
+  const rowFont = Math.max(8, common.seatRadius * 1.4);
+  // The section takes its tint from its first mapped seat's tier, so the
+  // outline agrees with the seats inside it rather than with a category colour
+  // the buyer never sees.
+  const tint = sectionTint(section.rows.flatMap((row) => row.seats), common) ?? "#9ca3af";
+
+  return (
+    <g data-object-id={section.id} data-object-type="section" data-testid="seat-map-section">
+      {outline.length >= 3 ? (
+        <polygon
+          points={pointsAttr(outline)}
+          fill={tint}
+          fillOpacity={0.06}
+          stroke={tint}
+          strokeOpacity={0.35}
+          strokeWidth={1}
+          strokeDasharray="4 3"
+          vectorEffect="non-scaling-stroke"
+          pointerEvents="none"
+        />
+      ) : null}
+      {section.rows.map((row) => {
+        const first = row.seats[0];
+        const last = row.seats[row.seats.length - 1];
+        return (
+          <g key={row.id} data-row-id={row.id}>
+            {row.seats.map((seat) => (
+              <SeatDot key={seat.id} seat={seat} {...common} />
+            ))}
+            {showRowLabels && first && rowLabelSide !== "none" ? (
+              <RowLabels label={row.label} first={first} last={last ?? first} side={rowLabelSide} offset={common.seatRadius * 2.4} fontSize={rowFont} />
+            ) : null}
+          </g>
+        );
+      })}
+      {labelAt ? (
+        <text
+          x={labelAt.x}
+          y={labelAt.y}
+          fontSize={labelFont}
+          fontWeight={600}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={LABEL_COLOR}
+          fillOpacity={0.6}
+          pointerEvents="none"
+          style={{ userSelect: "none" }}
+        >
+          {section.name}
+        </text>
+      ) : null}
+    </g>
+  );
+});
+
+const TableLayer = memo(function TableLayer({ table, ...common }: SeatLayerCommon & { table: Table }) {
+  const tint = sectionTint(table.seats, common) ?? "#9ca3af";
+  const width = table.width ?? 80;
+  const height = table.height ?? 50;
+  const bodyProps = {
+    fill: tint,
+    fillOpacity: 0.18,
+    stroke: tint,
+    strokeOpacity: 0.6,
+    strokeWidth: 1,
+    vectorEffect: "non-scaling-stroke" as const,
+    pointerEvents: "none" as const,
+  };
+  return (
+    <g data-object-id={table.id} data-object-type="table" data-testid="seat-map-table">
+      {table.tableShape === "round" ? (
+        <circle cx={table.center.x} cy={table.center.y} r={table.radius ?? 30} {...bodyProps} />
+      ) : (
+        <rect
+          x={table.center.x - width / 2}
+          y={table.center.y - height / 2}
+          width={width}
+          height={height}
+          rx={4}
+          transform={table.rotation ? `rotate(${table.rotation} ${table.center.x} ${table.center.y})` : undefined}
+          {...bodyProps}
+        />
+      )}
+      {table.seats.map((seat) => (
+        <SeatDot key={seat.id} seat={seat} {...common} />
+      ))}
+      <text
+        x={table.center.x}
+        y={table.center.y}
+        fontSize={Math.max(9, common.seatRadius * 1.4)}
+        fontWeight={600}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fill={LABEL_COLOR}
+        fillOpacity={0.75}
+        pointerEvents="none"
+        style={{ userSelect: "none" }}
+      >
+        {table.name}
+      </text>
+    </g>
+  );
+});
+
+/** The tier colour of the first seat of the object that has one, for the object's own tint. */
+const sectionTint = (seats: readonly Seat[], common: Pick<SeatLayerCommon, "bySource" | "tierColors">): string | null => {
+  for (const seat of seats) {
+    const event = common.bySource.get(seat.id);
+    const color = event ? common.tierColors[event.eventTicketId] : undefined;
+    if (color) return color;
+  }
+  return null;
+};
+
+/**
+ * One seat: a visible circle and, behind it, an invisible larger one that
+ * takes the tap on a phone. The `data-seat-source` attribute on the group is
+ * what the canvas resolves a pointer event to.
+ */
+const SeatDot = memo(function SeatDot({
+  seat,
+  bySource,
+  tierColors,
+  selectedIds,
+  hoveredSource,
+  primary,
+  seatRadius,
+  tapRadius,
+  showSeatLabels,
+  t,
+}: SeatLayerCommon & { seat: Seat }) {
+  const event = bySource.get(seat.id);
+  const selected = !!event && selectedIds.has(event.id);
+  const hovered = hoveredSource === seat.id;
+  const paint = seatPaint(event, tierColors, { selected, hovered, primary });
+  const ringWidth = selected ? seatRadius * 0.45 : hovered ? seatRadius * 0.3 : 0;
+  const status = selected
+    ? t("forge.seat_map_canvas.status_selected")
+    : paint.interactive
+      ? t("forge.seat_map_canvas.status_available")
+      : t("forge.seat_map_canvas.status_unavailable");
+  const name = event?.label ?? seat.label;
+  const accessible = !!(seat.attributes?.accessible || event?.attributes?.accessible);
+  return (
+    <g
+      {...{ [SOURCE_ATTR]: seat.id }}
+      data-testid="seat-map-seat"
+      data-status={selected ? "selected" : paint.interactive ? "available" : "unavailable"}
+      role="button"
+      aria-label={accessible ? `${name}, ${status}, ${t("forge.seat_map_canvas.accessible")}` : `${name}, ${status}`}
+      aria-pressed={selected}
+      aria-disabled={paint.interactive ? undefined : true}
+      tabIndex={-1}
+    >
+      <title>{accessible ? `${name} · ${status} · ${t("forge.seat_map_canvas.accessible")}` : `${name} · ${status}`}</title>
+      <circle cx={seat.x} cy={seat.y} r={tapRadius} fill="transparent" />
+      <circle
+        cx={seat.x}
+        cy={seat.y}
+        r={seatRadius}
+        fill={paint.fill}
+        fillOpacity={paint.fillOpacity}
+        stroke={paint.ring ?? "none"}
+        strokeWidth={ringWidth}
+        pointerEvents="none"
+      />
+      {selected ? (
+        <circle cx={seat.x} cy={seat.y} r={seatRadius + ringWidth + 1.5} fill="none" stroke={primary} strokeWidth={1.5} vectorEffect="non-scaling-stroke" pointerEvents="none" />
+      ) : null}
+      {accessible ? (
+        <circle cx={seat.x} cy={seat.y} r={seatRadius * 0.32} fill="#ffffff" pointerEvents="none" />
+      ) : null}
+      {showSeatLabels && !accessible ? (
+        <text
+          x={seat.x}
+          y={seat.y}
+          fontSize={seatRadius * 1.1}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={paint.interactive || selected ? "#ffffff" : MUTED_LABEL_COLOR}
+          pointerEvents="none"
+          style={{ userSelect: "none" }}
+        >
+          {seat.label}
+        </text>
+      ) : null}
+    </g>
+  );
+});
+
+interface RowLabelsProps {
+  label: string;
+  first: { x: number; y: number };
+  last: { x: number; y: number };
+  side: "left" | "right" | "both";
+  offset: number;
+  fontSize: number;
+}
+
+/** Row letters just outside the first and last seat, along the row's own direction so rotated rows still read. */
+function RowLabels({ label, first, last, side, offset, fontSize }: RowLabelsProps) {
+  const dx = last.x - first.x;
+  const dy = last.y - first.y;
+  const length = Math.hypot(dx, dy);
+  const ux = length === 0 ? 1 : dx / length;
+  const uy = length === 0 ? 0 : dy / length;
+  const common = {
+    fontSize,
+    fill: MUTED_LABEL_COLOR,
+    textAnchor: "middle" as const,
+    dominantBaseline: "central" as const,
+    pointerEvents: "none" as const,
+    style: { userSelect: "none" as const },
+  };
+  return (
+    <>
+      {side === "left" || side === "both" ? (
+        <text x={first.x - ux * offset} y={first.y - uy * offset} {...common}>
+          {label}
+        </text>
+      ) : null}
+      {side === "right" || side === "both" ? (
+        <text x={last.x + ux * offset} y={last.y + uy * offset} {...common}>
+          {label}
+        </text>
+      ) : null}
+    </>
+  );
+}
+
+/** Renders any layout `Shape` as the matching SVG element. */
+function ShapeElement({
+  shape,
+  rotation,
+  rx,
+  ...rest
+}: { shape: Shape; rotation?: number; rx?: number } & Omit<SVGProps<SVGElement>, "ref" | "points" | "shape">) {
+  const transform =
+    rotation && (shape.kind === "rect" || shape.kind === "ellipse")
+      ? (() => {
+          const center = rectCenter(shapeBoundingBox(shape));
+          return `rotate(${rotation} ${center.x} ${center.y})`;
+        })()
+      : undefined;
+  const props = rest as SVGProps<SVGRectElement> & SVGProps<SVGEllipseElement> & SVGProps<SVGPolygonElement>;
+  switch (shape.kind) {
+    case "rect":
+      return <rect x={shape.x} y={shape.y} width={shape.width} height={shape.height} rx={rx} transform={transform} {...props} />;
+    case "ellipse":
+      return <ellipse cx={shape.cx} cy={shape.cy} rx={shape.rx} ry={shape.ry} transform={transform} {...props} />;
+    case "polygon":
+      return <polygon points={pointsAttr(shape.points)} {...props} />;
+    case "line":
+      return <polyline points={pointsAttr(shape.points)} fill="none" {...props} />;
+  }
+}
+
+/** A general admission area: a translucent shape, its name, and a chip saying it is not seat-picked. */
+const GaLayer = memo(function GaLayer({ ga, chip }: { ga: GaArea; chip: string }) {
+  const color = ga.color ?? "#6b7280";
+  const box = shapeBoundingBox(ga.shape);
+  const label = ga.labelPosition ?? rectCenter(box);
+  const fontSize = Math.max(10, Math.min(18, Math.min(box.width, box.height) / 6));
+  const chipFont = fontSize * 0.7;
+  const chipWidth = chip.length * chipFont * 0.6 + chipFont * 1.2;
+  return (
+    <g data-object-id={ga.id} data-object-type="ga" data-testid="seat-map-ga">
+      <ShapeElement shape={ga.shape} fill={color} fillOpacity={0.18} stroke={color} strokeOpacity={0.6} strokeWidth={1} vectorEffect="non-scaling-stroke" pointerEvents="none" />
+      <text
+        x={label.x}
+        y={label.y - fontSize * 0.55}
+        fontSize={fontSize}
+        fontWeight={600}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fill={LABEL_COLOR}
+        pointerEvents="none"
+        style={{ userSelect: "none" }}
+      >
+        {ga.name}
+      </text>
+      <rect
+        x={label.x - chipWidth / 2}
+        y={label.y + fontSize * 0.2}
+        width={chipWidth}
+        height={chipFont * 1.6}
+        rx={chipFont * 0.8}
+        fill={LABEL_COLOR}
+        fillOpacity={0.75}
+        pointerEvents="none"
+      />
+      <text
+        x={label.x}
+        y={label.y + fontSize * 0.2 + chipFont * 0.8}
+        fontSize={chipFont}
+        fontWeight={600}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fill="#ffffff"
+        pointerEvents="none"
+        style={{ userSelect: "none" }}
+      >
+        {chip}
+      </text>
+    </g>
+  );
+});
+
+const DecorLayer = memo(function DecorLayer({ decor }: { decor: Decor }) {
+  const style = decor.style ?? {};
+  const isStage = decor.kind === "stage";
+  const isLine = decor.shape.kind === "line";
+  const box = shapeBoundingBox(decor.shape);
+  const center = rectCenter(box);
+  return (
+    <g data-object-id={decor.id} data-object-type="shape" data-testid="seat-map-decor" opacity={style.opacity ?? 1} pointerEvents="none">
+      <ShapeElement
+        shape={decor.shape}
+        rotation={decor.rotation}
+        rx={isStage ? 8 : undefined}
+        fill={isLine ? "none" : (style.fill ?? (isStage ? STAGE_FILL : DECOR_DEFAULTS.fill))}
+        stroke={style.stroke ?? (isStage ? "none" : DECOR_DEFAULTS.stroke)}
+        strokeWidth={style.strokeWidth ?? (isLine ? 2 : DECOR_DEFAULTS.strokeWidth)}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {decor.label ? (
+        <text
+          x={center.x}
+          y={center.y}
+          fontSize={Math.max(10, Math.min(22, box.height / 2.5))}
+          fontWeight={600}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fill={isStage ? "#f9fafb" : LABEL_COLOR}
+          transform={decor.rotation ? `rotate(${decor.rotation} ${center.x} ${center.y})` : undefined}
+          style={{ userSelect: "none" }}
+        >
+          {decor.label}
+        </text>
+      ) : null}
+    </g>
+  );
+});
+
+const TextLayer = memo(function TextLayer({ text }: { text: TextObject }) {
+  const transform = text.rotation ? `rotate(${text.rotation} ${text.position.x} ${text.position.y})` : undefined;
+  return (
+    <g data-object-id={text.id} data-object-type="text" data-testid="seat-map-text" transform={transform} pointerEvents="none">
+      <text x={text.position.x} y={text.position.y} fontSize={text.fontSize} fill={text.color ?? LABEL_COLOR} style={{ userSelect: "none" }}>
+        {text.text}
+      </text>
+    </g>
+  );
+});