@tangle-network/sandbox-ui 0.18.0 → 0.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -149,6 +149,54 @@ interface CreditBalanceProps {
149
149
  }
150
150
  declare function CreditBalance({ amount, description, onTopUp, quickAmounts, className, }: CreditBalanceProps): react_jsx_runtime.JSX.Element;
151
151
 
152
+ /**
153
+ * Canonical "out of credits" UX, shared across every Tangle product.
154
+ *
155
+ * Backends emit a 402 with `{ error, code: "insufficient_balance", manageUrl,
156
+ * plan?, remainingBalanceUsd? }` when a billable action can't be funded. The
157
+ * frontend catches it, calls {@link parseInsufficientBalance} to extract the
158
+ * shape, and renders {@link OutOfCreditsModal} — a single "add credits /
159
+ * subscribe" CTA that links to the platform billing page (`manageUrl`).
160
+ *
161
+ * This replaces the per-app bespoke handling (silent failures, raw errors,
162
+ * un-clickable text) with one component so the funnel is uniform + testable.
163
+ */
164
+ declare const INSUFFICIENT_BALANCE_CODE = "insufficient_balance";
165
+ interface InsufficientBalance {
166
+ /** Platform billing URL to add credits / subscribe / connect a card. */
167
+ manageUrl: string;
168
+ /** Current plan, when the backend includes it. */
169
+ plan?: string;
170
+ /** Remaining balance (USD), when included. */
171
+ remainingBalanceUsd?: number;
172
+ /** Backend-supplied human message, when included. */
173
+ message?: string;
174
+ }
175
+ /**
176
+ * Detect + parse an insufficient-balance 402 from a parsed JSON body. Returns
177
+ * the typed shape when the body is an insufficient-balance error, else `null`.
178
+ * Falls back to the platform default billing URL when the backend omits
179
+ * `manageUrl` so the CTA is never dead.
180
+ */
181
+ declare function parseInsufficientBalance(payload: unknown, opts?: {
182
+ defaultManageUrl?: string;
183
+ }): InsufficientBalance | null;
184
+ interface OutOfCreditsModalProps {
185
+ /** Parsed insufficient-balance details (from {@link parseInsufficientBalance}). */
186
+ balance: InsufficientBalance | null;
187
+ /** Dismiss handler. When omitted the modal cannot be closed (hard paywall). */
188
+ onClose?: () => void;
189
+ /** Override the primary CTA label. Default "Add credits". */
190
+ ctaLabel?: string;
191
+ className?: string;
192
+ }
193
+ /**
194
+ * Modal shown when a user runs out of credits. Renders nothing when
195
+ * `balance` is null. The primary CTA opens the platform billing page where
196
+ * the user can add credits, subscribe, or connect a card for pay-per-use.
197
+ */
198
+ declare function OutOfCreditsModal({ balance, onClose, ctaLabel, className, }: OutOfCreditsModalProps): react_jsx_runtime.JSX.Element | null;
199
+
152
200
  interface ClusterStatusItem {
153
201
  icon?: React.ReactNode;
154
202
  label: string;
@@ -622,4 +670,4 @@ interface InfoPanelProps {
622
670
  }
623
671
  declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
624
672
 
625
- export { type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_OPTIONS, HarnessPicker, type HarnessPickerProps, type HarnessType, InfoPanel, type InfoPanelProps, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, useSidebar };
673
+ export { type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_OPTIONS, HarnessPicker, type HarnessPickerProps, type HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };
package/dist/dashboard.js CHANGED
@@ -7,9 +7,11 @@ import {
7
7
  GitPanel,
8
8
  HARNESS_OPTIONS,
9
9
  HarnessPicker,
10
+ INSUFFICIENT_BALANCE_CODE,
10
11
  InvoiceTable,
11
12
  NetworkConfig,
12
13
  NewSandboxCard,
14
+ OutOfCreditsModal,
13
15
  PlanCards,
14
16
  PortsList,
15
17
  ProcessList,
@@ -42,8 +44,9 @@ import {
42
44
  UsageSummary,
43
45
  VariantList,
44
46
  canAdminSandbox,
47
+ parseInsufficientBalance,
45
48
  useSidebar
46
- } from "./chunk-5I363RL7.js";
49
+ } from "./chunk-R6QNJQRH.js";
47
50
  import {
48
51
  BillingDashboard,
49
52
  InfoPanel,
@@ -68,11 +71,13 @@ export {
68
71
  GitPanel,
69
72
  HARNESS_OPTIONS,
70
73
  HarnessPicker,
74
+ INSUFFICIENT_BALANCE_CODE,
71
75
  InfoPanel,
72
76
  InvoiceTable,
73
77
  ModelPicker,
74
78
  NetworkConfig,
75
79
  NewSandboxCard,
80
+ OutOfCreditsModal,
76
81
  PlanCards,
77
82
  PortsList,
78
83
  PricingPage,
@@ -112,5 +117,6 @@ export {
112
117
  formatContext,
113
118
  formatPrice,
114
119
  formatPricing,
120
+ parseInsufficientBalance,
115
121
  useSidebar
116
122
  };