@xapps-platform/marketplace-ui 0.1.14 → 0.1.16

package/README.md

@@ -6,6 +6,10 @@ React UI package for marketplace/catalog and xapp operational screens.
 
 This package is now prepared for public distribution for React integrators who want the ready-made marketplace/catalog/activity UI layer above `@xapps-platform/embed-sdk`.
 
+For the current XMS current-user plans, balances, paywalls, and history reader path, read:
+
+- [docs/specifications/xms/README.md](/home/dacrise/x/xapps/docs/specifications/xms/README.md)
+
 ## Exports
 
 - `MarketplaceProvider`, `useMarketplace`

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,aAAa,EAAW,MAAM,+BAA+B,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4qBvC,wBAAgB,uBAAuB,CAAC,KAAK,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMtF;AAED,wBAAgB,kBAAkB;;;;;;;EAEjC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAmC3F"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,aAAa,EAAW,MAAM,+BAA+B,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAw1BvC,wBAAgB,uBAAuB,CAAC,KAAK,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMtF;AAED,wBAAgB,kBAAkB;;;;;;;EAEjC;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAmC3F"}

package/dist/index.css

@@ -625,6 +625,13 @@
 .mx-record-panel-monetization .mx-record-panel-head > :first-child {
   min-width: 0;
 }
+.mx-record-panel-monetization {
+  background:
+    linear-gradient(
+      180deg,
+      var(--mx-card-bg) 0%,
+      color-mix(in srgb, var(--mx-card-bg) 74%, var(--mx-bg-subtle)) 100%);
+}
 .mx-record-panel-kicker {
   font-size: 0.74rem;
   font-weight: 700;
@@ -640,6 +647,13 @@
   line-height: 1.35;
   word-break: break-word;
 }
