@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/styles/components/empty-state.css

@@ -0,0 +1,151 @@
+/* EmptyState Component Styles */
+
+.mld-empty-state {
+  padding: 2rem;
+}
+
+.mld-empty-state--illustrated {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.mld-empty-state--inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border: 1px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-secondary);
+  text-align: left;
+}
+
+/* Sizes (illustrated only — inline is single size) */
+.mld-empty-state--sm { padding: 1rem; }
+.mld-empty-state--md { padding: 2rem; }
+.mld-empty-state--lg { padding: 3rem; }
+
+/* Inline overrides size-based padding to keep it compact */
+.mld-empty-state--inline.mld-empty-state--sm,
+.mld-empty-state--inline.mld-empty-state--md,
+.mld-empty-state--inline.mld-empty-state--lg {
+  padding: 1rem 1.25rem;
+}
+
+/* Icon wrapper — illustrated: 72px tile with gradient */
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 1rem;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Gradient fill from primary-soft → info-bg for the illustrated primary default */
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--primary {
+  background: linear-gradient(135deg, var(--color-primary-soft), var(--mint-info-bg));
+}
+
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--cta     { background: color-mix(in srgb, var(--color-cta) 10%, transparent); }
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--success { background: var(--mint-success-bg); }
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }
+.mld-empty-state--illustrated .mld-empty-state__icon-wrapper--muted   { background: var(--bg-tertiary); }
+
+/* Inline: 44x44 icon box (left-aligned) */
+.mld-empty-state--inline .mld-empty-state__icon-wrapper {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--color-primary-soft);
+}
+
+.mld-empty-state--inline .mld-empty-state__icon-wrapper--cta     { background: color-mix(in srgb, var(--color-cta) 10%, transparent); }
+.mld-empty-state--inline .mld-empty-state__icon-wrapper--success { background: var(--mint-success-bg); }
+.mld-empty-state--inline .mld-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
+.mld-empty-state--inline .mld-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }
+.mld-empty-state--inline .mld-empty-state__icon-wrapper--muted   { background: var(--bg-tertiary); }
+
+/* Icon sizes */
+.mld-empty-state--sm .mld-empty-state__icon { width: 32px; height: 32px; }
+.mld-empty-state--md .mld-empty-state__icon { width: 40px; height: 40px; }
+.mld-empty-state--lg .mld-empty-state__icon { width: 48px; height: 48px; }
+.mld-empty-state--inline .mld-empty-state__icon { width: 22px; height: 22px; }
+
+/* Icon colors */
+.mld-empty-state__icon--primary { color: var(--color-primary); }
+.mld-empty-state__icon--cta     { color: var(--color-cta); }
+.mld-empty-state__icon--success { color: var(--mint-success); }
+.mld-empty-state__icon--warning { color: var(--mint-warning); }
+.mld-empty-state__icon--error   { color: var(--mint-error); }
+.mld-empty-state__icon--muted   { color: var(--text-muted); }
+
+/* Body wrapper — in inline this is the flex-grow region */
+.mld-empty-state--inline .mld-empty-state__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Title */
+.mld-empty-state__title {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0.25rem !important;
+  padding: 0 !important;
+}
+
+.mld-empty-state--sm .mld-empty-state__title { font-size: 0.875rem; }
+.mld-empty-state--md .mld-empty-state__title { font-size: 1rem; }
+.mld-empty-state--lg .mld-empty-state__title { font-size: 1.125rem; }
+.mld-empty-state--inline .mld-empty-state__title { font-size: 0.875rem; }
+
+/* Description */
+.mld-empty-state__description {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  max-width: 28rem;
+  line-height: 1.5;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.mld-empty-state--inline .mld-empty-state__description {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+/* Action */
+.mld-empty-state--illustrated .mld-empty-state__action {
+  margin-top: 1rem;
+}
+
+.mld-empty-state--inline .mld-empty-state__action {
+  flex-shrink: 0;
+}
+
+.mld-empty-state__button {
+  background: var(--color-primary);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mld-empty-state__button:hover {
+  background: var(--color-primary-hover);
+}

package/src/styles/components/experiment-code-badge.css

@@ -0,0 +1,33 @@
+.mld-exp-code {
+  display: inline-flex;
+  align-items: center;
+  font-family: 'Fira Code', monospace;
+  font-weight: 600;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.02em;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mld-exp-code--sm { padding: 1px 6px; font-size: 11px; }
+.mld-exp-code--md { padding: 2px 8px; font-size: 12px; }
+.mld-exp-code--lg { padding: 3px 10px; font-size: 14px; }
+
+/* Copyable state */
+.mld-exp-code--copyable {
+  cursor: pointer;
+  user-select: none;
+}
+.mld-exp-code--copyable:hover {
+  background: var(--bg-hover);
+}
+.mld-exp-code--copyable:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+
+/* Copied feedback */
+.mld-exp-code--copied {
+  background: var(--mint-success-bg);
+  color: var(--mint-success);
+}

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

@@ -0,0 +1,138 @@
+.mld-data-viewer {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.mld-data-viewer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  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 {
+  padding: 24px 12px;
+}
+.mld-data-viewer__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mld-data-viewer__empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--text-muted);
+}
+
+/* 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(--border-color);
+}
+
+.mld-summary__pill--sm {
+  font-size: 0.75rem;
+}
+
+.mld-summary__pill-key {
+  padding: 4px 8px;
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.mld-summary__pill-value {
+  padding: 4px 8px;
+  color: var(--text-primary);
+}
+
+/* Section */
+.mld-summary__section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mld-summary__section-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.mld-summary__section-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-left: 8px;
+}
+
+.mld-summary__table-header {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+/* Group cards */
+.mld-summary__group-card {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.mld-summary__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.mld-summary__group-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.mld-summary__group-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background: var(--bg-tertiary);
+  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(--border-color);
+}