@countermeasure-platform/web-components 1.3.5 → 1.3.6-dev.37.1

package/src/styles/layout.css

@@ -322,6 +322,583 @@
   }
 }
 
+/* ============================================================================
+   CORE APP LIBRARY DASHBOARD
+   ============================================================================ */
+.cmm-library-dashboard {
+  width: 100%;
+  min-width: 0;
+  min-height: calc(100vh - 3.5rem);
+  color: var(--color-text, hsl(var(--foreground)));
+}
+
+.cmm-library-dashboard__inner {
+  display: grid;
+  width: 100%;
+  max-width: 100rem;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 4rem;
+  gap: 1.75rem;
+}
+
+.cmm-library-dashboard__header {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.cmm-library-dashboard__title {
+  margin: 0;
+  color: var(--color-text, hsl(var(--foreground)));
+  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
+  font-size: 1.625rem;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.cmm-library-dashboard__subtitle {
+  margin: 0;
+  color: var(--color-text-muted, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.cmm-library-dashboard__meta {
+  display: flex;
+  width: min(100%, 72rem);
+  min-width: 0;
+  margin: -0.75rem auto 0;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.cmm-library-dashboard__timestamp,
+.cmm-library-dashboard__warning {
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border, hsl(var(--border)));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-card, hsl(var(--card))) 68%, transparent);
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+}
+
+.cmm-library-dashboard__warning {
+  border-color: color-mix(in srgb, #fbbf24 42%, var(--color-border, hsl(var(--border))));
+  color: color-mix(in srgb, #fbbf24 74%, var(--color-text, hsl(var(--foreground))));
+}
+
+.cmm-library-dashboard__metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  width: min(100%, 72rem);
+  margin: 0 auto;
+  gap: 0.75rem;
+}
+
+.cmm-library-dashboard__state,
+.cmm-library-dashboard__empty,
+.cmm-library-chart__empty {
+  display: grid;
+  min-width: 0;
+  place-items: center;
+  border: 1px dashed color-mix(in srgb, var(--color-border, hsl(var(--border))) 78%, transparent);
+  border-radius: 8px;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  line-height: 1.35;
+  text-align: center;
+}
+
+.cmm-library-dashboard__state {
+  width: min(100%, 72rem);
+  min-height: 10rem;
+  margin: 0 auto;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  background: color-mix(in srgb, var(--color-card, hsl(var(--card))) 58%, transparent);
+}
+
+.cmm-library-dashboard__state-title {
+  margin: 0;
+  color: var(--color-text, hsl(var(--foreground)));
+  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+
+.cmm-library-dashboard__state-detail {
+  max-width: 36rem;
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+.cmm-library-dashboard__empty {
+  min-height: 4.5rem;
+  padding: 0.875rem;
+  font-size: 0.75rem;
+}
+
+.cmm-library-chart__empty {
+  min-height: 9rem;
+  padding: 1rem;
+  font-size: 0.75rem;
+}
+
+.cmm-library-metric {
+  position: relative;
+  min-width: 0;
+  min-height: 4.5rem;
+  padding: 0.875rem 1rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border, hsl(var(--border)));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--color-card, hsl(var(--card))) 74%, transparent);
+}
+
+.cmm-library-metric::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 2px;
+  background: var(--color-orange-500, #f97316);
+  opacity: 0.9;
+}
+
+.cmm-library-metric[data-tone="cyan"]::before {
+  background: #22d3ee;
+}
+
+.cmm-library-metric[data-tone="violet"]::before {
+  background: #a78bfa;
+}
+
+.cmm-library-metric[data-tone="neutral"]::before {
+  background: color-mix(in srgb, var(--color-text-dim, #71717a) 60%, transparent);
+}
+
+.cmm-library-metric__label {
+  overflow: hidden;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.cmm-library-metric__value {
+  margin-top: 0.35rem;
+  color: var(--color-orange-500, #f97316);
+  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
+  font-size: 1.375rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.cmm-library-metric[data-tone="cyan"] .cmm-library-metric__value {
+  color: #22d3ee;
+}
+
+.cmm-library-metric[data-tone="violet"] .cmm-library-metric__value {
+  color: #a78bfa;
+}
+
+.cmm-library-metric[data-tone="neutral"] .cmm-library-metric__value {
+  color: var(--color-text, hsl(var(--foreground)));
+}
+
+.cmm-library-metric__helper {
+  margin-top: 0.35rem;
+  overflow: hidden;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.625rem;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmm-library-dashboard__charts {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  width: min(100%, 72rem);
+  margin: 0 auto;
+  gap: 2.5rem;
+  align-items: start;
+}
+
+.cmm-library-chart {
+  min-width: 0;
+}
+
+.cmm-library-chart__title {
+  margin: 0 0 0.75rem;
+  color: var(--color-text, hsl(var(--foreground)));
+  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.cmm-library-depth {
+  display: grid;
+  gap: 0.32rem;
+}
+
+.cmm-library-depth__row {
+  display: grid;
+  grid-template-columns: 4rem minmax(0, 1fr);
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.cmm-library-depth__label {
+  overflow: hidden;
+  color: #64748b;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.625rem;
+  line-height: 1.2;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmm-library-depth__track {
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: 999px;
+}
+
+.cmm-library-depth__bar {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(to right, var(--color-orange-500, #f97316), #fb923c);
+}
+
+.cmm-library-depth__axis {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  margin-left: 4.75rem;
+  padding-top: 0.125rem;
+  color: #475569;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.625rem;
+  line-height: 1.2;
+}
+
+.cmm-library-depth__axis span {
+  text-align: left;
+}
+
+.cmm-library-freshness {
+  display: grid;
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+  gap: 0.5rem;
+  min-height: 9rem;
+}
+
+.cmm-library-freshness__axis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #64748b;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.625rem;
+  line-height: 1;
+  text-align: right;
+}
+
+.cmm-library-freshness__plot {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0.375rem, 1fr);
+  gap: 0.36rem;
+  align-items: end;
+  min-width: 0;
+  height: 9rem;
+}
+
+.cmm-library-freshness__bucket {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 0;
+  align-items: end;
+  justify-content: center;
+}
+
+.cmm-library-freshness__stack {
+  display: flex;
+  width: 100%;
+  max-width: 0.5rem;
+  min-height: 0.5rem;
+  overflow: hidden;
+  flex-direction: column-reverse;
+  border-radius: 0.125rem 0.125rem 0 0;
+}
+
+.cmm-library-freshness__segment {
+  display: block;
+  min-height: 2px;
+}
+
+.cmm-library-freshness__segment[data-tone="cyan"] {
+  background: #22d3ee;
+}
+
+.cmm-library-freshness__segment[data-tone="green"] {
+  background: #34d399;
+}
+
+.cmm-library-freshness__segment[data-tone="orange"] {
+  background: var(--color-orange-500, #f97316);
+}
+
+.cmm-library-freshness__label {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+  color: #64748b;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.625rem;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.cmm-library-dashboard__pipeline {
+  display: grid;
+  width: min(100%, 72rem);
+  margin: 0 auto;
+  gap: 0.75rem;
+}
+
+.cmm-library-dashboard__pipeline-heading {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.cmm-library-dashboard__eyebrow {
+  margin: 0;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+
+.cmm-library-dashboard__pipeline-summary {
+  display: inline-flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+}
+
+.cmm-library-dashboard__pipeline-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.cmm-library-pipeline-card {
+  display: grid;
+  min-width: 0;
+  min-height: 6.25rem;
+  gap: 0.65rem;
+  padding: 0.875rem;
+  border: 1px solid var(--color-border, hsl(var(--border)));
+  border-top-color: color-mix(in srgb, #fb7185 70%, var(--color-border, hsl(var(--border))));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--color-card, hsl(var(--card))) 74%, transparent);
+}
+
+.cmm-library-pipeline-card[data-status="active"] {
+  border-top-color: color-mix(in srgb, #34d399 70%, var(--color-border, hsl(var(--border))));
+}
+
+.cmm-library-pipeline-card[data-status="paused"] {
+  border-top-color: color-mix(in srgb, #fbbf24 70%, var(--color-border, hsl(var(--border))));
+}
+
+.cmm-library-pipeline-card__head,
+.cmm-library-pipeline-card__foot {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.cmm-library-pipeline-card__name-wrap {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.cmm-library-pipeline-card__glyph {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 auto;
+  border: 1px solid var(--color-text-dim, hsl(var(--muted-foreground)));
+  border-radius: 0.18rem;
+  opacity: 0.7;
+}
+
+.cmm-library-pipeline-card__name {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text, hsl(var(--foreground)));
+  font-family: var(--font-display, var(--font-sans, system-ui, sans-serif));
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmm-library-pipeline-card__badge {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 0.1875rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.5625rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.cmm-library-pipeline-card__badge[data-tone="success"] {
+  border-color: rgb(52 211 153 / 30%);
+  background: rgb(52 211 153 / 10%);
+  color: #34d399;
+}
+
+.cmm-library-pipeline-card__badge[data-tone="error"] {
+  border-color: rgb(251 113 133 / 30%);
+  background: rgb(251 113 133 / 10%);
+  color: #fb7185;
+}
+
+.cmm-library-pipeline-card__badge[data-tone="warn"] {
+  border-color: rgb(251 191 36 / 30%);
+  background: rgb(251 191 36 / 10%);
+  color: #fbbf24;
+}
+
+.cmm-library-pipeline-card__badge[data-tone="neutral"] {
+  border-color: var(--color-border, hsl(var(--border)));
+  background: rgb(255 255 255 / 4%);
+  color: var(--color-text-muted, hsl(var(--muted-foreground)));
+}
+
+.cmm-library-pipeline-card__meta {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border, hsl(var(--border)));
+}
+
+.cmm-library-pipeline-card__meta span {
+  overflow: hidden;
+  max-width: 100%;
+  padding: 0.1875rem 0.4rem;
+  border: 1px solid var(--color-border, hsl(var(--border)));
+  border-radius: 4px;
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.5625rem;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmm-library-pipeline-card__foot {
+  color: var(--color-text-dim, hsl(var(--muted-foreground)));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.5625rem;
+  line-height: 1.2;
+}
+
+.cmm-library-pipeline-card__foot span {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 1279px) {
+  .cmm-library-dashboard__metrics,
+  .cmm-library-dashboard__charts,
+  .cmm-library-dashboard__pipeline {
+    width: 100%;
+  }
+
+  .cmm-library-dashboard__pipeline-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1023px) {
+  .cmm-library-dashboard__inner {
+    padding: 1.25rem 1rem 3rem;
+  }
+
+  .cmm-library-dashboard__metrics,
+  .cmm-library-dashboard__charts {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cmm-library-dashboard__pipeline-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .cmm-library-dashboard__metrics,
+  .cmm-library-dashboard__charts,
+  .cmm-library-dashboard__pipeline-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cmm-library-dashboard__title {
+    font-size: 1.5rem;
+  }
+
+  .cmm-library-depth__axis {
+    margin-left: 0;
+  }
+}
+
 .cmm-page-header {
   display: grid;
   gap: var(--space-3);

package/src/styles/sidebar.css

@@ -14,6 +14,8 @@
    <div class="sidebar__backdrop" data-sidebar-backdrop="{app}"></div>
    ============================================================================ */
 
+@import "./components/brand.css";
+
 /* -----------------------------------------------------------------------------
    Base Sidebar Styles
    ----------------------------------------------------------------------------- */
@@ -1294,6 +1296,12 @@ button.sidebar__brand {
   justify-content: center;
 }
 
+.sidebar--collapsed .sidebar__brand {
+  justify-content: center;
+  width: 100%;
+}
+
+.sidebar--collapsed .cmm-brand-lockup__copy,
 .sidebar--collapsed .cmm-brand-lockup__wordmark {
   display: none;
 }
@@ -1455,6 +1463,15 @@ button.sidebar__brand {
   z-index: -1;
 }
 
+.sidebar--cm {
+  --cmm-sidebar-width: var(--spacing-sidebar, var(--sidebar-width, 240px));
+}
+
+.sidebar--threat-library {
+  --cmm-sidebar-bg: var(--color-bg-tertiary, #111111);
+  --cmm-sidebar-width: var(--sidebar-width, 240px);
+}
+
 .sidebar--product .sidebar__header,
 .sidebar--analyst-console .sidebar__header,
 .sidebar--security .sidebar__header,
@@ -1486,6 +1503,14 @@ button.sidebar__brand {
   letter-spacing: 0.1em;
 }
 
+.sidebar--product .cmm-brand-lockup--title .cmm-brand-lockup__wordmark,
+.sidebar--analyst-console .cmm-brand-lockup--title .cmm-brand-lockup__wordmark,
+.sidebar--security .cmm-brand-lockup--title .cmm-brand-lockup__wordmark,
+.sidebar--admin .cmm-brand-lockup--title .cmm-brand-lockup__wordmark {
+  font-size: 0.875rem;
+  letter-spacing: 0;
+}
+
 .sidebar--product .sidebar__collapse-btn--edge,
 .sidebar--analyst-console .sidebar__collapse-btn--edge,
 .sidebar--security .sidebar__collapse-btn--edge,
@@ -2081,6 +2106,7 @@ button.sidebar__brand {
     justify-content: flex-start;
   }
 
+  .sidebar--collapsed .cmm-brand-lockup__copy,
   .sidebar--collapsed .cmm-brand-lockup__wordmark {
     display: inline-flex;
   }