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

package/src/styles/components/segmented-control.css

@@ -1,13 +1,13 @@
 /* SegmentedControl Component Styles */
 
-.mld-segmented-control {
+.mint-segmented-control {
   display: inline-flex;
   border-radius: var(--radius);
   overflow: hidden;
 }
 
 /* Card variant container - matches RFA design */
-.mld-segmented-control--card {
+.mint-segmented-control--card {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
@@ -18,22 +18,22 @@
   overflow: visible;
 }
 
-.mld-segmented-control--full-width:not(.mld-segmented-control--card) {
+.mint-segmented-control--full-width:not(.mint-segmented-control--card) {
   display: flex;
   width: 100%;
 }
 
-.mld-segmented-control--card.mld-segmented-control--full-width {
+.mint-segmented-control--card.mint-segmented-control--full-width {
   width: 100%;
 }
 
-.mld-segmented-control--disabled {
+.mint-segmented-control--disabled {
   opacity: var(--mint-disabled-opacity);
   pointer-events: none;
 }
 
 /* Options - shared styles */
-.mld-segmented-control__option {
+.mint-segmented-control__option {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -48,44 +48,44 @@
   box-sizing: border-box;
 }
 
-.mld-segmented-control__option:focus-visible {
+.mint-segmented-control__option:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
   z-index: 1;
 }
 
-.mld-segmented-control__option--disabled {
+.mint-segmented-control__option--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 /* Remove double borders between adjacent options (simple variant only) */
-.mld-segmented-control:not(.mld-segmented-control--card) .mld-segmented-control__option + .mld-segmented-control__option {
+.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option + .mint-segmented-control__option {
   margin-left: -1px;
 }
 
 /* First and last option border radius (simple variant only) */
-.mld-segmented-control:not(.mld-segmented-control--card) .mld-segmented-control__option:first-child {
+.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:first-child {
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
 
-.mld-segmented-control:not(.mld-segmented-control--card) .mld-segmented-control__option:last-child {
+.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:last-child {
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
 }
 
 /* Simple variant */
-.mld-segmented-control__option--simple {
+.mint-segmented-control__option--simple {
   flex: 1;
   padding: 0.5rem 1rem;
 }
 
-.mld-segmented-control__option--simple:hover:not(.mld-segmented-control__option--active):not(.mld-segmented-control__option--disabled) {
+.mint-segmented-control__option--simple:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
   background-color: var(--bg-hover);
 }
 
-.mld-segmented-control__option--simple.mld-segmented-control__option--active {
+.mint-segmented-control__option--simple.mint-segmented-control__option--active {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: white;
@@ -93,7 +93,7 @@
 }
 
 /* Card variant - matches RFA raised card design */
-.mld-segmented-control__option--card {
+.mint-segmented-control__option--card {
   flex: 1;
   padding: 0.75rem 1rem;
   gap: 0.25rem;
@@ -103,12 +103,12 @@
   color: var(--text-muted);
 }
 
-.mld-segmented-control__option--card:hover:not(.mld-segmented-control__option--active):not(.mld-segmented-control__option--disabled) {
+.mint-segmented-control__option--card:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
   background-color: var(--bg-hover);
   color: var(--text-primary);
 }
 
-.mld-segmented-control__option--card.mld-segmented-control__option--active {
+.mint-segmented-control__option--card.mint-segmented-control__option--active {
   background-color: var(--bg-card);
   color: var(--text-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -116,19 +116,19 @@
 
 /* Size variants - simple — 1px optical padding shift universally (0.16+).
    See CLAUDE.md § Optical Centering. */
-.mld-segmented-control__option--simple.mld-segmented-control__option--sm {
+.mint-segmented-control__option--simple.mint-segmented-control__option--sm {
   padding: 0.3125rem 0.75rem 0.4375rem;
   font-size: 0.75rem;
   min-height: var(--form-height-sm);
 }
 
-.mld-segmented-control__option--simple.mld-segmented-control__option--md {
+.mint-segmented-control__option--simple.mint-segmented-control__option--md {
   padding: 0.4375rem 1rem 0.5625rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
-.mld-segmented-control__option--simple.mld-segmented-control__option--lg {
+.mint-segmented-control__option--simple.mint-segmented-control__option--lg {
   /* 9/11 (not 11/13 like BaseButton lg) — SegmentedControl uses a smaller
      em-box at 1rem font + 1.25 line-height, so the 1px shift lands here. */
   padding: 0.5625rem 1.25rem 0.6875rem;
@@ -137,38 +137,38 @@
 }
 
 /* Size variants - card */
-.mld-segmented-control__option--card.mld-segmented-control__option--sm {
+.mint-segmented-control__option--card.mint-segmented-control__option--sm {
   padding: 0.5rem 0.75rem;
 }
 
-.mld-segmented-control__option--card.mld-segmented-control__option--md {
+.mint-segmented-control__option--card.mint-segmented-control__option--md {
   padding: 0.75rem 1rem;
 }
 
-.mld-segmented-control__option--card.mld-segmented-control__option--lg {
+.mint-segmented-control__option--card.mint-segmented-control__option--lg {
   padding: 1rem 1.25rem;
 }
 
 /* Label */
-.mld-segmented-control__label {
+.mint-segmented-control__label {
   font-weight: 500;
   line-height: 1.25;
 }
 
-.mld-segmented-control__option--sm .mld-segmented-control__label {
+.mint-segmented-control__option--sm .mint-segmented-control__label {
   font-size: 0.75rem;
 }
 
-.mld-segmented-control__option--md .mld-segmented-control__label {
+.mint-segmented-control__option--md .mint-segmented-control__label {
   font-size: 0.875rem;
 }
 
-.mld-segmented-control__option--lg .mld-segmented-control__label {
+.mint-segmented-control__option--lg .mint-segmented-control__label {
   font-size: 1rem;
 }
 
 /* Description (card variant only) */
-.mld-segmented-control__description {
+.mint-segmented-control__description {
   font-size: 0.75rem;
   color: var(--text-muted);
   font-weight: 400;
@@ -176,22 +176,22 @@
 }
 
 /* Description color in active state - use text-muted for card variant, primary for simple */
-.mld-segmented-control__option--simple.mld-segmented-control__option--active .mld-segmented-control__description {
+.mint-segmented-control__option--simple.mint-segmented-control__option--active .mint-segmented-control__description {
   color: rgba(255, 255, 255, 0.8);
 }
 
-.mld-segmented-control__option--card.mld-segmented-control__option--active .mld-segmented-control__description {
+.mint-segmented-control__option--card.mint-segmented-control__option--active .mint-segmented-control__description {
   color: var(--text-muted);
 }
 
-.mld-segmented-control__option--sm .mld-segmented-control__description {
+.mint-segmented-control__option--sm .mint-segmented-control__description {
   font-size: 0.625rem;
 }
 
-.mld-segmented-control__option--md .mld-segmented-control__description {
+.mint-segmented-control__option--md .mint-segmented-control__description {
   font-size: 0.75rem;
 }
 
-.mld-segmented-control__option--lg .mld-segmented-control__description {
+.mint-segmented-control__option--lg .mint-segmented-control__description {
   font-size: 0.875rem;
 }

package/src/styles/components/select.css

@@ -1,10 +1,10 @@
 /* BaseSelect Component Styles */
 
-.mld-select {
+.mint-select {
   position: relative;
 }
 
-.mld-select__control {
+.mint-select__control {
   width: 100%;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
@@ -18,48 +18,48 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.mld-select__control:focus-visible {
+.mint-select__control:focus-visible {
   outline: none;
   border-color: transparent;
   box-shadow: var(--focus-ring);
 }
 
-.mld-select__control--error {
+.mint-select__control--error {
   border-color: var(--mint-error);
 }
 
-.mld-select__control--error:focus-visible {
+.mint-select__control--error:focus-visible {
   box-shadow: var(--focus-ring-error);
 }
 
-.mld-select__control--disabled {
+.mint-select__control--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
 
-.mld-select__control--sm {
+.mint-select__control--sm {
   padding: 0.375rem 0.625rem;
   padding-right: 2.5rem;
   font-size: 0.875rem;
   min-height: var(--form-height-sm);
 }
 
-.mld-select__control--md {
+.mint-select__control--md {
   padding: 0.5rem 0.75rem;
   padding-right: 2.5rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
-.mld-select__control--lg {
+.mint-select__control--lg {
   padding: 0.75rem 1rem;
   padding-right: 2.5rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);
 }
 
-.mld-select__icon {
+.mint-select__icon {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -70,7 +70,7 @@
   pointer-events: none;
 }
 
-.mld-select__icon svg {
+.mint-select__icon svg {
   width: 1rem;
   height: 1rem;
   color: var(--text-muted);

package/src/styles/components/sequence-input.css

@@ -1,6 +1,6 @@
 /* SequenceInput Component Styles */
 
-.mld-sequence-input {
+.mint-sequence-input {
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-md);
@@ -9,25 +9,25 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.mld-sequence-input:focus-within {
+.mint-sequence-input:focus-within {
   border-color: transparent;
   box-shadow: var(--focus-ring);
 }
 
-.mld-sequence-input--error {
+.mint-sequence-input--error {
   border-color: var(--mint-error);
 }
 
-.mld-sequence-input--error:focus-within {
+.mint-sequence-input--error:focus-within {
   box-shadow: var(--focus-ring-error);
 }
 
-.mld-sequence-input--disabled {
+.mint-sequence-input--disabled {
   opacity: var(--mint-disabled-opacity);
 }
 
 /* Toolbar */
-.mld-sequence-input__toolbar {
+.mint-sequence-input__toolbar {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -36,7 +36,7 @@
   border-bottom: 1px solid var(--border-color);
 }
 
-.mld-sequence-input__tool-btn {
+.mint-sequence-input__tool-btn {
   padding: 0.25rem 0.5rem;
   font-size: 0.6875rem;
   font-weight: 500;
@@ -48,24 +48,24 @@
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.mld-sequence-input__tool-btn:hover:not(:disabled) {
+.mint-sequence-input__tool-btn:hover:not(:disabled) {
   background-color: var(--bg-hover);
   color: var(--text-primary);
 }
 
-.mld-sequence-input__tool-btn:disabled {
+.mint-sequence-input__tool-btn:disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
-.mld-sequence-input__tool-sep {
+.mint-sequence-input__tool-sep {
   width: 1px;
   height: 1rem;
   background-color: var(--border-color);
   margin: 0 0.125rem;
 }
 
-.mld-sequence-input__type-badge {
+.mint-sequence-input__type-badge {
   margin-left: auto;
   padding: 0.125rem 0.375rem;
   font-size: 0.625rem;
@@ -78,11 +78,11 @@
 }
 
 /* Editor area */
-.mld-sequence-input__editor {
+.mint-sequence-input__editor {
   position: relative;
 }
 
-.mld-sequence-input__textarea {
+.mint-sequence-input__textarea {
   width: 100%;
   resize: vertical;
   border: none;
@@ -95,18 +95,18 @@
   background-color: var(--bg-secondary);
 }
 
-.mld-sequence-input__textarea::placeholder {
+.mint-sequence-input__textarea::placeholder {
   color: var(--text-muted);
   font-family: 'Fira Sans', system-ui, sans-serif;
 }
 
-.mld-sequence-input__textarea:disabled {
+.mint-sequence-input__textarea:disabled {
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
 
 /* Viewer (readonly mode) */
-.mld-sequence-input__viewer {
+.mint-sequence-input__viewer {
   padding: 0.5rem 0;
   background-color: var(--bg-secondary);
   font-family: 'Fira Code', monospace;
@@ -115,16 +115,16 @@
   overflow-x: auto;
 }
 
-.mld-sequence-input__viewer-line {
+.mint-sequence-input__viewer-line {
   display: flex;
   padding: 0 0.75rem;
 }
 
-.mld-sequence-input__viewer-line:hover {
+.mint-sequence-input__viewer-line:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sequence-input__line-number {
+.mint-sequence-input__line-number {
   width: 3rem;
   flex-shrink: 0;
   text-align: right;
@@ -134,35 +134,35 @@
   user-select: none;
 }
 
-.mld-sequence-input__line-content {
+.mint-sequence-input__line-content {
   white-space: pre;
   word-break: break-all;
 }
 
 /* Base coloring */
-.mld-sequence-input__base--a {
+.mint-sequence-input__base--a {
   color: var(--mint-success);
 }
 
-.mld-sequence-input__base--t,
-.mld-sequence-input__base--u {
+.mint-sequence-input__base--t,
+.mint-sequence-input__base--u {
   color: var(--mint-error);
 }
 
-.mld-sequence-input__base--g {
+.mint-sequence-input__base--g {
   color: var(--mint-warning);
 }
 
-.mld-sequence-input__base--c {
+.mint-sequence-input__base--c {
   color: var(--mint-info);
 }
 
-.mld-sequence-input__base--n {
+.mint-sequence-input__base--n {
   color: var(--text-muted);
 }
 
 /* Stats bar */
-.mld-sequence-input__stats {
+.mint-sequence-input__stats {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -173,11 +173,11 @@
   color: var(--text-secondary);
 }
 
-.mld-sequence-input__stat-label {
+.mint-sequence-input__stat-label {
   color: var(--text-muted);
 }
 
-.mld-sequence-input__stat-value {
+.mint-sequence-input__stat-value {
   font-weight: 500;
   color: var(--text-primary);
   margin-left: 0.25rem;

package/src/styles/components/settings-button.css

@@ -1,11 +1,11 @@
 /* SettingsButton Component Styles */
 
-.mld-settings-button {
+.mint-settings-button {
   position: relative;
   display: inline-flex;
 }
 
-.mld-settings-button__trigger {
+.mint-settings-button__trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21,59 +21,59 @@
   transform: translateY(0);
 }
 
-.mld-settings-button__trigger:hover {
+.mint-settings-button__trigger:hover {
   background-color: var(--bg-hover);
   color: var(--text-primary);
   transform: translateY(-1px);
 }
 
-.mld-settings-button__trigger:active {
+.mint-settings-button__trigger:active {
   transform: translateY(0);
   transition-duration: 0.05s;
 }
 
-.mld-settings-button__trigger:focus-visible {
+.mint-settings-button__trigger:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mld-settings-button__trigger,
-  .mld-settings-button__trigger:hover,
-  .mld-settings-button__trigger:active {
+  .mint-settings-button__trigger,
+  .mint-settings-button__trigger:hover,
+  .mint-settings-button__trigger:active {
     transform: none;
     transition: color 0.15s ease, background-color 0.15s ease;
   }
 }
 
-.mld-settings-button__trigger--sm {
+.mint-settings-button__trigger--sm {
   padding: 0.375rem;
 }
 
-.mld-settings-button__trigger--md {
+.mint-settings-button__trigger--md {
   padding: 0.5rem;
 }
 
-.mld-settings-button__trigger--lg {
+.mint-settings-button__trigger--lg {
   padding: 0.75rem;
 }
 
-.mld-settings-button__icon--sm {
+.mint-settings-button__icon--sm {
   width: 1rem;
   height: 1rem;
 }
 
-.mld-settings-button__icon--md {
+.mint-settings-button__icon--md {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.mld-settings-button__icon--lg {
+.mint-settings-button__icon--lg {
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.mld-settings-dropdown {
+.mint-settings-dropdown {
   position: absolute;
   top: calc(100% + 0.5rem);
   right: 0;
@@ -86,7 +86,7 @@
   overflow: hidden;
 }
 
-.mld-settings-dropdown__empty {
+.mint-settings-dropdown__empty {
   padding: 1rem;
   color: var(--text-muted);
   font-size: 0.875rem;

package/src/styles/components/settings-modal.css

@@ -1,12 +1,12 @@
 /* SettingsModal Component Styles */
 
-.mld-settings-modal {
+.mint-settings-modal {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.mld-settings-modal__tabs {
+.mint-settings-modal__tabs {
   display: flex;
   gap: 0.25rem;
   border-bottom: 1px solid var(--border-color);
@@ -14,7 +14,7 @@
   margin-bottom: 0.5rem;
 }
 
-.mld-settings-modal__tab {
+.mint-settings-modal__tab {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -27,24 +27,24 @@
   margin-bottom: -1px;
 }
 
-.mld-settings-modal__tab:hover {
+.mint-settings-modal__tab:hover {
   color: var(--text-primary);
 }
 
-.mld-settings-modal__tab--active {
+.mint-settings-modal__tab--active {
   color: var(--color-primary);
   border-bottom-color: var(--color-primary);
 }
 
-.mld-settings-modal__content {
+.mint-settings-modal__content {
   min-height: 12rem;
 }
 
-.mld-settings-modal__section {
+.mint-settings-modal__section {
   margin-bottom: 1.5rem;
 }
 
-.mld-settings-modal__section-label {
+.mint-settings-modal__section-label {
   font-size: 0.6875rem;
   font-weight: 500;
   text-transform: uppercase;
@@ -53,13 +53,13 @@
   margin-bottom: 0.5rem;
 }
 
-.mld-settings-modal__option-group {
+.mint-settings-modal__option-group {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.mld-settings-modal__option-btn {
+.mint-settings-modal__option-btn {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
@@ -71,22 +71,22 @@
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.mld-settings-modal__option-btn:hover {
+.mint-settings-modal__option-btn:hover {
   background-color: var(--bg-tertiary);
   color: var(--text-primary);
 }
 
-.mld-settings-modal__option-btn--active {
+.mint-settings-modal__option-btn--active {
   color: var(--color-primary);
   border-color: var(--color-primary);
   background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
 }
 
-html.dark .mld-settings-modal__option-btn--active {
+html.dark .mint-settings-modal__option-btn--active {
   background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
 }
 
-.mld-settings-modal__note {
+.mint-settings-modal__note {
   font-size: 0.75rem;
   color: var(--text-muted);
   margin-top: 0.375rem !important;

package/src/styles/components/skeleton.css

@@ -21,10 +21,10 @@
   );
   background-size: 200% 100%;
   background-repeat: no-repeat;
-  animation: mld-skeleton-shimmer 1.6s ease-in-out infinite;
+  animation: mint-skeleton-shimmer 1.6s ease-in-out infinite;
 }
 
-@keyframes mld-skeleton-shimmer {
+@keyframes mint-skeleton-shimmer {
   0%   { background-position: 100% 0; }
   100% { background-position: -100% 0; }
 }