@morscherlab/mld-sdk 0.7.1 → 0.7.3

package/src/styles/components/experiment-data-viewer.css

@@ -0,0 +1,131 @@
+.mld-data-viewer {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+.mld-data-viewer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+  background: var(--mld-color-surface-1, #fafafa);
+  gap: 8px;
+}
+.mld-data-viewer__controls { display: flex; gap: 8px; }
+.mld-data-viewer__actions { display: flex; gap: 4px; align-items: center; }
+.mld-data-viewer__content {
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+.mld-data-viewer__loading,
+.mld-data-viewer__empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--mld-color-text-muted, #999);
+}
+
+/* Summary view */
+.mld-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Metadata pills row */
+.mld-summary__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.mld-summary__pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1;
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+}
+
+.mld-summary__pill--sm {
+  font-size: 0.75rem;
+}
+
+.mld-summary__pill-key {
+  padding: 4px 8px;
+  background: var(--mld-color-surface-1, #f5f5f5);
+  color: var(--mld-color-text-muted, #666);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.mld-summary__pill-value {
+  padding: 4px 8px;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+/* Section */
+.mld-summary__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mld-summary__section-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+.mld-summary__section-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  margin-left: 8px;
+}
+
+.mld-summary__table-header {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+/* Group cards */
+.mld-summary__group-card {
+  border: 1px solid var(--mld-color-border, #e0e0e0);
+  border-radius: var(--mld-radius-md, 8px);
+  overflow: hidden;
+}
+
+.mld-summary__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--mld-color-surface-1, #fafafa);
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}
+
+.mld-summary__group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--mld-color-text, #1a1a1a);
+}
+
+.mld-summary__group-count {
+  font-size: 0.75rem;
+  color: var(--mld-color-text-muted, #999);
+  background: var(--mld-color-surface-2, #eee);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.mld-summary__group-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--mld-color-border, #e0e0e0);
+}

package/src/styles/components/form-field.css

@@ -8,9 +8,11 @@
 
 .mld-form-field__label {
   display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
 }
 
 .mld-form-field__required {

package/src/styles/components/modal.css

@@ -67,7 +67,7 @@
 }
 
 .mld-modal__close {
-  padding: 0.25rem;
+  padding: 0.5rem;
   border-radius: var(--mld-radius-sm);
   color: var(--text-muted);
   background: none;

package/src/styles/components/select.css

@@ -33,7 +33,7 @@
 }
 
 .mld-select__control--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }

package/src/styles/components/slider.css

@@ -7,7 +7,7 @@
 }
 
 .mld-slider--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
 }
 
@@ -24,18 +24,14 @@
   left: 0;
   right: 0;
   border-radius: 9999px;
-  background-color: #E2E8F0;
-}
-
-html.dark .mld-slider__track {
-  background-color: #334155;
+  background-color: var(--bg-tertiary);
 }
 
 .mld-slider__fill {
   position: absolute;
   left: 0;
   border-radius: 9999px;
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 
 .mld-slider__input {
@@ -59,7 +55,7 @@ html.dark .mld-slider__track {
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
   background-color: white;
-  border: 2px solid #3B82F6;
+  border: 2px solid var(--color-primary);
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   pointer-events: none;
   transition: transform 150ms ease;

package/src/styles/components/tabs.css

@@ -103,6 +103,6 @@
   padding: 0.125rem 0.375rem;
   font-size: 0.75rem;
   border-radius: 9999px;
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
   color: var(--color-primary);
 }

package/src/styles/components/textarea.css

@@ -13,6 +13,10 @@
   color: var(--text-muted);
 }
 
+.mld-textarea:hover:not(:focus):not(.mld-textarea--disabled):not(.mld-textarea--error) {
+  border-color: var(--text-muted);
+}
+
 .mld-textarea:focus {
   outline: none;
   border-color: transparent;
@@ -28,7 +32,7 @@
 }
 
 .mld-textarea--disabled {
-  opacity: 0.5;
+  opacity: var(--mld-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }

package/src/styles/index.css

@@ -79,3 +79,5 @@
 @import './components/schedule-calendar.css';
 @import './components/resource-card.css';
 @import './components/form-builder.css';
+@import './components/experiment-data-viewer.css';
+@import './components/experiment-code-badge.css';

package/src/styles/variables.css

@@ -24,8 +24,9 @@
   --text-muted: #94A3B8;
 
   /* Brand colors */
-  --color-primary: #3B82F6;
-  --color-primary-hover: #2563EB;
+  --color-primary: #6366F1;
+  --color-primary-hover: #4F46E5;
+  --color-primary-soft: rgba(99, 102, 241, 0.12);
   --color-cta: #F97316;
   --color-cta-hover: #EA580C;
   --color-purple: #8B5CF6;
@@ -54,14 +55,19 @@
 
   /* Semantic colors */
   --mld-success: #10B981;
+  --mld-success-hover: #059669;
   --mld-success-bg: rgba(16, 185, 129, 0.1);
   --mld-error: #EF4444;
+  --mld-error-hover: #DC2626;
   --mld-error-bg: rgba(239, 68, 68, 0.1);
   --mld-warning: #F59E0B;
   --mld-warning-bg: rgba(245, 158, 11, 0.1);
   --mld-info: #3B82F6;
   --mld-info-bg: rgba(59, 130, 246, 0.1);
 
+  /* Shared component tokens */
+  --mld-disabled-opacity: 0.6;
+
   /* Legacy aliases (for backwards compatibility) */
   --mld-bg-primary: var(--bg-primary);
   --mld-bg-secondary: var(--bg-secondary);
@@ -308,7 +314,7 @@ code, pre {
 
 .input-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 
 .input-modern::placeholder {
@@ -341,7 +347,7 @@ code, pre {
 
 .select-modern:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }
 
 /* Label styles */
@@ -549,7 +555,7 @@ code, pre {
 }
 
 .bg-mld-primary {
-  background-color: #3B82F6;
+  background-color: var(--color-primary);
 }
 
 .text-mld-primary {
@@ -561,11 +567,11 @@ code, pre {
 }
 
 .bg-mld-primary\/5 {
-  background-color: rgba(59, 130, 246, 0.05);
+  background-color: rgba(99, 102, 241, 0.05);
 }
 
 .hover\:border-mld-primary\/50:hover {
-  border-color: rgba(59, 130, 246, 0.5);
+  border-color: rgba(99, 102, 241, 0.5);
 }
 
 /* Danger/error color utilities */
@@ -630,19 +636,19 @@ code, pre {
 }
 
 .hover\:bg-mld-success-hover:hover {
-  background-color: #059669;
+  background-color: var(--mld-success-hover);
 }
 
 .hover\:bg-mld-danger-hover:hover {
-  background-color: #DC2626;
+  background-color: var(--mld-error-hover);
 }
 
 .bg-mld-primary\/10 {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(99, 102, 241, 0.1);
 }
 
 .hover\:bg-mld-primary\/20:hover {
-  background-color: rgba(59, 130, 246, 0.2);
+  background-color: rgba(99, 102, 241, 0.2);
 }
 
 .bg-mld-info {
@@ -681,11 +687,11 @@ code, pre {
 }
 
 .text-mld-primary\/80 {
-  color: rgba(59, 130, 246, 0.8);
+  color: rgba(99, 102, 241, 0.8);
 }
 
 .hover\:text-mld-primary\/70:hover {
-  color: rgba(59, 130, 246, 0.7);
+  color: rgba(99, 102, 241, 0.7);
 }
 
 /* ==========================================================================

package/src/types/components.ts

@@ -567,6 +567,33 @@ export interface ScheduleEventUpdateContext {
   newEnd: Date
 }
 
+// Summary data types (for ExperimentDataViewer compact mode)
+export interface SummarySectionItem {
+  label: string
+  metadata?: Record<string, unknown>
+  item_count: number
+  item_key: string
+  columns: string[]
+  rows: Record<string, unknown>[]
+}
+
+export interface SummarySection {
+  key: string
+  label: string
+  type: 'table' | 'group'
+  /** Group sections: list of group items with embedded tables */
+  items?: SummarySectionItem[]
+  /** Table sections: flat table columns and rows */
+  columns?: string[]
+  rows?: Record<string, unknown>[]
+  row_count?: number
+}
+
+export interface SummaryData {
+  metadata: Record<string, unknown>
+  sections: SummarySection[]
+}
+
 // Resource types
 export type ResourceStatus = 'available' | 'in-use' | 'maintenance' | 'offline'
 

package/src/types/index.ts

@@ -117,6 +117,10 @@ export type {
   ScheduleSlotContext,
   ScheduleEventCreateContext,
   ScheduleEventUpdateContext,
+  // Summary data types
+  SummarySectionItem,
+  SummarySection,
+  SummaryData,
   // Resource types
   ResourceStatus,
   ResourceSpec,