@morscherlab/mint-sdk 1.0.0-alpha.7 → 1.0.0-alpha.9

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

@@ -1,6 +1,6 @@
 /* ReagentEditor Component Styles */
 
-.mld-reagent-editor {
+.mint-reagent-editor {
   display: flex;
   flex-direction: column;
   background-color: var(--bg-secondary);
@@ -12,12 +12,12 @@
 
 /* Sections */
 
-.mld-reagent-editor__section {
+.mint-reagent-editor__section {
   padding: 0.875rem 1rem;
   border-bottom: 1px solid var(--border-color);
 }
 
-.mld-reagent-editor__section-header {
+.mint-reagent-editor__section-header {
   display: flex;
   align-items: center;
   gap: 0.375rem;
@@ -29,7 +29,7 @@
   margin-bottom: 0.75rem;
 }
 
-.mld-reagent-editor__section-icon {
+.mint-reagent-editor__section-icon {
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
@@ -39,19 +39,19 @@
 
 /* Identity */
 
-.mld-reagent-editor__identity {
+.mint-reagent-editor__identity {
   display: flex;
   align-items: center;
   gap: 0.625rem;
 }
 
-.mld-reagent-editor__color-wrapper {
+.mint-reagent-editor__color-wrapper {
   position: relative;
   flex-shrink: 0;
   cursor: pointer;
 }
 
-.mld-reagent-editor__color-input {
+.mint-reagent-editor__color-input {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -60,7 +60,7 @@
   cursor: pointer;
 }
 
-.mld-reagent-editor__color-swatch {
+.mint-reagent-editor__color-swatch {
   display: block;
   width: 1.75rem;
   height: 1.75rem;
@@ -69,11 +69,11 @@
   transition: box-shadow 0.15s ease;
 }
 
-.mld-reagent-editor__color-wrapper:hover .mld-reagent-editor__color-swatch {
+.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));
 }
 
-.mld-reagent-editor__name-input {
+.mint-reagent-editor__name-input {
   flex: 1;
   min-width: 0;
   background: transparent;
@@ -88,26 +88,26 @@
   transition: border-color 0.15s ease;
 }
 
-.mld-reagent-editor__name-input::placeholder {
+.mint-reagent-editor__name-input::placeholder {
   color: var(--text-muted);
   font-weight: 400;
 }
 
-.mld-reagent-editor__name-input:focus {
+.mint-reagent-editor__name-input:focus {
   border-bottom-color: var(--reagent-color, var(--color-primary));
 }
 
 /* Fields & layout */
 
-.mld-reagent-editor__field {
+.mint-reagent-editor__field {
   margin-bottom: 0.625rem;
 }
 
-.mld-reagent-editor__field:last-child {
+.mint-reagent-editor__field:last-child {
   margin-bottom: 0;
 }
 
-.mld-reagent-editor__field--flex {
+.mint-reagent-editor__field--flex {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -116,29 +116,29 @@
   min-width: 0;
 }
 
-.mld-reagent-editor__row {
+.mint-reagent-editor__row {
   display: flex;
   gap: 0.75rem;
 }
 
-.mld-reagent-editor__position-row {
+.mint-reagent-editor__position-row {
   display: flex;
   gap: 0.625rem;
   width: 100%;
 }
 
-.mld-reagent-editor .mld-select {
+.mint-reagent-editor .mint-select {
   width: 100%;
   min-width: 0;
 }
 
-.mld-reagent-editor__label {
+.mint-reagent-editor__label {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
 
-.mld-reagent-editor__inline-input {
+.mint-reagent-editor__inline-input {
   box-sizing: border-box;
   width: 100%;
   min-height: var(--form-height-sm);
@@ -155,27 +155,27 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.mld-reagent-editor__inline-input::placeholder {
+.mint-reagent-editor__inline-input::placeholder {
   text-transform: none;
 }
 
-.mld-reagent-editor__inline-input:focus {
+.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);
 }
 
-.mld-reagent-editor__inline-input--error {
+.mint-reagent-editor__inline-input--error {
   border-color: var(--mint-error);
 }
 
-.mld-reagent-editor__inline-input--error:focus {
+.mint-reagent-editor__inline-input--error:focus {
   border-color: var(--mint-error);
   box-shadow: var(--focus-ring-error);
 }
 
 /* Inline field validation error */
 
-.mld-reagent-editor__field-error {
+.mint-reagent-editor__field-error {
   grid-column: 2;
   font-size: 0.6875rem;
   color: var(--mint-error);
@@ -184,7 +184,7 @@
 
 /* Unit select in section header — uses reagent color */
 
-.mld-reagent-editor__unit-select {
+.mint-reagent-editor__unit-select {
   margin-left: auto;
   padding: 0.125rem 0.375rem;
   font-family: 'Fira Code', monospace;
@@ -199,13 +199,13 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-reagent-editor__unit-select:hover {
+.mint-reagent-editor__unit-select:hover {
   background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
 }
 
 /* Dilution generator */
 
-.mld-reagent-editor__generator {
+.mint-reagent-editor__generator {
   background-color: var(--bg-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
@@ -214,41 +214,41 @@
   overflow: hidden;
 }
 
-.mld-reagent-editor__generator-inputs {
+.mint-reagent-editor__generator-inputs {
   display: flex;
   gap: 0.625rem;
   margin-bottom: 0.5rem;
 }
 
-.mld-reagent-editor__generator-inputs > * {
+.mint-reagent-editor__generator-inputs > * {
   flex: 1;
   min-width: 0;
 }
 
 /* Ensure all child controls fill their parent and can shrink */
-.mld-reagent-editor .mld-number-input {
+.mint-reagent-editor .mint-number-input {
   width: 100%;
   min-width: 0;
 }
 
-.mld-reagent-editor .mld-number-input__input {
+.mint-reagent-editor .mint-number-input__input {
   min-width: 0;
   width: 0;
   flex: 1;
 }
 
-.mld-reagent-editor .mld-number-input:focus-within {
+.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);
 }
 
 
-.mld-reagent-editor__presets {
+.mint-reagent-editor__presets {
   display: flex;
   gap: 0.375rem;
 }
 
-.mld-reagent-editor__preset-btn {
+.mint-reagent-editor__preset-btn {
   flex: 1;
   display: flex;
   align-items: center;
@@ -265,31 +265,31 @@
   transition: all 0.12s ease;
 }
 
-.mld-reagent-editor__preset-btn:hover {
+.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);
 }
 
-.mld-reagent-editor__preset-btn:active {
+.mint-reagent-editor__preset-btn:active {
   transform: scale(0.96);
 }
 
 /* Manual entry */
 
-.mld-reagent-editor__manual {
+.mint-reagent-editor__manual {
   display: flex;
   align-items: center;
   gap: 0.375rem;
   margin-bottom: 0.625rem;
 }
 
-.mld-reagent-editor__manual .mld-number-input {
+.mint-reagent-editor__manual .mint-number-input {
   flex: 1;
   width: 0; /* flex-basis override so flex: 1 controls sizing */
 }
 
-.mld-reagent-editor__add-btn {
+.mint-reagent-editor__add-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -304,22 +304,22 @@
   transition: filter 0.15s ease, transform 0.1s ease;
 }
 
-.mld-reagent-editor__add-btn:hover:not(:disabled) {
+.mint-reagent-editor__add-btn:hover:not(:disabled) {
   filter: brightness(0.88);
 }
 
-.mld-reagent-editor__add-btn:active:not(:disabled) {
+.mint-reagent-editor__add-btn:active:not(:disabled) {
   transform: scale(0.92);
 }
 
-.mld-reagent-editor__add-btn:disabled {
+.mint-reagent-editor__add-btn:disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 /* Level table */
 
-.mld-reagent-editor__table {
+.mint-reagent-editor__table {
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   overflow: hidden;
@@ -328,14 +328,14 @@
   flex-direction: column;
 }
 
-.mld-reagent-editor__table-body {
+.mint-reagent-editor__table-body {
   flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-.mld-reagent-editor__table-header {
+.mint-reagent-editor__table-header {
   display: flex;
   align-items: center;
   padding: 0.375rem 0.5rem;
@@ -343,7 +343,7 @@
   border-bottom: 1px solid var(--border-color);
 }
 
-.mld-reagent-editor__table-header .mld-reagent-editor__table-col {
+.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
   font-size: 0.6875rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -351,7 +351,7 @@
   color: var(--text-muted);
 }
 
-.mld-reagent-editor__table-row {
+.mint-reagent-editor__table-row {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.5rem;
@@ -360,16 +360,16 @@
   transition: background-color 0.1s ease, border-left-color 0.1s ease;
 }
 
-.mld-reagent-editor__table-row:last-child {
+.mint-reagent-editor__table-row:last-child {
   border-bottom: none;
 }
 
-.mld-reagent-editor__table-row:hover {
+.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));
 }
 
-.mld-reagent-editor__table-col--level {
+.mint-reagent-editor__table-col--level {
   flex: 1;
   min-width: 0;
   display: flex;
@@ -377,19 +377,19 @@
   gap: 0.25rem;
 }
 
-.mld-reagent-editor__table-col--reps {
+.mint-reagent-editor__table-col--reps {
   width: 5.5rem;
   flex-shrink: 0;
 }
 
-.mld-reagent-editor__table-col--action {
+.mint-reagent-editor__table-col--action {
   width: 1.75rem;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
 }
 
-.mld-reagent-editor__level-value {
+.mint-reagent-editor__level-value {
   font-family: 'Fira Code', monospace;
   font-size: 0.8125rem;
   font-weight: 500;
@@ -399,13 +399,13 @@
   white-space: nowrap;
 }
 
-.mld-reagent-editor__level-unit {
+.mint-reagent-editor__level-unit {
   font-family: 'Fira Code', monospace;
   font-size: 0.6875rem;
   color: var(--text-muted);
 }
 
-.mld-reagent-editor__remove-level-btn {
+.mint-reagent-editor__remove-level-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -420,18 +420,18 @@
   transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
 }
 
-.mld-reagent-editor__table-row:hover .mld-reagent-editor__remove-level-btn {
+.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
   opacity: 1;
 }
 
-.mld-reagent-editor__remove-level-btn:hover {
+.mint-reagent-editor__remove-level-btn:hover {
   color: var(--mint-error);
   background-color: var(--mint-error-bg);
 }
 
 /* Empty state */
 
-.mld-reagent-editor__empty {
+.mint-reagent-editor__empty {
   text-align: center;
   padding: 1.25rem 0.75rem;
   font-size: 0.8125rem;
@@ -441,7 +441,7 @@
 
 /* Position summary — reagent-tinted background */
 
-.mld-reagent-editor__summary {
+.mint-reagent-editor__summary {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -451,25 +451,25 @@
   border-bottom: 1px solid var(--border-color);
 }
 
-.mld-reagent-editor__summary-item {
+.mint-reagent-editor__summary-item {
   display: flex;
   align-items: baseline;
   gap: 0.25rem;
 }
 
-.mld-reagent-editor__summary-value {
+.mint-reagent-editor__summary-value {
   font-family: 'Fira Code', monospace;
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--reagent-color, var(--text-primary));
 }
 
-.mld-reagent-editor__summary-label {
+.mint-reagent-editor__summary-label {
   font-size: 0.6875rem;
   color: var(--text-muted);
 }
 
-.mld-reagent-editor__summary-dot {
+.mint-reagent-editor__summary-dot {
   width: 3px;
   height: 3px;
   border-radius: 50%;
@@ -480,19 +480,19 @@
 
 /* Overflow warning */
 
-.mld-reagent-editor__summary--overflow {
+.mint-reagent-editor__summary--overflow {
   background-color: var(--mint-warning-bg);
 }
 
-.mld-reagent-editor__summary--overflow .mld-reagent-editor__summary-value {
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
   color: var(--mint-warning-hover);
 }
 
-.mld-reagent-editor__summary--overflow .mld-reagent-editor__summary-dot {
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
   background-color: var(--mint-warning);
 }
 
-.mld-reagent-editor__summary-warning {
+.mint-reagent-editor__summary-warning {
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--mint-warning-hover);
@@ -501,10 +501,10 @@
 
 /* Footer */
 
-.mld-reagent-editor__footer {
+.mint-reagent-editor__footer {
   padding: 0.75rem 1rem;
 }
 
-.mld-reagent-editor__footer .mld-button {
+.mint-reagent-editor__footer .mint-button {
   width: 100%;
 }