@xapps-platform/marketplace-ui 0.1.15 → 0.1.17

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/MarketplaceContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarketplaceContext.d.ts","sourceRoot":"","sources":["../src/MarketplaceContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEzF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB,CAAC;AA+FF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAUA;AAED,wBAAgB,cAAc,IAAI,uBAAuB,CAIxD"}
+{"version":3,"file":"MarketplaceContext.d.ts","sourceRoot":"","sources":["../src/MarketplaceContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEzF,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB,CAAC;AAgGF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAUA;AAED,wBAAgB,cAAc,IAAI,uBAAuB,CAIxD"}

package/dist/httpMarketplaceClient.d.ts

@@ -0,0 +1,25 @@
+import type { MarketplaceClient } from "./types";
+type JsonFetcher = <T>(path: string) => Promise<T>;
+type JsonPoster = <T>(path: string, body?: Record<string, unknown>) => Promise<T>;
+type HttpMarketplaceClientRouteConfig = {
+    catalogListPath: string;
+    catalogXappBasePath: string;
+    myXappsBasePath: string;
+    myMonetizedXappsPath: string;
+    myRequestsPath: string;
+    myPaymentSessionsPath: string;
+    myInvoicesPath: string;
+    myNotificationsPath: string;
+    widgetTokenPath?: string;
+    supportsSubjectIdQuery?: boolean;
+};
+export type HttpMarketplaceClientOptions = {
+    getJson: JsonFetcher;
+    postJson: JsonPoster;
+    routes: HttpMarketplaceClientRouteConfig;
+    defaultLocale?: string | null | (() => string | null | undefined);
+    getWidgetToken?: MarketplaceClient["getWidgetToken"];
+};
+export declare function createHttpMarketplaceClient(options: HttpMarketplaceClientOptions): MarketplaceClient;
+export {};
+//# sourceMappingURL=httpMarketplaceClient.d.ts.map

package/dist/httpMarketplaceClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"httpMarketplaceClient.d.ts","sourceRoot":"","sources":["../src/httpMarketplaceClient.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,KAAK,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;AACnD,KAAK,UAAU,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;AAElF,KAAK,gCAAgC,GAAG;IACtC,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC;IACrB,MAAM,EAAE,gCAAgC,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAClE,cAAc,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CACtD,CAAC;AAsCF,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,4BAA4B,GACpC,iBAAiB,CAqNnB"}

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;AAyxBvC,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;AA+1BvC,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

@@ -19,13 +19,8 @@
   --mx-radius-lg: 1rem;
   --mx-radius-md: 0.75rem;
   --mx-radius-sm: 0.5rem;
-  --mx-font-family: var(--xapps-font-family, system-ui, sans-serif);
-  --mx-display-font:
-    "IBM Plex Serif",
-    "Iowan Old Style",
-    "Palatino Linotype",
-    Georgia,
-    serif;
+  --mx-font-family: var( --xapps-font-family, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif );
+  --mx-display-font: var(--xapps-display-font, var(--mx-font-family));
 }
 :root[data-xapps-theme-mode=dark] {
   --mx-shadow-sm: 0 1px 2px 0 rgb(2 6 23 / 0.22);
@@ -1373,6 +1368,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;
@@ -1852,6 +1850,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;
@@ -1892,8 +1897,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:
@@ -1910,6 +1915,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:
@@ -1937,7 +1954,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);
@@ -1966,6 +1983,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));
@@ -1978,6 +1996,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;
 }
@@ -3486,6 +3546,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;
@@ -3535,6 +3659,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;