@morscherlab/mint-sdk 1.4.0-beta.15 → 1.4.0-beta.17

package/src/styles/components/onboarding.css

@@ -0,0 +1,368 @@
+/* Onboarding: the top-bar Help button and checklist chip, the Help panel,
+ * the tour layer (scrim, hole, card) and the what's-new dots. */
+
+:root {
+  --mint-onboarding-scrim: rgba(15, 23, 42, 0.45);
+}
+
+html.dark {
+  --mint-onboarding-scrim: rgba(2, 6, 23, 0.62);
+}
+
+/* ---- Top bar ---- */
+
+.mint-onboarding-help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.mint-topbar__settings-btn--open {
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-primary);
+  font: 500 0.8125rem/1 var(--font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+
+.mint-onboarding-help__chip:hover {
+  background: var(--bg-hover);
+}
+
+.mint-onboarding-help__chip--open {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1 var(--font-mono);
+}
+
+.mint-onboarding-help__bar {
+  width: 1.75rem;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font: 600 11px/16px var(--font-sans);
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--bg-card);
+}
+
+/* ---- Help panel ---- */
+
+.mint-onboarding-help__panel {
+  position: fixed;
+  z-index: 1000;
+  width: 18rem;
+  padding: 0 0 4px;
+  overflow: hidden;
+}
+
+.mint-onboarding-help__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.75rem 0.5rem;
+}
+
+.mint-onboarding-help__heading {
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__progress {
+  height: 3px;
+  margin: 0 0.75rem 0.25rem;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__progress > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__todos {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mint-onboarding-help__todo {
+  display: grid;
+  grid-template-columns: 1rem 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.875rem;
+  padding: 0 0.75rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+}
+
+.mint-onboarding-help__check {
+  display: grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  box-sizing: border-box;
+  border: 1.5px solid var(--border-color);
+  border-radius: 50%;
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__check {
+  border: 0;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__todo-title {
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__link {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--_ink-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mint-onboarding-help__link:hover {
+  text-decoration: underline;
+}
+
+.mint-onboarding-help__link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__hide {
+  display: block;
+  text-align: left;
+  margin: 0.25rem 0.75rem 0.5rem;
+  color: var(--text-secondary);
+}
+
+.mint-onboarding-help__section {
+  padding: 0.625rem 0.75rem 0.25rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__panel > .mint-menu-item {
+  width: calc(100% - 8px);
+  margin: 0 4px;
+}
+
+.mint-onboarding-help__new {
+  margin-left: auto;
+  padding: 3px 4px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* ---- Tour layer ---- */
+
+.mint-onboarding {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  pointer-events: none;
+}
+
+/* Takes every click outside the card. An advanceOn 'click' step cuts the hole out of it. */
+.mint-onboarding__blocker {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+
+.mint-onboarding__hole {
+  position: fixed;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 9999px var(--mint-onboarding-scrim);
+  pointer-events: none;
+  transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
+}
+
+.mint-onboarding__card {
+  position: fixed;
+  display: grid;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  width: 17rem;
+  max-width: calc(100vw - 24px);
+  padding: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  pointer-events: auto;
+}
+
+.mint-onboarding__card:focus {
+  outline: none;
+}
+
+.mint-onboarding__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.mint-onboarding__close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.mint-onboarding__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding__title {
+  margin: 0;
+  padding-right: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding__body {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.mint-onboarding__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.mint-onboarding__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1.5rem var(--font-mono);
+  margin-top: -0.375rem;
+}
+
+/* Read by screen readers only. */
+.mint-onboarding__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.mint-onboarding__hint {
+  margin-right: auto;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+/* A dot at the top-right corner of an element with unseen news. */
+.mint-onboarding__dot {
+  position: fixed;
+  z-index: 40;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--bg-card);
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.mint-onboarding__dot:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-onboarding-help__chip,
+  .mint-onboarding-help__bar > span,
+  .mint-onboarding-help__progress > span,
+  .mint-onboarding__hole {
+    transition: none;
+  }
+}

package/src/styles/index.css

@@ -29,6 +29,7 @@
 @import './components/input.css';
 @import './components/modal.css';
 @import './components/number-input.css';
+@import './components/onboarding.css';
 @import './components/plate-editor.css';
 @import './components/radio-group.css';
 @import './components/section-card.css';

package/src/styles/variables.css

@@ -393,6 +393,22 @@ body {
   transition: background-color 0.15s, color 0.15s;
 }
 
+/* No page-level rubber-band bounce or pull-to-refresh; overflow: hidden does
+   not stop it. Panels still scroll, and their overscroll stops at their own
+   edge. A browser tab keeps the horizontal swipe for back and forward; an
+   installed PWA has no history swipe, so it drops both axes. */
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
+@media (display-mode: standalone) {
+  html,
+  body {
+    overscroll-behavior: none;
+  }
+}
+
 code, pre {
   font-family: var(--font-mono);
 }