npm - @streamoid/settings - Versions diffs - 0.3.3 → 0.3.4 - Mend

@streamoid/settings 0.3.3 → 0.3.4

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.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -588,8 +588,12 @@ type IconProps = Omit<SVGProps<SVGSVGElement>, 'color' | 'strokeWidth' | 'width'
 };
 declare const SiconKey: ({ color, strokeWidth, size, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
-declare function BillingContent({ embedded, }?: {
+declare function BillingContent({ embedded, showPlans: showPlansProp, onShowPlansChange, }?: {
     embedded?: boolean;
+    /** Controlled "plans" sub-view flag. When provided, the host (settings
+     *  wrapper) owns it so it can hide the sub-nav + show the Plans breadcrumb. */
+    showPlans?: boolean;
+    onShowPlansChange?: (open: boolean) => void;
 }): react_jsx_runtime.JSX.Element;
 declare function TeamsContent({ embedded, onInviteOpen, onInviteOpenChange, }?: {

package/dist/index.d.ts CHANGED Viewed

@@ -588,8 +588,12 @@ type IconProps = Omit<SVGProps<SVGSVGElement>, 'color' | 'strokeWidth' | 'width'
 };
 declare const SiconKey: ({ color, strokeWidth, size, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
-declare function BillingContent({ embedded, }?: {
+declare function BillingContent({ embedded, showPlans: showPlansProp, onShowPlansChange, }?: {
     embedded?: boolean;
+    /** Controlled "plans" sub-view flag. When provided, the host (settings
+     *  wrapper) owns it so it can hide the sub-nav + show the Plans breadcrumb. */
+    showPlans?: boolean;
+    onShowPlansChange?: (open: boolean) => void;
 }): react_jsx_runtime.JSX.Element;
 declare function TeamsContent({ embedded, onInviteOpen, onInviteOpenChange, }?: {

package/dist/index.js CHANGED Viewed

@@ -3394,6 +3394,90 @@ var import_react8 = require("react");
 var import_ui5 = require("@streamoid/ui");
 var import_icons5 = require("@streamoid/icons");
+// src/plan-comparison-data.ts
+var PLAN_COMPARISON_COLUMNS = ["Free", "Pro", "Enterprise"];
+var PLAN_COMPARISON_NOTE = "Credits roll over monthly and only expire if your plan is no longer active";
+var PLAN_COMPARISON_SECTIONS = [
+  {
+    rows: [{ label: "Usage volume", values: ["Limited", "Higher limits", "Unlimited"] }]
+  },
+  {
+    header: "Artifax (Design & Insights)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Tracked Brands", values: ["3 brands included", "5 brands included", "Unlimited"] },
+      { label: "Custom brand scraping", values: ["-", "Included", "Included"] },
+      { label: "Tracked news terms", values: ["-", "Up to 5 news terms", "Unlimited"] },
+      { label: "Pattern, design & graphic generation", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Vectorization & colorways", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Background removal", values: ["Up to 300 images", "Up to 1,000 images", "Unlimited"] },
+      { label: "Range planning", values: ["Up to 3 plans", "Up to 10 plans", "Unlimited"] },
+      { label: "Tech packs", values: ["Manual fill", "Up to 5 tech packs", "Unlimited"] },
+      { label: "Automated moodboards", values: ["Up to 20 moodboards", "Up to 66 moodboards", "Unlimited"] },
+      { label: "Export & download vector assets", values: ["Free", "Free", "Free"] }
+    ]
+  },
+  {
+    header: "Photogenix (Imagery & Video)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Image generation", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Image watermarks", values: ["Watermarked", "No watermark", "No watermark"] },
+      { label: "Image editing", values: ["Up to 300 edits", "Up to 1,000 edits", "Unlimited"] },
+      { label: "Video generation from image", values: ["Up to 20 videos", "Up to 66 videos", "Unlimited"] },
+      { label: "Video with background changes", values: ["Up to 15 videos", "Up to 50 videos", "Unlimited"] },
+      { label: "Video Advertisement generation", values: ["-", "Included", "Included"] },
+      { label: "Automated shoot configuration", values: ["Up to 300 products", "Up to 1,000 products", "Unlimited"] },
+      { label: "UGC content creation", values: ["Up to 15 outputs", "Up to 50 outputs", "Unlimited"] },
+      { label: "Marketplace exports", values: ["Up to 300 exports", "Up to 1,000 exports", "Unlimited"] }
+    ]
+  },
+  {
+    header: "Catalogix (Cataloging & Listing)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Data import & mapping", values: ["Free", "Free", "Free"] },
+      { label: "Attributes from images (express)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Attributes from images (precise)", values: ["Up to 42 styles", "Up to 142 styles", "Unlimited"] },
+      // Blank-label sub-row per the design export (values present, no label).
+      { label: "", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Background removal", values: ["Up to 60 styles", "Up to 200 styles", "Unlimited"] },
+      { label: "Identify image type (pose)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Extra images (detail shots)", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      // Blank-label sub-row per the design export.
+      { label: "", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Product titles & descriptions", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "SEO content", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Size charts", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Translation (data & images)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Automated quality checks", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] }
+    ]
+  },
+  {
+    header: "Security & Compliance",
+    rows: [
+      { label: "SSO / SAML", values: ["-", "-", "Included"] },
+      { label: "Role-based access control", values: ["-", "-", "Included"] },
+      { label: "Audit logs", values: ["-", "-", "Included"] },
+      { label: "Data residency / region controls", values: ["-", "-", "Included"] },
+      { label: "Custom data retention & DPA", values: ["-", "-", "Included"] }
+    ]
+  },
+  {
+    header: "Support",
+    rows: [
+      { label: "Support level", values: ["Community / docs", "Standard support", "Dedicated support + customer success manager"] },
+      { label: "SLA", values: ["-", "-", "Custom SLA"] },
+      { label: "Onboarding", values: ["Self-serve", "Self-serve", "Guided onboarding & training"] }
+    ]
+  }
+];
+var PLAN_TAGLINES = {
+  free: "Try the AI agents and automate your first workflows",
+  pro: "Scale your team's output and get to market faster",
+  enterprise: "For high-volume brands, agencies, and marketplaces that need custom scale, integrations, and support"
+};
 // src/export-date-modal.tsx
 var import_react6 = require("react");
 var import_icons3 = require("@streamoid/icons");
@@ -4235,232 +4319,6 @@ function getCurrencySymbolByCountry(country) {
 function formatCredits(n) {
   return n.toLocaleString("en-US");
 }
-var SECTION_ICON_PROPS = {
-  color: "var(--alias-text---icons-tertiary)",
-  size: 24,
-  strokeWidth: 1.5
-};
-var PLAN_FEATURES_BY_AMOUNT = {
-  // Free — 300 credits
-  0: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 60 images",
-        "Fill techpacks manually",
-        "Monitor up to 3 essential brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 60 images",
-        "Generate up to 18 videos (8s)",
-        "Retouch up to 300 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 50 products per store",
-        "Catalog up to 75 products",
-        "List up to 30 template files"
-      ]
-    }
-  ],
-  // PRO $49.99 — 1,000 credits
-  4999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 200 images",
-        "Autofill up to 5 techpacks",
-        "Monitor up to 10 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 200 images",
-        "Generate up to 60 videos (8s)",
-        "Retouch up to 1,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 250 products",
-        "List up to 100 template files"
-      ]
-    }
-  ],
-  // PRO $149.99 — 3,000 credits
-  14999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 600 images",
-        "Autofill up to 15 techpacks",
-        "Monitor up to 30 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 600 images",
-        "Generate up to 180 videos (8s)",
-        "Retouch up to 3,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 750 products",
-        "List up to 300 template files"
-      ]
-    }
-  ],
-  // PRO $349.99 — 8,000 credits
-  34999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 1,600 images",
-        "Autofill up to 40 techpacks",
-        "Monitor up to 80 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 1,600 images",
-        "Generate up to 480 videos (8s)",
-        "Retouch up to 8,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 2,000 products",
-        "List up to 800 template files"
-      ]
-    }
-  ],
-  // PRO $549.99 — 15,000 credits
-  54999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 3,000 images",
-        "Autofill up to 75 techpacks",
-        "Monitor up to 150 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 3,000 images",
-        "Generate up to 900 videos (8s)",
-        "Retouch up to 15,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 3,750 products",
-        "List up to 1,500 template files"
-      ]
-    }
-  ],
-  // PRO $1,049.99 — 30,000 credits
-  104999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 6,000 images",
-        "Autofill up to 150 techpacks",
-        "Monitor up to 300 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 6,000 images",
-        "Generate up to 1,800 videos (8s)",
-        "Retouch up to 30,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 7,500 products",
-        "List up to 3,000 template files"
-      ]
-    }
-  ]
-};
-var ENTERPRISE_FEATURES = [
-  {
-    section: "Artifax",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom image generations",
-      "Custom techpack autofilled",
-      "Custom number of brands"
-    ]
-  },
-  {
-    section: "Photogenix",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom image generations",
-      "Custom video generations",
-      "Custom image retouches"
-    ]
-  },
-  {
-    section: "Catalogix",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom product uploads",
-      "Custom product cataloging",
-      "Custom template file listings"
-    ]
-  }
-];
-function getPlanFeatures(amount) {
-  if (PLAN_FEATURES_BY_AMOUNT[amount]) return PLAN_FEATURES_BY_AMOUNT[amount];
-  const tiers = Object.keys(PLAN_FEATURES_BY_AMOUNT).map(Number).sort((a, b) => a - b);
-  let best = tiers[0];
-  for (const t of tiers) {
-    if (t <= amount) best = t;
-    else break;
-  }
-  return PLAN_FEATURES_BY_AMOUNT[best] ?? [];
-}
 function formatNextBillingDateLabel(iso) {
   if (iso) {
     const parsed = new Date(iso);
@@ -4795,8 +4653,10 @@ function UpdateSubscriptionModal({
     }
   );
 }
+var stripMonthly = (price) => price.replace(/\s*\/\s*month\s*$/i, "");
 function PlansView({
   onBack,
+  hideHeader,
   products,
   currentPlanId,
   currentPlanEndDate,
@@ -4894,80 +4754,42 @@ function PlansView({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
-            className: "flex items-center shrink-0 w-full",
+            className: "flex items-center justify-end shrink-0 w-full",
             style: { gap: "var(--spacing-lg)" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "div",
-                {
-                  className: "flex flex-col",
-                  style: { gap: "var(--spacing-xs)", flex: 1, minWidth: 0 },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "p",
-                      {
-                        className: "min-w-0 truncate",
-                        style: {
-                          fontFamily: "var(--font-family-font-family-display)",
-                          fontSize: "var(--font-size-font-size-xxl)",
-                          fontWeight: 700,
-                          lineHeight: "var(--line-height-line-height-xxl)",
-                          color: "var(--alias-text---icons-primary)"
-                        },
-                        children: "Upgrade Plans"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "p",
-                      {
-                        style: {
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 400,
-                          lineHeight: "var(--line-height-line-height-sm)",
-                          color: "var(--alias-text---icons-muted)"
-                        },
-                        children: "Pick a plan based on your monthly usage and credit needs."
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "div",
-                {
-                  className: "flex items-center shrink-0 cursor-pointer",
-                  style: {
-                    gap: "var(--spacing-sm)",
-                    padding: "var(--spacing-xs) var(--spacing-lg)",
-                    borderRadius: "var(--radius-xl)",
-                    height: 32,
-                    border: "1px solid var(--alias-border-subtle)",
-                    backgroundColor: "var(--alias-surface-base)"
-                  },
-                  onClick: onBack,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 500,
-                          lineHeight: "var(--line-height-line-height-sm)",
-                          color: "var(--alias-text---icons-muted)"
-                        },
-                        children: "Back to billing"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "div",
+              {
+                className: "flex items-center shrink-0 cursor-pointer",
+                style: {
+                  gap: "var(--spacing-sm)",
+                  padding: "var(--spacing-xs) var(--spacing-lg)",
+                  borderRadius: "var(--radius-xl)",
+                  height: 32,
+                  border: "1px solid var(--alias-border-subtle)",
+                  backgroundColor: "var(--alias-surface-base)"
+                },
+                onClick: onBack,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "var(--font-family-font-family-body)",
+                        fontSize: "var(--font-size-font-size-sm)",
+                        fontWeight: 500,
+                        lineHeight: "var(--line-height-line-height-sm)",
+                        color: "var(--alias-text---icons-muted)"
+                      },
+                      children: "Back to billing"
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -4980,10 +4802,10 @@ function PlansView({
                 import_ui5.ScPlanCard,
                 {
                   planName: freePlan?.planName || "Free",
-                  price: freePlan?.price || `${workspaceCurrencySymbol}0`,
+                  price: stripMonthly(freePlan?.price || `${workspaceCurrencySymbol}0`),
                   credits: freePlan?.credits || "3,000 credits",
                   type: "free",
-                  features: getPlanFeatures(freePlan?.amount ?? 0),
+                  tagline: PLAN_TAGLINES.free,
                   buttonText: isFreeActionLoading ? "Processing..." : freePlan?.isCurrent ? "Current plan" : "Downgrade to free",
                   buttonState: freePlan?.isCurrent || isFreeActionLoading ? "disabled" : "default",
                   buttonVariant: "secondary",
@@ -5010,12 +4832,10 @@ function PlansView({
                 import_ui5.ScPlanCard,
                 {
                   planName: "Pro",
-                  price: selectedMiddlePlan?.price || "\u2014",
+                  price: stripMonthly(selectedMiddlePlan?.price || "\u2014"),
                   credits: selectedMiddlePlan?.credits || "\u2014",
                   type: "popular",
-                  features: getPlanFeatures(
-                    selectedMiddlePlan?.amount ?? middlePlans[0]?.amount ?? 4999
-                  ),
+                  tagline: PLAN_TAGLINES.pro,
                   buttonText: isMiddleActionLoading ? "Processing..." : !selectedMiddlePlan ? "Select a plan" : selectedMiddlePlan.isCurrent ? "Current plan" : selectedMiddlePlan.amount > currentPlanAmount ? "Upgrade" : "Downgrade",
                   buttonState: selectedMiddlePlan?.isCurrent || isMiddleActionLoading || !selectedMiddlePlan ? "disabled" : "default",
                   buttonVariant: selectedMiddlePlan?.isCurrent ? "outline" : selectedMiddlePlan && selectedMiddlePlan.amount > currentPlanAmount ? "primary" : "secondary",
@@ -5106,12 +4926,8 @@ function PlansView({
                 {
                   planName: "Enterprise",
                   type: "custom",
-                  description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { marginBottom: 0 }, children: "The Enterprise plan is for teams operating at scale." }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("br", {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { marginBottom: 0 }, children: "Get expanded capacity, flexible usage options, and dedicated support to manage large production volumes and complex catalogs with confidence." })
-                  ] }),
-                  buttonText: "Contact us",
+                  tagline: PLAN_TAGLINES.enterprise,
+                  buttonText: "Contact Sales",
                   buttonVariant: "secondary",
                   onUpgrade: () => {
                     window.open("https://cal.com/streamoid/30min", "_blank");
@@ -5123,17 +4939,13 @@ function PlansView({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "p",
+          import_ui5.ScPlanComparison,
           {
-            className: "w-full text-center",
-            style: {
-              fontFamily: "var(--font-family-font-family-body)",
-              fontSize: "var(--font-size-font-size-sm)",
-              fontWeight: 400,
-              lineHeight: "var(--line-height-line-height-sm)",
-              color: "var(--alias-text---icons-muted)"
-            },
-            children: "Credits expire monthly"
+            layout: "table",
+            columns: [...PLAN_COMPARISON_COLUMNS],
+            note: PLAN_COMPARISON_NOTE,
+            sections: PLAN_COMPARISON_SECTIONS,
+            highlightColumnIndex: 1
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -5523,7 +5335,9 @@ function UsageLogsTable({
   );
 }
 function BillingContent({
-  embedded = false
+  embedded = false,
+  showPlans: showPlansProp,
+  onShowPlansChange
 } = {}) {
   const { auth, workspace, api, toast, navigation } = useSettingsAdapters();
   const user = auth.user;
@@ -5536,7 +5350,12 @@ function BillingContent({
     return `${window.location.origin}${window.location.pathname}`;
   };
   const [activeTab, setActiveTab] = (0, import_react8.useState)("invoice");
-  const [showPlans, setShowPlans] = (0, import_react8.useState)(false);
+  const [showPlansInternal, setShowPlansInternal] = (0, import_react8.useState)(false);
+  const showPlans = showPlansProp ?? showPlansInternal;
+  const setShowPlans = (next) => {
+    if (onShowPlansChange) onShowPlansChange(next);
+    else setShowPlansInternal(next);
+  };
   const [showExportModal, setShowExportModal] = (0, import_react8.useState)(false);
   const [showBuyCreditsModal, setShowBuyCreditsModal] = (0, import_react8.useState)(false);
   const [subscription, setSubscription] = (0, import_react8.useState)(null);
@@ -5999,6 +5818,7 @@ function BillingContent({
       PlansView,
       {
         onBack: () => setShowPlans(false),
+        hideHeader: Boolean(onShowPlansChange),
         products,
         currentPlanId: subscription?.plan?.id,
         currentPlanEndDate: subscription?.plan?.subscriptionEndDate,
@@ -7843,6 +7663,11 @@ function SettingsContentInner({ activeTab }) {
   const [teamInviteOpen, setTeamInviteOpen] = (0, import_react10.useState)(false);
   const [tokenShowRevoked, setTokenShowRevoked] = (0, import_react10.useState)(false);
   const [tokenCreateOpen, setTokenCreateOpen] = (0, import_react10.useState)(false);
+  const [billingShowPlans, setBillingShowPlans] = (0, import_react10.useState)(false);
+  const isBillingPlans = activeTab === "billing" && billingShowPlans;
+  (0, import_react10.useEffect)(() => {
+    if (activeTab !== "billing") setBillingShowPlans(false);
+  }, [activeTab]);
   const [localWorkspaces, setLocalWorkspaces] = (0, import_react10.useState)(null);
   const [wsModalOpen, setWsModalOpen] = (0, import_react10.useState)(false);
   const [wsModalMode, setWsModalMode] = (0, import_react10.useState)("create");
@@ -8135,8 +7960,55 @@ function SettingsContentInner({ activeTab }) {
                           },
                           children: TAB_LABELS[activeTab]
                         }
-                      )
+                      ),
+                      isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: "var(--font-family-font-family-body)",
+                              fontSize: "var(--font-size-font-size-xl)",
+                              fontWeight: 500,
+                              lineHeight: "var(--line-height-line-height-xl)",
+                              color: "var(--alias-text---icons-primary)"
+                            },
+                            children: "Plans"
+                          }
+                        )
+                      ] })
                     ] }),
+                    isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      "div",
+                      {
+                        className: "flex items-center shrink-0 cursor-pointer",
+                        style: {
+                          gap: "var(--spacing-sm)",
+                          padding: "var(--spacing-xs) var(--spacing-lg)",
+                          borderRadius: "var(--radius-xl)",
+                          height: 32,
+                          border: "1px solid var(--alias-border-subtle)",
+                          backgroundColor: "var(--alias-surface-base)"
+                        },
+                        onClick: () => setBillingShowPlans(false),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconLeft, { className: "w-4 h-4", color: "var(--alias-text---icons-muted)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: "var(--font-family-font-family-body)",
+                                fontSize: "var(--font-size-font-size-sm)",
+                                fontWeight: 500,
+                                lineHeight: "var(--line-height-line-height-sm)",
+                                color: "var(--alias-text---icons-muted)"
+                              },
+                              children: "Back to billing"
+                            }
+                          )
+                        ]
+                      }
+                    ),
                     activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       import_ui9.ScButton,
                       {
@@ -8208,7 +8080,7 @@ function SettingsContentInner({ activeTab }) {
                   className: "flex items-start flex-1 min-h-0 w-full overflow-hidden",
                   style: { gap: 20 },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingsNav, { activeTab, onTabChange: setActiveTab }),
+                    !isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingsNav, { activeTab, onTabChange: setActiveTab }),
                     activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProfileTab, {}),
                     activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       WorkspaceTab,
@@ -8233,7 +8105,14 @@ function SettingsContentInner({ activeTab }) {
                     ),
                     activeTab === "referral" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReferralTab, {}),
                     activeTab === "team" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TeamsContent, { embedded: true, onInviteOpen: teamInviteOpen, onInviteOpenChange: setTeamInviteOpen }) }),
-                    activeTab === "billing" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BillingContent, { embedded: true }) }),
+                    activeTab === "billing" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      BillingContent,
+                      {
+                        embedded: true,
+                        showPlans: billingShowPlans,
+                        onShowPlansChange: setBillingShowPlans
+                      }
+                    ) }),
                     activeTab === "apikey" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       TokensContent,
                       {