snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/ViewportStatusFrame/ViewportStatusFrame.scss

@@ -0,0 +1,106 @@
+@use "../../css/variables.module" as *;
+
+.excalidraw {
+  .viewport-status-frame__border {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    border: 4px solid;
+    z-index: var(--zIndex-viewportStatusFrame);
+  }
+
+  .viewport-status-frame__badge {
+    // always rendered as a flex child of .floating-status-stack, which
+    // handles its position — this stays `relative` only so it remains the
+    // containing block for .viewport-status-frame__badge-action's inset:0.
+    position: relative;
+    z-index: var(--zIndex-viewportStatusFrame);
+    pointer-events: all;
+
+    background-color: var(--viewport-status-frame-badge-background);
+    color: var(--color-primary-light);
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    @include isMobile {
+      // Flatten translucent host colors over an opaque canvas UI surface so
+      // the toolbar cannot show through the badge.
+      background: linear-gradient(
+          var(--viewport-status-frame-badge-background),
+          var(--viewport-status-frame-badge-background)
+        ),
+        var(--island-bg-color);
+    }
+  }
+
+  .viewport-status-frame__badge--clickable {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.96);
+    }
+  }
+
+  .viewport-status-frame__badge-action {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: inherit;
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: -2px;
+      border-radius: 0.5rem;
+    }
+  }
+
+  .viewport-status-frame__badge-label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    white-space: pre-wrap;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .viewport-status-frame__badge-icon {
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .viewport-status-frame__badge-close {
+    all: unset;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    margin-right: 0.5rem;
+    position: relative;
+
+    &:hover {
+      background-color: var(--color-primary-darker);
+    }
+
+    &:active {
+      background-color: var(--color-primary-darkest);
+    }
+
+    svg {
+      display: block;
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}

packages/excalidraw/components/ViewportStatusFrame/ViewportStatusFrame.tsx

@@ -0,0 +1,82 @@
+import { useId } from "react";
+
+import clsx from "clsx";
+
+import { t } from "../../i18n";
+import { CloseIcon } from "../icons";
+
+import "./ViewportStatusFrame.scss";
+
+import type { CSSProperties } from "react";
+
+import type { ViewportStatusFrame as ViewportStatusFrameType } from "../../types";
+
+export const ViewportStatusBorder = ({
+  border,
+  style,
+}: {
+  border: string;
+  style?: CSSProperties;
+}) => (
+  <div
+    className="viewport-status-frame__border"
+    style={{ borderColor: border, ...style }}
+  />
+);
+
+export const ViewportStatusBadge = ({
+  label,
+  border,
+}: {
+  label: NonNullable<ViewportStatusFrameType["label"]>;
+  border?: ViewportStatusFrameType["border"];
+}) => {
+  const labelId = useId();
+  const labelContent = (
+    <>
+      {label.icon && (
+        <span className="viewport-status-frame__badge-icon">{label.icon}</span>
+      )}
+      {label.label}
+    </>
+  );
+
+  return (
+    <div
+      className={clsx("viewport-status-frame__badge", {
+        "viewport-status-frame__badge--clickable": label.onClick,
+      })}
+      role="status"
+      style={{
+        ["--viewport-status-frame-badge-background" as string]:
+          label.background || border || "var(--color-primary)",
+        color: label.color,
+      }}
+    >
+      {label.onClick && (
+        <button
+          type="button"
+          className="viewport-status-frame__badge-action"
+          aria-labelledby={labelId}
+          onClick={label.onClick}
+        />
+      )}
+      <div
+        className="viewport-status-frame__badge-label"
+        id={label.onClick ? labelId : undefined}
+      >
+        {labelContent}
+      </div>
+      {label.onClose && (
+        <button
+          type="button"
+          className="viewport-status-frame__badge-close"
+          aria-label={t("buttons.close")}
+          onClick={label.onClose}
+        >
+          {CloseIcon}
+        </button>
+      )}
+    </div>
+  );
+};