feat: initial Signage 0.1.0

src/browser/desktop-gate.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+
+/**
+ * The narrowest viewport the Signage management UI is designed for.
+ *
+ * Signage's dashboard is a timeline editor, a slot table, a live preview, and a display roster shown
+ * together. Compressing that into a phone would not make it usable, it would make it a different
+ * product — the mobile application this release deliberately does not build. So below this width the
+ * operator is told plainly where to go instead of being handed a broken layout.
+ *
+ * The switch is a CSS media query rather than a measured width in JavaScript: both branches are
+ * always in the DOM and always in the accessibility tree, so a screen reader and a test find the
+ * same content regardless of how the environment reports its viewport.
+ */
+export const SIGNAGE_MIN_DESKTOP_WIDTH_PX = 1024;
+
+export function DesktopOnly({ children }: { readonly children: ReactNode }): ReactElement {
+  return (
+    <>
+      <div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
+        <h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
+        <p className="signage-narrow-notice__body">
+          {`Open the Ekklesia Dashboard on a display at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, channels, and playback.`}
+        </p>
+      </div>
+      <div className="signage-desktop" data-testid="signage-desktop">
+        {children}
+      </div>
+    </>
+  );
+}