From c070b57370561d010826ae34a6ae427d8d0fa29a Mon Sep 17 00:00:00 2001
From: waterWang <waterWang@users.noreply.github.com>
Date: Sun, 9 Aug 2026 03:13:50 +0800
Subject: [PATCH] feat: add print stylesheet section for StreamPanel (Closes
 #785)

Hide screen-reader-only live region when printing StreamPanel,
and ensure the status indicator is printed with clean, high-contrast
styling. Adds a dedicated print stylesheet section in print.css.
---
 src/pages/StreamPanel.tsx                     | 21 ++++++-----
 src/pages/__tests__/StreamPanel.print.test.ts | 21 +++++++++++
 src/styles/print.css                          | 36 +++++++++++++++++++
 3 files changed, 69 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/__tests__/StreamPanel.print.test.ts

diff --git a/src/pages/StreamPanel.tsx b/src/pages/StreamPanel.tsx
index 9fb876aa..fe7cdda9 100644
--- a/src/pages/StreamPanel.tsx
+++ b/src/pages/StreamPanel.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LiveRegion } from "../components/LiveRegion";
+import "../styles/print.css";
 
 export type StreamStatus =
   | "connected"
@@ -35,15 +36,17 @@ function formatLabel(status: StreamStatus): string {
 
 export function StreamPanel({ status, label }: StreamPanelProps) {
   return (
-    <div className="stream-panel flex items-center gap-3 rounded-lg border p-4 shadow-sm">
-      <span
-        className={`inline-block h-3 w-3 rounded-full ${STATUS_COLORS[status]}`}
-        aria-hidden="true"
-      />
-      <span className="text-sm font-medium">
-        {label ?? formatLabel(status)}
-      </span>
-      <LiveRegion message={STATUS_MESSAGES[status]} />
+    <div className="stream-panel-container">
+      <div className="stream-panel flex items-center gap-3 rounded-lg border p-4 shadow-sm">
+        <span
+          className={`inline-block h-3 w-3 rounded-full ${STATUS_COLORS[status]}`}
+          aria-hidden="true"
+        />
+        <span className="text-sm font-medium">
+          {label ?? formatLabel(status)}
+        </span>
+        <LiveRegion message={STATUS_MESSAGES[status]} />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/__tests__/StreamPanel.print.test.ts b/src/pages/__tests__/StreamPanel.print.test.ts
new file mode 100644
index 00000000..6bece1a0
--- /dev/null
+++ b/src/pages/__tests__/StreamPanel.print.test.ts
@@ -0,0 +1,21 @@
+import fs from "node:fs";
+import path from "node:path";
+
+describe("StreamPanel print presentation", () => {
+  const componentPath = path.join(process.cwd(), "src/pages/StreamPanel.tsx");
+  const printCssPath = path.join(process.cwd(), "src/styles/print.css");
+
+  it("provides a print stylesheet for StreamPanel", () => {
+    const css = fs.readFileSync(printCssPath, "utf8");
+    expect(css).toContain("@media print");
+    expect(css).toContain(".stream-panel-container");
+    expect(css).toContain(".sr-only");
+    expect(css).toContain("display: none !important");
+  });
+
+  it("connects StreamPanel to the print stylesheet", () => {
+    const component = fs.readFileSync(componentPath, "utf8");
+    expect(component).toContain('import "../styles/print.css";');
+    expect(component).toContain("stream-panel-container");
+  });
+});
\ No newline at end of file
diff --git a/src/styles/print.css b/src/styles/print.css
index 8ecc56c8..3c0e4e59 100644
--- a/src/styles/print.css
+++ b/src/styles/print.css
@@ -76,3 +76,39 @@
     height: auto !important;
   }
 }
+
+/* StreamPanel print presentation. The aria-live region (screen-reader only)
+ * is omitted from printed output, while the status indicator and label are
+ * preserved as a clean summary. */
+@media print {
+  .stream-panel-container {
+    max-width: none !important;
+    padding: 0 !important;
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+  .stream-panel-container .sr-only {
+    display: none !important;
+  }
+
+  .stream-panel-container [class*="text-muted-foreground"] {
+    color: #374151 !important;
+  }
+
+  .stream-panel-container [class*="bg-card"],
+  .stream-panel-container [class*="bg-background"],
+  .stream-panel-container [class*="bg-muted"] {
+    background: #fff !important;
+  }
+
+  .stream-panel-container a {
+    color: #000 !important;
+    text-decoration: none !important;
+  }
+
+  .stream-panel-container .stream-panel {
+    border: 1px solid #d1d5db !important;
+    box-shadow: none !important;
+  }
+}