@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/styles/components/input.css

@@ -0,0 +1,66 @@
+/* BaseInput Component Styles */
+
+.mld-input {
+  display: block;
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+}
+
+.mld-input::placeholder {
+  color: var(--text-muted);
+}
+
+.mld-input:hover:not(:focus-visible):not(.mld-input--disabled):not(.mld-input--error) {
+  border-color: var(--text-muted);
+}
+
+.mld-input:focus,
+.mld-input:focus-visible {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-soft);
+}
+
+.mld-input--error {
+  border-color: var(--mint-error);
+}
+
+.mld-input--error:focus,
+.mld-input--error:focus-visible {
+  box-shadow: var(--focus-ring-soft-error);
+}
+
+.mld-input--disabled,
+.mld-input:disabled {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+/* Size variants — 1px optical padding shift (0.16+).
+   See CLAUDE.md § Optical Centering. */
+.mld-input--sm {
+  padding: 0.3125rem 0.625rem 0.4375rem;
+  font-size: 0.8125rem;
+  min-height: var(--form-height-sm);
+}
+
+.mld-input--md {
+  padding: 0.4375rem 0.75rem 0.5625rem;
+  font-size: 0.875rem;
+  min-height: var(--form-height-md);
+}
+
+.mld-input--lg {
+  padding: 0.6875rem 1rem 0.8125rem;
+  font-size: 1rem;
+  min-height: var(--form-height-lg);
+}

package/src/styles/components/loading-spinner.css

@@ -0,0 +1,67 @@
+/* LoadingSpinner Component Styles */
+
+.mld-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mld-spinner__svg {
+  animation: mld-spin 1s linear infinite;
+}
+
+/* Sizes */
+.mld-spinner--xs .mld-spinner__svg {
+  width: 16px;
+  height: 16px;
+}
+
+.mld-spinner--sm .mld-spinner__svg {
+  width: 20px;
+  height: 20px;
+}
+
+.mld-spinner--md .mld-spinner__svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mld-spinner--lg .mld-spinner__svg {
+  width: 32px;
+  height: 32px;
+}
+
+/* Variants */
+.mld-spinner--primary {
+  color: var(--color-primary);
+}
+
+.mld-spinner--cta {
+  color: var(--color-cta);
+}
+
+.mld-spinner--muted {
+  color: var(--text-muted);
+}
+
+/* Screen-reader only label */
+.mld-spinner__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@keyframes mld-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/components/modal.css

@@ -0,0 +1,350 @@
+/* BaseModal Component Styles — aligned with SDK Component Refresh · V1 Refined */
+
+/* ========================================================================
+   Modal Backdrop — variant-agnostic outer wrapper
+   ========================================================================
+   The outer .mld-modal positions the modal in the viewport. Variant
+   modifiers (.mld-modal--drawer / .mld-modal--sheet) repoint the
+   flex alignment so the container slides in from the relevant edge.
+   ======================================================================== */
+
+.mld-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  padding: 1rem;
+}
+
+.mld-modal--centered {
+  align-items: center;
+  justify-content: center;
+}
+
+.mld-modal--drawer {
+  align-items: stretch;   /* fill viewport height */
+  justify-content: flex-end;
+  padding: 0;             /* drawer flush to the right edge */
+}
+
+.mld-modal--sheet {
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;             /* sheet flush to the bottom edge */
+}
+
+.mld-modal__overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px) saturate(0.6);
+  -webkit-backdrop-filter: blur(4px) saturate(0.6);
+}
+
+/* ========================================================================
+   Modal Container — shared card DNA
+   ======================================================================== */
+
+.mld-modal__container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 0.875rem;
+  box-shadow:
+    0 1.875rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
+    0 0.75rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);
+  overflow: hidden;
+}
+
+/* ---------- Centered variant — card DNA with height cap (unchanged visually) ---------- */
+
+.mld-modal__container--centered {
+  max-height: calc(100vh - 2rem);
+}
+
+/* ---------- Drawer variant — fills viewport height, right-edge anchored ---------- */
+
+.mld-modal__container--drawer {
+  max-height: 100vh;
+  height: 100vh;
+  border-radius: 0.875rem 0 0 0.875rem;   /* radius drops on right edge */
+  border-right: none;
+  box-shadow:
+    -1.25rem 0 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
+    -0.5rem 0 1.5rem -0.5rem rgba(15, 23, 42, 0.2);   /* shadow casts leftward */
+}
+
+/* ---------- Sheet variant — bottom-edge anchored, top-only radius ---------- */
+
+.mld-modal__container--sheet {
+  max-height: calc(100vh - 3rem);
+  border-radius: 0.875rem 0.875rem 0 0;   /* top corners only */
+  border-bottom: none;
+  box-shadow:
+    0 -1.25rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
+    0 -0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);   /* shadow casts upward */
+}
+
+/* ========================================================================
+   Size scale — widened across sm/md/lg/xl per spec §7
+   ========================================================================
+   Before: sm 24 · md 30 · lg 34 · xl 38 · full 56
+   After:  sm 28 · md 35 · lg 45 · xl 57.5 · full 56 (unchanged)
+   ======================================================================== */
+
+.mld-modal__container--sm   { max-width: 28rem; }
+.mld-modal__container--md   { max-width: 35rem; }
+.mld-modal__container--lg   { max-width: 45rem; }
+.mld-modal__container--xl   { max-width: 57.5rem; }
+.mld-modal__container--full { max-width: 56rem; }
+
+/* Drawer width ramps — narrower than centered widths since drawer fills height */
+.mld-modal__container--drawer.mld-modal__container--sm   { max-width: 21.25rem; /* 340px */ }
+.mld-modal__container--drawer.mld-modal__container--md   { max-width: 30rem;    /* 480px */ }
+.mld-modal__container--drawer.mld-modal__container--lg   { max-width: 40rem;    /* 640px */ }
+.mld-modal__container--drawer.mld-modal__container--xl   { max-width: 48rem;    /* 768px */ }
+.mld-modal__container--drawer.mld-modal__container--full { max-width: 100%;     /* full-drawer */ }
+
+/* Sheet widths — wider than drawer but still centered horizontally. Mobile override drops to 100% below */
+.mld-modal__container--sheet.mld-modal__container--sm   { max-width: 23.75rem; /* 380px */ }
+.mld-modal__container--sheet.mld-modal__container--md   { max-width: 28.75rem; /* 460px */ }
+.mld-modal__container--sheet.mld-modal__container--lg   { max-width: 36rem;    /* 576px */ }
+.mld-modal__container--sheet.mld-modal__container--xl   { max-width: 45rem;    /* 720px */ }
+.mld-modal__container--sheet.mld-modal__container--full { max-width: 100%; }
+
+/* ========================================================================
+   Grab-hint bar (sheet only)
+   ======================================================================== */
+
+.mld-modal__grab-hint {
+  width: 2.5rem;
+  height: 3px;
+  background-color: var(--border-color);
+  border-radius: 9999px;
+  margin: 0.5rem auto 0;
+  flex-shrink: 0;
+}
+
+/* ========================================================================
+   Header / body / footer (shared — unchanged vs. current modal.css)
+   ======================================================================== */
+
+.mld-modal__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 1.125rem 1.25rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.mld-modal__header-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-modal__title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--text-primary);
+  line-height: 1.3;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+
+.mld-modal__subtitle {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin: 0.125rem 0 0;
+}
+
+.mld-modal__close {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border-radius: 0.4375rem;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: color var(--mint-transition), background-color var(--mint-transition);
+}
+
+.mld-modal__close:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
+}
+
+.mld-modal__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mld-modal__close-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  display: block;
+}
+
+.mld-modal__body {
+  padding: 1.125rem 1.25rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  line-height: 1.55;
+}
+
+.mld-modal__footer {
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--border-light);
+  background-color: var(--bg-primary);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* ========================================================================
+   Per-variant transitions
+   ========================================================================
+   Each variant uses its own Vue <Transition name> so enter/leave
+   animations can be independently tuned.
+   ======================================================================== */
+
+/* Centered — opacity fade on backdrop, scale+opacity on card (unchanged behavior) */
+.modal-centered-enter-active,
+.modal-centered-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-centered-enter-active .mld-modal__container,
+.modal-centered-leave-active .mld-modal__container {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.modal-centered-enter-from,
+.modal-centered-leave-to {
+  opacity: 0;
+}
+.modal-centered-enter-from .mld-modal__container,
+.modal-centered-leave-to .mld-modal__container {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* Drawer — slide in from right */
+.modal-drawer-enter-active,
+.modal-drawer-leave-active {
+  transition: opacity 0.25s ease;
+}
+.modal-drawer-enter-active .mld-modal__container,
+.modal-drawer-leave-active .mld-modal__container {
+  transition: transform 0.25s ease;
+}
+.modal-drawer-enter-from,
+.modal-drawer-leave-to {
+  opacity: 0;
+}
+.modal-drawer-enter-from .mld-modal__container,
+.modal-drawer-leave-to .mld-modal__container {
+  transform: translateX(100%);
+}
+
+/* Sheet — slide in from bottom */
+.modal-sheet-enter-active,
+.modal-sheet-leave-active {
+  transition: opacity 0.25s ease;
+}
+.modal-sheet-enter-active .mld-modal__container,
+.modal-sheet-leave-active .mld-modal__container {
+  transition: transform 0.25s ease;
+}
+.modal-sheet-enter-from,
+.modal-sheet-leave-to {
+  opacity: 0;
+}
+.modal-sheet-enter-from .mld-modal__container,
+.modal-sheet-leave-to .mld-modal__container {
+  transform: translateY(100%);
+}
+
+/* Reduced-motion — collapse to instant opacity swap on all variants */
+@media (prefers-reduced-motion: reduce) {
+  .modal-centered-enter-active,
+  .modal-centered-leave-active,
+  .modal-drawer-enter-active,
+  .modal-drawer-leave-active,
+  .modal-sheet-enter-active,
+  .modal-sheet-leave-active {
+    transition: opacity 0.1s ease;
+  }
+
+  .modal-centered-enter-active .mld-modal__container,
+  .modal-centered-leave-active .mld-modal__container,
+  .modal-drawer-enter-active .mld-modal__container,
+  .modal-drawer-leave-active .mld-modal__container,
+  .modal-sheet-enter-active .mld-modal__container,
+  .modal-sheet-leave-active .mld-modal__container {
+    transition: opacity 0.1s ease;
+    transform: none !important;
+  }
+}
+
+/* ========================================================================
+   Mobile auto-sheet — applies to any variant on narrow viewports
+   ========================================================================
+   When the viewport is < 768px, every modal behaves like a sheet:
+   - Backdrop aligns to bottom.
+   - Container fills width, sheet-shaped top corners, no side radius.
+   - Non-sheet variants pick up the sheet's slide-up animation.
+   Pure CSS — no JS detection needed.
+   ======================================================================== */
+
+@media (max-width: 767px) {
+  .mld-modal {
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .mld-modal__container,
+  .mld-modal__container--centered,
+  .mld-modal__container--drawer,
+  .mld-modal__container--sheet {
+    width: 100%;
+    max-width: 100%;
+    max-height: calc(100vh - 3rem);
+    height: auto;
+    border-radius: 0.875rem 0.875rem 0 0;
+    border-bottom: none;
+    border-right: 1px solid var(--border-color);   /* restore right border for full-width */
+    box-shadow:
+      0 -1.25rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
+      0 -0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);
+  }
+
+  /* All size variants collapse to 100% width under mobile */
+  .mld-modal__container--sm,
+  .mld-modal__container--md,
+  .mld-modal__container--lg,
+  .mld-modal__container--xl,
+  .mld-modal__container--full {
+    max-width: 100%;
+  }
+
+  /* Non-sheet variants flip to sheet-like slide-up animation under mobile */
+  .modal-centered-enter-from .mld-modal__container,
+  .modal-centered-leave-to .mld-modal__container,
+  .modal-drawer-enter-from .mld-modal__container,
+  .modal-drawer-leave-to .mld-modal__container {
+    transform: translateY(100%);
+  }
+}

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

@@ -0,0 +1,186 @@
+/* MoleculeInput Component Styles */
+
+.mld-molecule-input {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  overflow: hidden;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.mld-molecule-input:focus-within {
+  border-color: transparent;
+  box-shadow: var(--focus-ring);
+}
+
+.mld-molecule-input--disabled {
+  opacity: var(--mint-disabled-opacity);
+  pointer-events: none;
+}
+
+.mld-molecule-input--readonly {
+  pointer-events: none;
+}
+
+.mld-molecule-input--error {
+  border-color: var(--mint-error);
+}
+
+.mld-molecule-input--error:focus-within {
+  box-shadow: var(--focus-ring-error);
+}
+
+/* Editor container */
+.mld-molecule-input__editor {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  background-color: var(--bg-secondary);
+}
+
+.mld-molecule-input__editor iframe {
+  border: none;
+  display: block;
+}
+
+/* Skeleton loader */
+.mld-molecule-input__skeleton {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  height: 100%;
+  min-height: 200px;
+  background-color: var(--bg-tertiary);
+}
+
+.mld-molecule-input__skeleton-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--text-muted);
+  animation: mld-molecule-pulse 1.5s ease-in-out infinite;
+}
+
+.mld-molecule-input__skeleton-text {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+@keyframes mld-molecule-pulse {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Readonly SVG display */
+.mld-molecule-input__readonly {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 1rem;
+  background-color: var(--bg-tertiary);
+}
+
+.mld-molecule-input__readonly svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Empty state */
+.mld-molecule-input__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 200px;
+  padding: 1rem;
+  color: var(--text-muted);
+}
+
+.mld-molecule-input__empty-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.mld-molecule-input__empty-text {
+  font-size: 0.875rem;
+}
+
+/* SMILES preview */
+.mld-molecule-input__smiles {
+  padding: 0.5rem 0.75rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  border-top: 1px solid var(--border-color);
+  word-break: break-all;
+  user-select: all;
+}
+
+.mld-molecule-input__smiles-label {
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-right: 0.5rem;
+}
+
+/* Error state */
+.mld-molecule-input__error {
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--mint-error);
+  background-color: var(--mint-error-bg);
+  border-top: 1px solid var(--mint-error);
+}
+
+.mld-molecule-input__error-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+}
+
+/* Actions toolbar */
+.mld-molecule-input__actions {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-top: 1px solid var(--border-color);
+}
+
+.mld-molecule-input__action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.mld-molecule-input__action-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
+}
+
+.mld-molecule-input__action-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.mld-molecule-input__action-btn svg {
+  width: 1rem;
+  height: 1rem;
+}