@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/styles/components/reagent-editor.css

@@ -1,501 +0,0 @@
-/* ReagentEditor Component Styles */
-
-.mint-reagent-editor {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-color);
-  border-top: 3px solid var(--reagent-color, var(--color-primary));
-  overflow: hidden;
-}
-
-/* Sections */
-
-.mint-reagent-editor__section {
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.mint-reagent-editor__section-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 0.75rem;
-}
-
-.mint-reagent-editor__section-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-  color: var(--reagent-color, var(--color-primary));
-  opacity: 0.7;
-}
-
-/* Identity */
-
-.mint-reagent-editor__identity {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-
-.mint-reagent-editor__color-wrapper {
-  position: relative;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.mint-reagent-editor__color-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.mint-reagent-editor__color-swatch {
-  display: block;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--radius);
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
-  transition: box-shadow 0.15s ease;
-}
-
-.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
-  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
-}
-
-.mint-reagent-editor__name-input {
-  flex: 1;
-  min-width: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: inherit;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  padding: 0.25rem 0;
-  border-bottom: 1px solid transparent;
-  transition: border-color 0.15s ease;
-}
-
-.mint-reagent-editor__name-input::placeholder {
-  color: var(--text-muted);
-  font-weight: 400;
-}
-
-.mint-reagent-editor__name-input:focus {
-  border-bottom-color: var(--reagent-color, var(--color-primary));
-}
-
-/* Fields & layout */
-
-.mint-reagent-editor__field {
-  margin-bottom: 0.625rem;
-}
-
-.mint-reagent-editor__field:last-child {
-  margin-bottom: 0;
-}
-
-.mint-reagent-editor__field--flex {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1 1 0;
-  width: 0;
-  min-width: 0;
-}
-
-.mint-reagent-editor__position-row {
-  display: flex;
-  gap: 0.625rem;
-  width: 100%;
-}
-
-.mint-reagent-editor .mint-select {
-  width: 100%;
-  min-width: 0;
-}
-
-.mint-reagent-editor__label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-.mint-reagent-editor__inline-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--form-height-sm);
-  padding: 0 0.625rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
-  text-transform: capitalize;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.mint-reagent-editor__inline-input::placeholder {
-  text-transform: none;
-}
-
-.mint-reagent-editor__inline-input:focus {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
-}
-
-.mint-reagent-editor__inline-input--error {
-  border-color: var(--mint-error);
-}
-
-.mint-reagent-editor__inline-input--error:focus {
-  border-color: var(--mint-error);
-  box-shadow: var(--focus-ring-error);
-}
-
-/* Inline field validation error */
-
-.mint-reagent-editor__field-error {
-  grid-column: 2;
-  font-size: 0.6875rem;
-  color: var(--mint-error);
-  line-height: 1.2;
-}
-
-/* Unit select in section header — uses reagent color */
-
-.mint-reagent-editor__unit-select {
-  margin-left: auto;
-  padding: 0.125rem 0.375rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  outline: none;
-  transition: background-color 0.15s ease;
-}
-
-.mint-reagent-editor__unit-select:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
-}
-
-/* Dilution generator */
-
-.mint-reagent-editor__generator {
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  padding: 0.75rem;
-  margin-bottom: 0.625rem;
-  overflow: hidden;
-}
-
-.mint-reagent-editor__generator-inputs {
-  display: flex;
-  gap: 0.625rem;
-  margin-bottom: 0.5rem;
-}
-
-.mint-reagent-editor__generator-inputs > * {
-  flex: 1;
-  min-width: 0;
-}
-
-/* Ensure all child controls fill their parent and can shrink */
-.mint-reagent-editor .mint-number-input {
-  width: 100%;
-  min-width: 0;
-}
-
-.mint-reagent-editor .mint-number-input__input {
-  min-width: 0;
-  width: 0;
-  flex: 1;
-}
-
-.mint-reagent-editor .mint-number-input:focus-within {
-  border-color: var(--reagent-color, var(--color-primary));
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
-}
-
-
-.mint-reagent-editor__presets {
-  display: flex;
-  gap: 0.375rem;
-}
-
-.mint-reagent-editor__preset-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.75rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.12s ease;
-}
-
-.mint-reagent-editor__preset-btn:hover {
-  color: var(--reagent-color, var(--color-primary));
-  border-color: var(--reagent-color, var(--color-primary));
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
-}
-
-.mint-reagent-editor__preset-btn:active {
-  transform: scale(0.96);
-}
-
-/* Manual entry */
-
-.mint-reagent-editor__manual {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.625rem;
-}
-
-.mint-reagent-editor__manual .mint-number-input {
-  flex: 1;
-  width: 0; /* flex-basis override so flex: 1 controls sizing */
-}
-
-.mint-reagent-editor__add-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--form-height-sm);
-  height: var(--form-height-sm);
-  flex-shrink: 0;
-  border-radius: var(--radius);
-  background-color: var(--reagent-color, var(--color-primary));
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: filter 0.15s ease, transform 0.1s ease;
-}
-
-.mint-reagent-editor__add-btn:hover:not(:disabled) {
-  filter: brightness(0.88);
-}
-
-.mint-reagent-editor__add-btn:active:not(:disabled) {
-  transform: scale(0.92);
-}
-
-.mint-reagent-editor__add-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
-}
-
-/* Level table */
-
-.mint-reagent-editor__table {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-  max-height: 14rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.mint-reagent-editor__table-body {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
-}
-
-.mint-reagent-editor__table-header {
-  display: flex;
-  align-items: center;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.mint-reagent-editor__table-row {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-  border-left: 2px solid transparent;
-  transition: background-color 0.1s ease, border-left-color 0.1s ease;
-}
-
-.mint-reagent-editor__table-row:last-child {
-  border-bottom: none;
-}
-
-.mint-reagent-editor__table-row:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
-  border-left-color: var(--reagent-color, var(--color-primary));
-}
-
-.mint-reagent-editor__table-col--level {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.mint-reagent-editor__table-col--reps {
-  width: 5.5rem;
-  flex-shrink: 0;
-}
-
-.mint-reagent-editor__table-col--action {
-  width: 1.75rem;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.mint-reagent-editor__level-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mint-reagent-editor__level-unit {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-
-.mint-reagent-editor__remove-level-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
-}
-
-.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
-  opacity: 1;
-}
-
-.mint-reagent-editor__remove-level-btn:hover {
-  color: var(--mint-error);
-  background-color: var(--mint-error-bg);
-}
-
-/* Empty state */
-
-.mint-reagent-editor__empty {
-  text-align: center;
-  padding: 1.25rem 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-/* Position summary — reagent-tinted background */
-
-.mint-reagent-editor__summary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
-  border-bottom: 1px solid var(--border-color);
-}
-
-.mint-reagent-editor__summary-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.mint-reagent-editor__summary-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--reagent-color, var(--text-primary));
-}
-
-.mint-reagent-editor__summary-label {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-
-.mint-reagent-editor__summary-dot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: var(--reagent-color, var(--text-muted));
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
-/* Overflow warning */
-
-.mint-reagent-editor__summary--overflow {
-  background-color: var(--mint-warning-bg);
-}
-
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
-  color: var(--mint-warning-hover);
-}
-
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
-  background-color: var(--mint-warning);
-}
-
-.mint-reagent-editor__summary-warning {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--mint-warning-hover);
-  margin-left: 0.25rem;
-}
-
-/* Footer */
-
-.mint-reagent-editor__footer {
-  padding: 0.75rem 1rem;
-}
-
-.mint-reagent-editor__footer .mint-button {
-  width: 100%;
-}