@brett_lamy/docstream 1.21.0 → 1.22.0

package/src/styles.css

@@ -4437,6 +4437,553 @@
   }
 }
 
+/* ── Replay DevTools: the Console / Network buttons in the top bar and the panel over the page ──
+   Chrome's DevTools, in the player's tokens. Failed requests and errors read --destructive, warnings --warning. */
+@layer docstream.replay {
+  :where([data-slot="replay-preview-actions"]) {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    min-width: 47px;
+  }
+
+  :where([data-slot="replay-devtools-buttons"]) {
+    display: flex;
+    gap: 2px;
+  }
+
+  :where([data-slot="replay-devtools-button"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 26px;
+    min-width: 0;
+    margin: 0;
+    padding: 0 7px;
+    border: 0;
+    border-radius: 7px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--muted-foreground, #71717a);
+    background: transparent;
+    font: inherit;
+    font-size: 11.5px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    transition: background-color 0.12s ease-out, color 0.12s ease-out;
+  }
+
+  :where([data-slot="replay-devtools-button"]:hover),
+  :where([data-slot="replay-devtools-button"][aria-pressed="true"]) {
+    color: var(--foreground, #18181b);
+    background: color-mix(in srgb, var(--foreground, #18181b) 8%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-button"]:focus-visible) {
+    box-shadow: 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-devtools-button"] [data-part="count"]) {
+    color: var(--foreground, #18181b);
+  }
+
+  :where([data-slot="replay-preview"] [data-part="failed"]) {
+    color: var(--destructive, #dc2626);
+    font-weight: 600;
+  }
+
+  :where([data-slot="replay-preview"] [data-part="warn"]) {
+    color: var(--warning, #b45309);
+    font-weight: 600;
+  }
+
+  /* The panel: docked to the bottom of the page, like DevTools docked to the bottom of a window. */
+  :where([data-slot="replay-devtools"]) {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    min-height: 120px;
+    overflow: hidden;
+    outline: none;
+    color: var(--foreground, #18181b);
+    background: var(--card, #ffffff);
+    border-top: 1px solid var(--border, #e4e4e7);
+    box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, 0.3);
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-size: 12px;
+    line-height: 1.4;
+    animation: docstream-replay-devtools-in 0.18s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  :where([data-slot="replay-devtools-resize"]) {
+    position: absolute;
+    inset-inline: 0;
+    top: -3px;
+    z-index: 1;
+    height: 7px;
+    cursor: row-resize;
+  }
+
+  :where([data-slot="replay-devtools-tabs"], [data-slot="replay-devtools-detail-tabs"]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: stretch;
+    height: 30px;
+    padding-inline: 4px;
+    border-bottom: 1px solid var(--border, #e4e4e7);
+    background: color-mix(in srgb, var(--muted, #f4f4f5) 70%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-tabs"] > button, [data-slot="replay-devtools-detail-tabs"] > button) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin: 0;
+    padding: 0 10px;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--muted-foreground, #71717a);
+    background: transparent;
+    font: inherit;
+  }
+
+  :where([data-slot="replay-devtools-tabs"] > button[aria-selected="true"], [data-slot="replay-devtools-detail-tabs"] > button[aria-selected="true"]) {
+    color: var(--foreground, #18181b);
+    border-bottom-color: var(--primary, #2563eb);
+  }
+
+  :where([data-slot="replay-devtools-tabs"] > button:focus-visible, [data-slot="replay-devtools-detail-tabs"] > button:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-devtools-tabs"] [data-part="at"]) {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: auto;
+    padding-inline: 8px;
+    color: var(--muted-foreground, #71717a);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-slot="replay-devtools-tabs"] > [data-slot="replay-devtools-close"], [data-slot="replay-devtools-detail-tabs"] > [data-slot="replay-devtools-close"]) {
+    padding: 0 8px;
+  }
+
+  :where([data-slot="replay-devtools-pane"]) {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  :where([data-slot="replay-devtools-toolbar"]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 6px;
+    border-bottom: 1px solid var(--border, #e4e4e7);
+  }
+
+  :where([data-slot="replay-devtools-toolbar"] input, [data-slot="replay-devtools-toolbar"] select) {
+    height: 22px;
+    margin: 0;
+    padding: 0 7px;
+    border: 1px solid var(--border, #e4e4e7);
+    border-radius: 5px;
+    outline: none;
+    color: inherit;
+    background: var(--background, #ffffff);
+    font: inherit;
+  }
+
+  :where([data-slot="replay-devtools-toolbar"] input) {
+    width: 180px;
+    min-width: 0;
+  }
+
+  :where([data-slot="replay-devtools-toolbar"] input:focus-visible, [data-slot="replay-devtools-toolbar"] select:focus-visible) {
+    border-color: var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-devtools-toolbar"] [data-part="summary"]) {
+    display: flex;
+    gap: 10px;
+    margin-inline-start: auto;
+    padding-inline-end: 4px;
+  }
+
+  :where([data-slot="replay-devtools-chips"]) {
+    display: flex;
+    gap: 2px;
+  }
+
+  :where([data-slot="replay-devtools-chips"] > button) {
+    height: 22px;
+    margin: 0;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 5px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--muted-foreground, #71717a);
+    background: transparent;
+    font: inherit;
+  }
+
+  :where([data-slot="replay-devtools-chips"] > button[aria-checked="true"]) {
+    color: var(--foreground, #18181b);
+    background: color-mix(in srgb, var(--foreground, #18181b) 9%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-chips"] > button:focus-visible) {
+    box-shadow: 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  /* Console */
+  :where([data-slot="replay-devtools-list"]) {
+    flex: 1 1 0%;
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  :where([data-slot="replay-devtools-message"]) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 3px 8px 3px 6px;
+    border-bottom: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 70%, transparent);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  :where([data-slot="replay-devtools-message"][data-level="warn"]) {
+    color: color-mix(in srgb, var(--warning, #b45309) 80%, var(--foreground, #18181b));
+    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-message"][data-level="error"]) {
+    color: var(--destructive, #dc2626);
+    background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--destructive, #dc2626) 22%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-message"][data-level="debug"]) {
+    color: var(--muted-foreground, #71717a);
+  }
+
+  :where([data-slot="replay-devtools-message"] > details, [data-slot="replay-devtools-message"] > [data-part="line"]) {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+
+  :where([data-slot="replay-devtools-message"] summary, [data-slot="replay-devtools-message"] [data-part="line"]) {
+    display: flex;
+    gap: 6px;
+    list-style: none;
+  }
+
+  :where([data-slot="replay-devtools-message"] summary) {
+    cursor: pointer;
+  }
+
+  :where([data-slot="replay-devtools-message"] summary::-webkit-details-marker, [data-slot="replay-devtools-section"] > summary::-webkit-details-marker) {
+    display: none;
+  }
+
+  :where([data-slot="replay-devtools-message"] [data-part="icon"]) {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 12px;
+    height: 17px;
+  }
+
+  :where([data-slot="replay-devtools-message"] [data-part="message"]) {
+    min-width: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-slot="replay-devtools-message"] [data-part="trace"]) {
+    margin: 2px 0 2px 18px;
+    padding: 0;
+    list-style: none;
+    opacity: 0.85;
+  }
+
+  :where([data-slot="replay-devtools-message"] [data-part="trace"] > li) {
+    padding-inline-start: 14px;
+  }
+
+  :where([data-slot="replay-devtools"] [data-part="time"]) {
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0 2px;
+    border: 0;
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--muted-foreground, #71717a);
+    background: transparent;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+  }
+
+  :where([data-slot="replay-devtools"] [data-part="time"]:hover) {
+    text-decoration-color: currentColor;
+  }
+
+  :where([data-slot="replay-devtools"] [data-part="time"]:focus-visible) {
+    box-shadow: 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-devtools-empty"], [data-slot="replay-devtools-later"]) {
+    margin: 0;
+    padding: 10px 12px;
+    color: var(--muted-foreground, #71717a);
+  }
+
+  :where([data-slot="replay-devtools-later"]) {
+    font-style: italic;
+  }
+
+  /* Network */
+  :where([data-slot="replay-devtools-network"]) {
+    display: flex;
+    flex: 1 1 0%;
+    min-height: 0;
+  }
+
+  :where([data-slot="replay-devtools-table-wrap"]) {
+    flex: 1 1 0%;
+    min-width: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  :where([data-slot="replay-devtools-pane"][data-detail] [data-slot="replay-devtools-table-wrap"]) {
+    flex: 0 0 34%;
+    border-inline-end: 1px solid var(--border, #e4e4e7);
+  }
+
+  :where([data-slot="replay-devtools-table"]) {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-slot="replay-devtools-table"] th) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    height: 22px;
+    padding: 0 8px;
+    border-bottom: 1px solid var(--border, #e4e4e7);
+    color: var(--muted-foreground, #71717a);
+    background: var(--card, #ffffff);
+    font-weight: 500;
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  :where([data-slot="replay-devtools-table"] th:first-child) {
+    width: 38%;
+  }
+
+  :where([data-slot="replay-devtools-pane"][data-detail] [data-slot="replay-devtools-table"] th:first-child) {
+    width: 70%;
+  }
+
+  :where([data-slot="replay-devtools-table"] th[data-col="waterfall"]) {
+    width: 24%;
+  }
+
+  :where([data-slot="replay-devtools-table"] td) {
+    height: 22px;
+    padding: 0 8px;
+    overflow: hidden;
+    border-bottom: 1px solid color-mix(in srgb, var(--border, #e4e4e7) 60%, transparent);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-slot="replay-devtools-table"] tbody tr) {
+    outline: none;
+    cursor: default;
+  }
+
+  :where([data-slot="replay-devtools-table"] tbody tr:nth-child(even)) {
+    background: color-mix(in srgb, var(--muted, #f4f4f5) 45%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-table"] tbody tr:hover) {
+    background: color-mix(in srgb, var(--primary, #2563eb) 7%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-table"] tbody tr[aria-selected="true"]) {
+    background: color-mix(in srgb, var(--primary, #2563eb) 16%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-table"] tbody tr:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--ring, #6366f1);
+  }
+
+  :where([data-slot="replay-devtools-table"] tr[data-failed]) {
+    color: var(--destructive, #dc2626);
+  }
+
+  :where([data-slot="replay-devtools-table"] tr[data-pending]) {
+    color: var(--muted-foreground, #71717a);
+  }
+
+  :where([data-slot="replay-devtools-table"] td[data-col="waterfall"]) {
+    position: relative;
+  }
+
+  :where([data-slot="replay-devtools-table"] [data-part="bar"]) {
+    position: absolute;
+    top: 50%;
+    height: 8px;
+    margin-top: -4px;
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--primary, #2563eb) 70%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-table"] tr[data-failed] [data-part="bar"]) {
+    background: var(--destructive, #dc2626);
+  }
+
+  :where([data-slot="replay-devtools-table"] tr[data-pending] [data-part="bar"]) {
+    background: color-mix(in srgb, var(--muted-foreground, #71717a) 50%, transparent);
+  }
+
+  :where([data-slot="replay-devtools-status"]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 12px;
+    height: 22px;
+    padding: 0 8px;
+    border-top: 1px solid var(--border, #e4e4e7);
+    color: var(--muted-foreground, #71717a);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-slot="replay-devtools-detail"]) {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  :where([data-slot="replay-devtools-detail-body"]) {
+    flex: 1 1 0%;
+    min-height: 0;
+    padding: 6px 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  :where([data-slot="replay-devtools-section"]) {
+    padding-bottom: 6px;
+  }
+
+  :where([data-slot="replay-devtools-section"] > summary) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    cursor: pointer;
+    list-style: none;
+    font-weight: 600;
+  }
+
+  :where([data-slot="replay-devtools-section"] [data-part="chevron"]) {
+    transition: transform 0.12s ease-out;
+  }
+
+  :where([data-slot="replay-devtools-section"][open] [data-part="chevron"]) {
+    transform: rotate(90deg);
+  }
+
+  :where([data-slot="replay-devtools-section"] dl) {
+    margin: 0;
+    padding: 0 12px 0 24px;
+  }
+
+  :where([data-slot="replay-devtools-section"] dl > div) {
+    display: flex;
+    gap: 10px;
+    padding: 1px 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11.5px;
+  }
+
+  :where([data-slot="replay-devtools-section"] dt) {
+    flex-shrink: 0;
+    min-width: 130px;
+    color: var(--muted-foreground, #71717a);
+  }
+
+  :where([data-slot="replay-devtools-section"] dd) {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-slot="replay-devtools-body"]) {
+    margin: 0;
+    padding: 4px 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11.5px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-slot="replay-devtools-jump"]) {
+    margin: 4px 0 0 24px;
+    padding: 0;
+    border: 0;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    color: var(--primary, #2563eb);
+    background: transparent;
+    font: inherit;
+  }
+
+  :where([data-slot="replay-devtools-jump"]:focus-visible) {
+    box-shadow: 0 0 0 2px var(--ring, #6366f1);
+  }
+}
+
+@keyframes docstream-replay-devtools-in {
+  from { transform: translateY(12px); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @layer docstream.replay {
+    :where([data-slot="replay-devtools"]) { animation: none; }
+  }
+}
+
 /* Keep every rendered table variant flush, after the shared block spacing rules. */
 :is([data-docstream], .docs-article) [data-docstream-blocks] > :is(.docs-table, table, .docs-cards) {
   margin-block-start: 0;