@skyfall_ai/aegis 0.1.0 → 0.2.0

package/dist/index.css

@@ -4320,4 +4320,545 @@ div.stepButton {
 .error .dismiss {
   color: var(--aegis-color-error-600);
 }
+
+/* src/charts/ChartCard.module.css */
+.card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--aegis-color-surface-default);
+  border: var(--aegis-border-width-hairline) solid var(--aegis-color-border-default);
+  border-radius: var(--aegis-radius-lg);
+  box-shadow: var(--aegis-shadow-sm);
+  overflow: hidden;
+  font-family: var(--aegis-font-family-sans);
+  transition: box-shadow var(--aegis-motion-duration-base) var(--aegis-motion-easing-standard);
+}
+.card:hover {
+  box-shadow: var(--aegis-shadow-md);
+}
+.comfortable {
+  padding: var(--aegis-space-6);
+  gap: var(--aegis-space-5);
+}
+.compact {
+  padding: var(--aegis-space-4);
+  gap: var(--aegis-space-3);
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--aegis-space-4);
+}
+.headerText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aegis-space-1);
+  min-width: 0;
+}
+.title {
+  margin: 0;
+  font-size: var(--aegis-font-size-heading-sm);
+  line-height: var(--aegis-line-height-heading-sm);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  letter-spacing: var(--aegis-tracking-tight);
+}
+.subtitle {
+  margin: 0;
+  font-size: var(--aegis-font-size-body-sm);
+  line-height: var(--aegis-line-height-body-sm);
+  color: var(--aegis-color-text-secondary);
+}
+.metricRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--aegis-space-3);
+  margin-top: var(--aegis-space-3);
+  flex-wrap: wrap;
+}
+.metric {
+  font-size: var(--aegis-font-size-display-md);
+  line-height: var(--aegis-line-height-display-md);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  letter-spacing: var(--aegis-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+.trendSlot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aegis-space-1);
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--aegis-space-2);
+  flex-shrink: 0;
+}
+.body {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+}
+.footer {
+  border-top: var(--aegis-border-width-hairline) solid var(--aegis-color-border-subtle);
+  padding-top: var(--aegis-space-4);
+  font-size: var(--aegis-font-size-body-sm);
+  color: var(--aegis-color-text-secondary);
+}
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--aegis-space-3);
+  min-height: 220px;
+  padding: var(--aegis-space-6);
+  text-align: center;
+}
+.placeholderTitle {
+  font-size: var(--aegis-font-size-body-md);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+}
+.placeholderText {
+  font-size: var(--aegis-font-size-body-sm);
+  color: var(--aegis-color-text-secondary);
+  max-width: 320px;
+}
+.skeletonBars {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--aegis-space-2);
+  height: 80px;
+  width: 200px;
+}
+.skeletonBars span {
+  flex: 1;
+  background:
+    linear-gradient(
+      180deg,
+      var(--aegis-color-surface-sunken) 0%,
+      var(--aegis-color-surface-hover) 100%);
+  border-radius: var(--aegis-radius-sm);
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}
+.skeletonBars span:nth-child(1) {
+  height: 40%;
+  animation-delay: 0ms;
+}
+.skeletonBars span:nth-child(2) {
+  height: 80%;
+  animation-delay: 100ms;
+}
+.skeletonBars span:nth-child(3) {
+  height: 55%;
+  animation-delay: 200ms;
+}
+.skeletonBars span:nth-child(4) {
+  height: 95%;
+  animation-delay: 300ms;
+}
+.skeletonBars span:nth-child(5) {
+  height: 65%;
+  animation-delay: 400ms;
+}
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 0.55;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeletonBars span {
+    animation: none;
+    opacity: 0.7;
+  }
+  .card {
+    transition: none;
+  }
+}
+
+/* src/charts/ChartTooltip.module.css */
+.tooltip {
+  background-color: var(--aegis-color-surface-overlay);
+  border: var(--aegis-border-width-hairline) solid var(--aegis-color-border-default);
+  border-radius: var(--aegis-radius-md);
+  box-shadow: var(--aegis-shadow-md);
+  padding: var(--aegis-space-3) var(--aegis-space-4);
+  min-width: 160px;
+  font-family: var(--aegis-font-family-sans);
+  pointer-events: none;
+}
+.label {
+  font-size: var(--aegis-font-size-caption);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--aegis-tracking-wide);
+  margin-bottom: var(--aegis-space-2);
+  padding-bottom: var(--aegis-space-2);
+  border-bottom: var(--aegis-border-width-hairline) solid var(--aegis-color-border-subtle);
+}
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--aegis-space-1);
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--aegis-space-2);
+  font-size: var(--aegis-font-size-body-sm);
+  color: var(--aegis-color-text-primary);
+}
+.swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--aegis-radius-sm);
+  flex-shrink: 0;
+}
+.name {
+  flex: 1;
+  color: var(--aegis-color-text-secondary);
+}
+.value {
+  font-family: var(--aegis-font-family-mono);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* src/charts/ChartLegend.module.css */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aegis-space-4);
+  list-style: none;
+  margin: 0;
+  padding: var(--aegis-space-3) 0 0;
+  font-family: var(--aegis-font-family-sans);
+}
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aegis-space-2);
+}
+.swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--aegis-radius-sm);
+  flex-shrink: 0;
+}
+.label {
+  font-size: var(--aegis-font-size-body-sm);
+  color: var(--aegis-color-text-secondary);
+  font-weight: var(--aegis-font-weight-medium);
+}
+
+/* src/charts/DonutChart.module.css */
+.layout {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr);
+  gap: var(--aegis-space-6);
+  align-items: center;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+.chartWrap {
+  position: relative;
+  width: 100%;
+}
+.center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.centerLabel {
+  font-family: var(--aegis-font-family-sans);
+  font-size: var(--aegis-font-size-display-md);
+  line-height: 1;
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  letter-spacing: var(--aegis-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+.centerSub {
+  margin-top: var(--aegis-space-1);
+  font-size: var(--aegis-font-size-caption);
+  text-transform: uppercase;
+  letter-spacing: var(--aegis-tracking-wide);
+  color: var(--aegis-color-text-secondary);
+  font-weight: var(--aegis-font-weight-medium);
+}
+.legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--aegis-space-2);
+}
+.legendItem {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  align-items: center;
+  gap: var(--aegis-space-3);
+  padding: var(--aegis-space-2) 0;
+  border-bottom: var(--aegis-border-width-hairline) solid var(--aegis-color-border-subtle);
+  font-size: var(--aegis-font-size-body-sm);
+}
+.legendItem:last-child {
+  border-bottom: none;
+}
+.swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--aegis-radius-sm);
+}
+.legendLabel {
+  color: var(--aegis-color-text-secondary);
+}
+.legendValue {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--aegis-space-2);
+  font-family: var(--aegis-font-family-mono);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.legendPct {
+  font-family: var(--aegis-font-family-sans);
+  font-size: var(--aegis-font-size-caption);
+  font-weight: var(--aegis-font-weight-medium);
+  color: var(--aegis-color-text-muted);
+}
+
+/* src/charts/KpiStatCard.module.css */
+.card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--aegis-color-surface-default);
+  border: var(--aegis-border-width-hairline) solid var(--aegis-color-border-default);
+  border-radius: var(--aegis-radius-lg);
+  box-shadow: var(--aegis-shadow-sm);
+  font-family: var(--aegis-font-family-sans);
+  transition: box-shadow var(--aegis-motion-duration-base) var(--aegis-motion-easing-standard), transform var(--aegis-motion-duration-base) var(--aegis-motion-easing-standard);
+}
+.card:hover {
+  box-shadow: var(--aegis-shadow-md);
+}
+.comfortable {
+  padding: var(--aegis-space-5);
+  gap: var(--aegis-space-4);
+}
+.compact {
+  padding: var(--aegis-space-4);
+  gap: var(--aegis-space-3);
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--aegis-space-3);
+}
+.label {
+  font-size: var(--aegis-font-size-label-md);
+  font-weight: var(--aegis-font-weight-medium);
+  color: var(--aegis-color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--aegis-tracking-wide);
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--aegis-radius-md);
+  background-color: var(--aegis-color-surface-subtle);
+  color: var(--aegis-color-text-secondary);
+}
+.valueRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--aegis-space-2);
+}
+.value {
+  font-size: var(--aegis-font-size-display-md);
+  line-height: var(--aegis-line-height-display-md);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  letter-spacing: var(--aegis-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+.unit {
+  font-size: var(--aegis-font-size-body-md);
+  font-weight: var(--aegis-font-weight-medium);
+  color: var(--aegis-color-text-muted);
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--aegis-space-3);
+  min-height: 40px;
+}
+.trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aegis-space-1);
+  font-size: var(--aegis-font-size-body-sm);
+  font-weight: var(--aegis-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  flex-wrap: wrap;
+}
+.trendIcon {
+  display: inline-flex;
+}
+.trendValue {
+  font-weight: var(--aegis-font-weight-semibold);
+}
+.up {
+  color: var(--aegis-color-success-700);
+}
+.down {
+  color: var(--aegis-color-error-700);
+}
+.neutral {
+  color: var(--aegis-color-text-muted);
+}
+.changeLabel {
+  margin-left: var(--aegis-space-1);
+  color: var(--aegis-color-text-muted);
+  font-weight: var(--aegis-font-weight-regular);
+}
+.sparkSlot {
+  flex: 1;
+  min-width: 0;
+  max-width: 50%;
+  display: flex;
+  justify-content: flex-end;
+}
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}
+
+/* src/charts/TrendStatCard.module.css */
+.card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--aegis-color-surface-default);
+  border: var(--aegis-border-width-hairline) solid var(--aegis-color-border-default);
+  border-radius: var(--aegis-radius-lg);
+  box-shadow: var(--aegis-shadow-sm);
+  padding: var(--aegis-space-5);
+  gap: var(--aegis-space-2);
+  font-family: var(--aegis-font-family-sans);
+  transition: box-shadow var(--aegis-motion-duration-base) var(--aegis-motion-easing-standard);
+  overflow: hidden;
+}
+.card:hover {
+  box-shadow: var(--aegis-shadow-md);
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--aegis-space-3);
+}
+.label {
+  font-size: var(--aegis-font-size-label-md);
+  font-weight: var(--aegis-font-weight-medium);
+  color: var(--aegis-color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--aegis-tracking-wide);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aegis-space-1);
+  padding: 2px var(--aegis-space-2);
+  border-radius: var(--aegis-radius-full);
+  font-size: var(--aegis-font-size-caption);
+  font-weight: var(--aegis-font-weight-semibold);
+  border: var(--aegis-border-width-hairline) solid currentColor;
+  background-color: transparent;
+}
+.up {
+  color: var(--aegis-color-success-700);
+  background-color: var(--aegis-color-success-50);
+  border-color: var(--aegis-color-border-success);
+}
+.down {
+  color: var(--aegis-color-error-700);
+  background-color: var(--aegis-color-error-50);
+  border-color: var(--aegis-color-border-error);
+}
+.neutral {
+  color: var(--aegis-color-text-muted);
+  background-color: var(--aegis-color-surface-subtle);
+  border-color: var(--aegis-color-border-default);
+}
+.valueRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--aegis-space-2);
+  margin-top: var(--aegis-space-1);
+}
+.value {
+  font-size: var(--aegis-font-size-display-md);
+  line-height: var(--aegis-line-height-display-md);
+  font-weight: var(--aegis-font-weight-semibold);
+  color: var(--aegis-color-text-primary);
+  letter-spacing: var(--aegis-tracking-tight);
+  font-variant-numeric: tabular-nums;
+}
+.unit {
+  font-size: var(--aegis-font-size-body-md);
+  color: var(--aegis-color-text-muted);
+  font-weight: var(--aegis-font-weight-medium);
+}
+.changeLabel {
+  font-size: var(--aegis-font-size-caption);
+  color: var(--aegis-color-text-muted);
+}
+.chartWrap {
+  width: calc(100% + var(--aegis-space-10));
+  margin: var(--aegis-space-2) calc(var(--aegis-space-5) * -1) calc(var(--aegis-space-5) * -1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}
 /*# sourceMappingURL=index.css.map */