@quazardous/qdadm 2.32.0 → 2.33.1

package/src/notifications/NotificationModule.ts

@@ -34,7 +34,7 @@ export class NotificationModule extends Module {
   static override requires: string[] = []
   static override priority = 5 // Before toast-bridge (10) to intercept first
 
-  static override styles = () => import('./styles.scss')
+  static override styles = () => import('./styles.css')
 
   async connect(ctx: KernelContext): Promise<void> {
     // Define notification zones

package/src/notifications/{styles.scss → styles.css}

@@ -5,9 +5,9 @@
  * Panel and badge styles are scoped in their respective Vue components.
  */
 
-/* Timing values match _sidebar.scss sidebar-box-content-* variables */
-$_content-delay: 0.2s;
-$_content-duration: 0.1s;
+/* Timing (0.1s after a 0.2s delay) matches the sidebar-box-content-* variables
+   of _sidebar.scss. Plain CSS (#4140): an app must not need sass for a module
+   the kernel injects by itself. */
 
 /* =============================================================================
    Notification Status Zone (always visible below footer in sidebar)
@@ -15,14 +15,14 @@ $_content-duration: 0.1s;
 
 .sidebar-notification-status {
   opacity: 1;
-  transition: opacity $_content-duration ease $_content-delay;
+  transition: opacity 0.1s ease 0.2s;
 }
 
 /* Status label: delayed fade-in on expand, instant hide on collapse.
    Matches SidebarBox content behavior (.sidebar-box-content). */
 .sidebar-notification-status .status-label {
   opacity: 1;
-  transition: opacity $_content-duration ease $_content-delay;
+  transition: opacity 0.1s ease 0.2s;
 }
 
 .sidebar--collapsed .sidebar-notification-status .status-label {

package/src/styles/_email.scss

@@ -0,0 +1,188 @@
+/**
+ * EmailPreview (#4113)
+ */
+
+@use 'variables' as *;
+
+.qd-email {
+  border: 1px solid var(--p-surface-200);
+  border-radius: $radius-sm;
+  overflow: hidden;
+  min-width: 0;
+  background: var(--p-surface-0);
+}
+
+.qd-email-head {
+  padding: 0.75rem 1rem 0.5rem;
+  border-bottom: 1px solid var(--p-surface-200);
+}
+
+.qd-email-subject {
+  margin: 0 0 0.5rem;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.qd-email-main {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 0.125rem 0.75rem;
+  margin: 0;
+  font-size: $font-size-sm;
+
+  dt {
+    color: var(--p-text-muted-color);
+  }
+
+  dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
+.qd-email-headers {
+  margin-top: 0.5rem;
+  font-size: $font-size-xs;
+
+  summary {
+    cursor: pointer;
+    color: var(--p-text-muted-color);
+  }
+
+  table {
+    margin-top: 0.25rem;
+    border-collapse: collapse;
+    font-family: $font-family-mono;
+  }
+
+  th {
+    padding: 0.0625rem 1rem 0.0625rem 0;
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+
+  td {
+    overflow-wrap: anywhere;
+  }
+}
+
+.qd-email-warning {
+  padding: 0.375rem 1rem;
+  background: var(--p-orange-50);
+  color: var(--p-orange-800);
+  font-size: $font-size-sm;
+}
+
+.qd-email-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  border-bottom: 1px solid var(--p-surface-200);
+  font-size: $font-size-sm;
+}
+
+.qd-email-tab {
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--p-text-muted-color);
+  font: inherit;
+  cursor: pointer;
+
+  &--active {
+    border-bottom-color: var(--p-primary-color);
+    color: var(--p-text-color);
+    font-weight: 600;
+  }
+}
+
+.qd-email-spacer {
+  flex: 1;
+}
+
+.qd-email-blocked {
+  color: var(--p-text-muted-color);
+  font-size: $font-size-xs;
+}
+
+.qd-email-frame-wrap {
+  resize: vertical;
+  overflow: hidden;
+  min-height: 8rem;
+  background: #fff;
+}
+
+.qd-email-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.qd-email-text {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  max-height: 32rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: $font-family-mono;
+  font-size: 0.8125rem;
+}
+
+.qd-email-source {
+  white-space: pre;
+}
+
+.qd-email-empty {
+  padding: 0.75rem 1rem;
+  color: var(--p-text-muted-color);
+  font-style: italic;
+}
+
+.qd-email-attachments {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border-top: 1px solid var(--p-surface-200);
+}
+
+.qd-email-attachment {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem;
+  font-size: $font-size-sm;
+  min-width: 0;
+}
+
+.qd-email-thumb {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: cover;
+  border-radius: $radius-sm;
+  border: 1px solid var(--p-surface-200);
+}
+
+.qd-email-clip {
+  width: 2.5rem;
+  text-align: center;
+  color: var(--p-text-muted-color);
+}
+
+.qd-email-att-name {
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+
+.qd-email-att-meta {
+  flex: 1;
+  color: var(--p-text-muted-color);
+  font-size: $font-size-xs;
+}

package/src/styles/_log-stream.scss

@@ -0,0 +1,167 @@
+/**
+ * LogStream (#4110)
+ * A terminal-like panel: dark in both themes, as logs are read.
+ */
+
+@use 'variables' as *;
+
+.qd-log-stream {
+  --qd-log-bg: #1e1e1e;
+  --qd-log-fg: #d4d4d4;
+  --qd-log-muted: #858585;
+  --qd-log-mark: rgba(255, 213, 79, 0.45);
+  --qd-log-error-bg: rgba(241, 76, 76, 0.14);
+  --qd-log-current: rgba(59, 142, 234, 0.3);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--p-surface-300);
+  border-radius: $radius-sm;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.qd-log-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: var(--p-surface-50);
+  border-bottom: 1px solid var(--p-surface-200);
+  font-size: $font-size-sm;
+}
+
+.qd-log-spacer-x {
+  flex: 1;
+}
+
+.qd-log-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 500;
+}
+
+.qd-log-status-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--p-surface-400);
+
+  .qd-log-status--streaming & {
+    background: var(--p-green-500);
+    animation: qd-log-pulse 1.2s ease-in-out infinite;
+  }
+  .qd-log-status--done & {
+    background: var(--p-blue-500);
+  }
+  .qd-log-status--error & {
+    background: var(--p-red-500);
+  }
+}
+
+@keyframes qd-log-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.qd-log-count,
+.qd-log-search-count {
+  color: var(--p-text-muted-color);
+  font-size: $font-size-xs;
+  font-variant-numeric: tabular-nums;
+}
+
+.qd-log-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+
+  .p-inputtext {
+    width: 12rem;
+    max-width: 40vw;
+  }
+}
+
+.qd-log-viewport {
+  overflow: auto;
+  background: var(--qd-log-bg);
+  color: var(--qd-log-fg);
+  font-family: $font-family-mono;
+  font-size: 0.8125rem;
+  line-height: var(--qd-log-line-height, 20px);
+  outline: none;
+}
+
+.qd-log-empty {
+  padding: 0.75rem 1rem;
+  color: var(--qd-log-muted);
+  font-style: italic;
+}
+
+.qd-log-line {
+  display: flex;
+  height: var(--qd-log-line-height, 20px);
+  white-space: pre;
+  padding-right: 0.75rem;
+
+  &--error {
+    background: var(--qd-log-error-bg);
+  }
+  &--current {
+    background: var(--qd-log-current);
+  }
+
+  .qd-log-stream--wrap & {
+    height: auto;
+    min-height: var(--qd-log-line-height, 20px);
+    white-space: pre-wrap;
+    word-break: break-word;
+    content-visibility: auto;
+    contain-intrinsic-size: auto var(--qd-log-line-height, 20px);
+  }
+}
+
+.qd-log-n {
+  flex: none;
+  min-width: 3.5rem;
+  padding: 0 0.75rem 0 0.5rem;
+  text-align: right;
+  color: var(--qd-log-muted);
+  user-select: none;
+}
+
+.qd-log-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.qd-log-ts {
+  color: var(--qd-log-muted);
+}
+
+.qd-log-mark {
+  background: var(--qd-log-mark);
+  border-radius: 2px;
+}
+
+.qd-log-resume {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  border: none;
+  border-radius: 999px;
+  background: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-size: $font-size-xs;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}