+.mx-record-panel-subtitle {
+  margin-top: 0.45rem;
+  color: var(--mx-text-muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+  max-width: 64ch;
+}
 .mx-record-grid {
   margin-top: 1rem;
   display: grid;
@@ -692,13 +706,17 @@
 .mx-record-panel-monetization .mx-record-actions {
   align-self: start;
   justify-content: flex-end;
+  gap: 0.65rem;
+}
+.mx-record-panel-monetization .mx-record-actions .mx-action-group {
+  justify-content: flex-end;
 }
 .mx-record-panel-monetization .mx-record-actions .mx-btn {
   min-height: 40px;
   padding: 0.55rem 0.95rem;
   border-radius: 12px;
   font-weight: 700;
-  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
+  box-shadow: none;
 }
 .mx-record-panel-monetization .mx-record-actions .mx-btn-primary,
 .mx-record-panel-monetization .mx-record-actions .mx-btn-primary:hover,
@@ -709,27 +727,8 @@
 .mx-record-panel-monetization .mx-record-actions .mx-btn-primary:visited {
   color: #fff;
 }
-.mx-record-panel-monetization .mx-record-actions .mx-btn-ghost {
-  background:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #f8fbff 100%);
-  border: 1px solid rgba(226, 232, 240, 0.95);
-  color: #64748b;
-}
-.mx-record-panel-monetization .mx-record-actions .mx-btn-ghost:hover,
-.mx-record-panel-monetization .mx-record-actions .mx-btn-ghost:focus-visible {
-  background:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #f3f8ff 100%);
-  color: #334155;
-  border-color: #dbeafe;
-}
-.mx-record-panel-monetization .mx-record-actions .mx-btn-ghost:visited {
-  color: #64748b;
+.mx-record-panel-monetization .mx-record-actions .mx-btn-secondary {
+  box-shadow: var(--mx-shadow-sm);
 }
 @media (max-width: 720px) {
   .mx-record-panel-monetization .mx-record-panel-head {
@@ -738,6 +737,9 @@
   .mx-record-panel-monetization .mx-record-actions {
     justify-content: stretch;
   }
+  .mx-record-panel-subtitle {
+    max-width: none;
+  }
 }
 .mx-record-timeline {
   margin-top: 1rem;
@@ -1371,6 +1373,9 @@
   color: var(--mx-text-muted);
   padding: 1rem 1.125rem;
 }
+.mx-plans-route-empty .mx-empty-catalog {
+  padding: 2.2rem 1.25rem;
+}
 .mx-detail-widget-list {
   display: grid;
   gap: 0.625rem;
@@ -1850,6 +1855,13 @@
   padding-bottom: 0.9rem;
   border-bottom: 1px solid color-mix(in srgb, var(--mx-border) 82%, transparent);
 }
+.mx-paywall-card-kicker {
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mx-text-muted);
+}
 .mx-paywall-card-title {
   font-family: var(--mx-display-font);
   font-size: 1.08rem;
@@ -1890,8 +1902,8 @@
 }
 .mx-paywall-card-package {
   display: grid;
-  gap: 0.65rem;
-  padding: 0.95rem 1rem;
+  gap: 0.78rem;
+  padding: 1rem 1.05rem;
   border-radius: 1rem;
   border: 1px solid var(--mx-border);
   background:
@@ -1908,6 +1920,18 @@
   font-weight: 700;
   box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
 }
+.mx-paywall-card-package-actions {
+  display: grid;
+  gap: 0.45rem;
+  padding-top: 0.2rem;
+  margin-top: 0.05rem;
+}
+.mx-paywall-card-package-note {
+  font-size: 0.76rem;
+  line-height: 1.45;
+  color: var(--mx-text-muted);
+  max-width: 48ch;
+}
 .mx-paywall-card-package.is-default {
   border-color: color-mix(in srgb, var(--mx-primary) 40%, var(--mx-border));
   background:
@@ -1935,7 +1959,7 @@
   color: var(--mx-text-main);
 }
 .mx-paywall-card-package-description {
-  margin-top: 0.22rem;
+  margin-top: 0.28rem;
   font-size: 0.81rem;
   line-height: 1.46;
   color: var(--mx-text-muted);
@@ -1964,6 +1988,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.45rem;
+  margin-top: 0.05rem;
 }
 .mx-paywall-card-signal {
   background: color-mix(in srgb, var(--mx-text-main) 3%, var(--mx-card-bg));
@@ -1976,6 +2001,48 @@
 .mx-paywall-card-package .mx-btn-secondary[disabled] {
   box-shadow: none;
 }
+.mx-paywall-card-package .mx-btn-primary {
+  justify-self: start;
+  box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--mx-primary) 42%, transparent);
+}
+@media (max-width: 720px) {
+  .mx-paywall-card-head {
+    gap: 0.38rem;
+    margin-bottom: 0.9rem;
+    padding-bottom: 0.8rem;
+  }
+  .mx-paywall-card-badges {
+    margin-bottom: 0.85rem;
+  }
+  .mx-paywall-card-packages {
+    gap: 0.72rem;
+  }
+  .mx-paywall-card-package {
+    gap: 0.72rem;
+    padding: 0.92rem;
+  }
+  .mx-paywall-card-package-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.55rem;
+  }
+  .mx-paywall-card-money {
+    align-self: flex-start;
+  }
+  .mx-paywall-card-package-meta,
+  .mx-paywall-card-signals {
+    gap: 0.4rem;
+  }
+  .mx-paywall-card-package-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  .mx-paywall-card-package-actions .mx-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
 .mx-tag-list {
   margin-top: 0.45rem;
 }
@@ -3484,6 +3551,70 @@
   display: grid;
   gap: 16px;
 }
+.mx-monetization-page .mx-header {
+  margin-bottom: 1rem;
+}
+.mx-monetization-overview-panel {
+  margin-bottom: 1.2rem;
+  padding: 1.1rem 1.15rem;
+  background:
+    radial-gradient(
+      circle at top right,
+      color-mix(in srgb, var(--mx-primary) 7%, transparent) 0%,
+      transparent 36%),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--mx-card-bg) 92%, var(--mx-bg)) 0%,
+      color-mix(in srgb, var(--mx-card-bg) 84%, var(--mx-bg)) 100%);
+}
+.mx-monetization-overview-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
+}
+.mx-monetization-overview-title {
+  margin: 0.2rem 0 0;
+  font-family: var(--mx-display-font);
+  font-size: 1.38rem;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--mx-text-main);
+}
+.mx-monetization-overview-subtitle {
+  margin: 0.45rem 0 0;
+  max-width: 68ch;
+  color: var(--mx-text-muted);
+  font-size: 0.94rem;
+  line-height: 1.55;
+}
+.mx-monetization-overview-grid {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.8rem;
+}
+.mx-monetization-stat {
+  min-width: 0;
+  padding: 0.9rem 0.95rem;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--mx-border) 84%, transparent);
+  background: color-mix(in srgb, var(--mx-card-bg) 92%, var(--mx-bg));
+}
+.mx-monetization-stat-label {
+  color: var(--mx-text-muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.mx-monetization-stat-value {
+  margin-top: 0.35rem;
+  color: var(--mx-text-main);
+  font-size: 1.55rem;
+  font-weight: 800;
+  line-height: 1;
+}
 .mx-record-panel-stack {
   display: grid;
   gap: 1rem;
@@ -3533,6 +3664,76 @@
   font-weight: 600;
   text-align: right;
 }
+.mx-monetization-card-badges {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  align-items: center;
+}
+.mx-subtle-note-card {
+  margin-bottom: 1rem;
+  padding: 0.9rem 1.1rem;
+}
+.mx-monetization-summary-card,
+.mx-monetization-activity-card {
+  margin-bottom: 1rem;
+}
+.mx-monetization-card-body {
+  padding: 1rem 1.1rem;
+  background: var(--mx-card-bg);
+}
+.mx-monetization-card-primary-grid {
+  margin-top: 0.2rem;
+}
+.mx-monetization-card-secondary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 0.65rem 1rem;
+  margin-top: 0.95rem;
+  padding-top: 0.95rem;
+  border-top: 1px solid color-mix(in srgb, var(--mx-border) 84%, transparent);
+}
+.mx-monetization-card-secondary-row {
+  display: grid;
+  gap: 0.14rem;
+}
+.mx-monetization-card-secondary-label {
+  color: var(--mx-text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.mx-monetization-card-secondary-value {
+  color: var(--mx-text-main);
+  font-size: 0.86rem;
+  line-height: 1.45;
+}
+.mx-monetization-card-balance-strip {
+  margin-top: 0.95rem;
+  padding-top: 0.95rem;
+  border-top: 1px solid color-mix(in srgb, var(--mx-border) 84%, transparent);
+}
+@media (max-width: 720px) {
+  .mx-monetization-card-body {
+    padding: 0.92rem 0.95rem;
+  }
+  .mx-monetization-card-primary-grid {
+    margin-top: 0.1rem;
+  }
+  .mx-monetization-card-secondary {
+    grid-template-columns: 1fr;
+    gap: 0.55rem;
+    margin-top: 0.8rem;
+    padding-top: 0.8rem;
+  }
+  .mx-monetization-card-balance-strip {
+    margin-top: 0.8rem;
+    padding-top: 0.8rem;
+  }
+}
 .mx-publisher-avatar {
   width: 56px;
   height: 56px;