package/src/styles/_payload.scss

@@ -0,0 +1,312 @@
+/**
+ * PayloadViewer / PayloadDiff (#4112)
+ */
+
+@use 'variables' as *;
+
+.qd-payload {
+  --pl-tag: #22863a;
+  --pl-attr: #6f42c1;
+  --pl-value: #032f62;
+  --pl-comment: #6a737d;
+  --pl-ins-bg: rgba(46, 160, 67, 0.16);
+  --pl-del-bg: rgba(248, 81, 73, 0.16);
+
+  border: 1px solid var(--p-surface-200);
+  border-radius: $radius-sm;
+  overflow: hidden;
+  min-width: 0;
+  background: var(--p-surface-0);
+}
+
+.qd-payload-request {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--p-surface-200);
+  background: var(--p-surface-50);
+  font-size: $font-size-sm;
+}
+
+.qd-payload-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.pl-method {
+  font-weight: 700;
+  font-family: $font-family-mono;
+}
+
+.pl-url {
+  font-family: $font-family-mono;
+  word-break: break-all;
+  min-width: 0;
+}
+
+.pl-status {
+  padding: 0 0.5rem;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: $font-size-xs;
+  background: var(--p-surface-200);
+
+  &--ok { background: var(--p-green-100); color: var(--p-green-800); }
+  &--info { background: var(--p-blue-100); color: var(--p-blue-800); }
+  &--warn { background: var(--p-orange-100); color: var(--p-orange-800); }
+  &--error { background: var(--p-red-100); color: var(--p-red-800); }
+}
+
+.qd-payload-headers {
+  margin-top: 0.375rem;
+
+  summary {
+    cursor: pointer;
+    color: var(--p-text-muted-color);
+  }
+
+  table {
+    margin-top: 0.25rem;
+    border-collapse: collapse;
+    font-family: $font-family-mono;
+    font-size: $font-size-xs;
+  }
+
+  th {
+    text-align: left;
+    padding: 0.125rem 1rem 0.125rem 0;
+    font-weight: 600;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+
+  td {
+    word-break: break-all;
+  }
+}
+
+.qd-payload-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.125rem 0.5rem;
+  border-bottom: 1px solid var(--p-surface-200);
+  font-size: $font-size-xs;
+}
+
+.qd-payload-format {
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--p-text-muted-color);
+}
+
+.qd-payload-size {
+  color: var(--p-text-muted-color);
+}
+
+.qd-payload-spacer {
+  flex: 1;
+}
+
+.qd-payload-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+
+.qd-payload-warning,
+.qd-payload-identical {
+  padding: 0.375rem 0.75rem;
+  font-size: $font-size-sm;
+}
+
+.qd-payload-warning {
+  background: var(--p-orange-50);
+  color: var(--p-orange-800);
+}
+
+.qd-payload-identical {
+  background: var(--p-green-50);
+  color: var(--p-green-800);
+}
+
+.qd-payload-body {
+  overflow: auto;
+
+  .json-viewer {
+    border: none;
+    border-radius: 0;
+  }
+}
+
+.qd-payload-code {
+  margin: 0;
+  padding: 0.5rem 0.75rem 0.5rem 0;
+  font-family: $font-family-mono;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.pl-n {
+  display: inline-block;
+  min-width: 3rem;
+  padding-right: 0.75rem;
+  text-align: right;
+  color: var(--p-text-muted-color);
+  user-select: none;
+}
+
+.pl-tag { color: var(--pl-tag); }
+.pl-attr { color: var(--pl-attr); }
+.pl-value { color: var(--pl-value); }
+.pl-punct { color: var(--p-text-muted-color); }
+.pl-comment, .pl-decl { color: var(--pl-comment); font-style: italic; }
+.pl-cdata { color: var(--pl-comment); }
+
+.qd-payload-table-wrap {
+  min-width: 0;
+}
+
+.qd-payload-table {
+  border-collapse: collapse;
+  font-size: $font-size-sm;
+  width: max-content;
+  min-width: 100%;
+
+  th,
+  td {
+    padding: 0.25rem 0.75rem;
+    border-bottom: 1px solid var(--p-surface-100);
+    text-align: left;
+    vertical-align: top;
+    white-space: pre-wrap;
+  }
+
+  thead th {
+    position: sticky;
+    top: 0;
+    background: var(--p-surface-50);
+    font-weight: 600;
+  }
+
+  .pl-n {
+    display: table-cell;
+    min-width: 0;
+  }
+}
+
+.qd-payload-kv th {
+  font-family: $font-family-mono;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.qd-payload-more {
+  display: block;
+  width: 100%;
+  padding: 0.375rem;
+  border: none;
+  background: var(--p-surface-50);
+  color: var(--p-primary-color);
+  cursor: pointer;
+}
+
+.qd-payload-binary p {
+  margin: 0.5rem 0.75rem;
+  font-size: $font-size-sm;
+}
+
+// --- Diff ---
+
+.pl-count {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+
+  &--add { color: var(--p-green-600); }
+  &--del { color: var(--p-red-600); }
+  &--chg { color: var(--p-orange-600); }
+}
+
+.pl-diff {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-family: $font-family-mono;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+
+  th {
+    padding: 0.25rem 0.75rem;
+    background: var(--p-surface-50);
+    font-family: var(--p-font-family, inherit);
+    font-size: $font-size-xs;
+    text-align: left;
+  }
+
+  td {
+    padding: 0 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    vertical-align: top;
+  }
+
+  td.pl-n {
+    display: table-cell;
+    width: 3rem;
+    min-width: 0;
+  }
+
+  .pl-sign {
+    width: 1rem;
+    padding: 0;
+    text-align: center;
+  }
+}
+
+.pl-diff--split td:nth-child(3) {
+  border-left: 1px solid var(--p-surface-200);
+}
+
+.pl-ins,
+tr.pl-ins td {
+  background: var(--pl-ins-bg);
+}
+
+.pl-del,
+tr.pl-del td {
+  background: var(--pl-del-bg);
+}
+
+.pl-empty {
+  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--p-surface-100) 4px 8px);
+}
+
+.pl-fold td {
+  padding: 0;
+
+  button {
+    width: 100%;
+    padding: 0.125rem;
+    border: none;
+    background: var(--p-surface-100);
+    color: var(--p-text-muted-color);
+    font-size: $font-size-xs;
+    cursor: pointer;
+  }
+}
+
+.pl-csv-diff {
+  .pl-row--added td { background: var(--pl-ins-bg); }
+  .pl-row--removed td { background: var(--pl-del-bg); }
+
+  .pl-cell--changed {
+    background: color-mix(in srgb, var(--p-orange-400) 18%, transparent);
+
+    del { color: var(--p-red-700); }
+    ins { color: var(--p-green-700); text-decoration: none; font-weight: 600; }
+  }
+}