@streamoid/settings 0.3.3 → 0.3.5

package/dist/index.js

@@ -1237,7 +1237,11 @@ var T4 = {
   tertiary: "var(--alias-text---icons-tertiary)",
   muted: "var(--alias-text---icons-muted)",
   inverse: "var(--alias-text---icons-inverse)",
-  surface: "var(--alias-surface-subtleraised)",
+  // Grey modal shell so the nested white panels (app rows, store access) separate
+  // from it — matches Create Workspace (workspace-modal). Dark-identical: both
+  // surface-subtleraised and neutral-825 are #1f1f1f in dark; in light it's
+  // #dbdbdb (grey) instead of #ffffff (white).
+  surface: "var(--primitives-neutral-825)",
   base: "var(--alias-surface-base)",
   canvasBase: "var(--alias-surface-canvasbase)",
   fillPlus: "var(--alias-fill-neutral-neutralplus)",
@@ -3394,6 +3398,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");
@@ -3913,9 +4001,9 @@ function BuyCreditsModal({
         {
           className: "flex flex-col relative",
           style: {
-            backgroundColor: "var(--alias-surface-subtle)",
+            backgroundColor: "var(--primitives-neutral-825)",
             borderRadius: "var(--radius-4xl)",
-            border: "1px solid var(--alias-border-divider)",
+            border: "1px solid var(--alias-border-subtle)",
             width: 480,
             maxWidth: "90vw"
           },
@@ -3977,6 +4065,7 @@ function BuyCreditsModal({
                         {
                           className: "flex items-center flex-1 min-w-0",
                           style: {
+                            backgroundColor: "var(--alias-fill-neutral-neutralplus)",
                             borderRadius: "var(--radius-xl)",
                             padding: "var(--spacing-xl) var(--spacing-3xl)",
                             border: "1.25px solid var(--alias-border-default)",
@@ -4235,232 +4324,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);
@@ -4490,6 +4353,22 @@ function formatEffectiveDateLabel(value) {
     year: "numeric"
   });
 }
+function useIsLightTheme() {
+  const read = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "Light";
+  const [isLight, setIsLight] = (0, import_react8.useState)(read);
+  (0, import_react8.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => setIsLight(read()));
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    setIsLight(read());
+    return () => observer.disconnect();
+  }, []);
+  return isLight;
+}
 function UpdateSubscriptionModal({
   open,
   currentPlanName,
@@ -4501,6 +4380,9 @@ function UpdateSubscriptionModal({
   onClose,
   onProceed
 }) {
+  const isLight = useIsLightTheme();
+  const modalSurface = isLight ? "#ffffff" : "var(--alias-surface-base)";
+  const cardBorder = isLight ? "1px solid var(--alias-border-subtle)" : "1px solid var(--alias-border-divider)";
   if (!open) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
@@ -4515,7 +4397,7 @@ function UpdateSubscriptionModal({
         {
           className: "flex flex-col w-full max-w-xl",
           style: {
-            backgroundColor: "var(--alias-surface-base)",
+            backgroundColor: modalSurface,
             borderRadius: "var(--radius-3xl)",
             border: "1px solid var(--alias-border-subtle)",
             padding: "var(--spacing-6xl)",
@@ -4584,6 +4466,7 @@ function UpdateSubscriptionModal({
                       className: "flex items-center w-full",
                       style: {
                         backgroundColor: "var(--alias-fill-neutral-neutral)",
+                        border: cardBorder,
                         borderRadius: "var(--radius-3xl)",
                         padding: "var(--spacing-3xl)"
                       },
@@ -4641,7 +4524,8 @@ function UpdateSubscriptionModal({
                         width: 36,
                         height: 36,
                         borderRadius: "var(--radius-xl)",
-                        backgroundColor: "var(--alias-fill-neutral-neutral)"
+                        backgroundColor: "var(--alias-fill-neutral-neutral)",
+                        border: cardBorder
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconDoubleArrow, { className: "w-4 h-4", color: MUTED_COLOR })
                     }
@@ -4668,6 +4552,7 @@ function UpdateSubscriptionModal({
                       className: "flex items-center w-full",
                       style: {
                         backgroundColor: "var(--alias-fill-neutral-neutral)",
+                        border: cardBorder,
                         borderRadius: "var(--radius-3xl)",
                         padding: "var(--spacing-3xl)"
                       },
@@ -4683,7 +4568,7 @@ function UpdateSubscriptionModal({
                               lineHeight: "var(--line-height-line-height-xxl)",
                               color: "var(--alias-text---icons-primary)"
                             },
-                            children: "Pro"
+                            children: nextPlanName || "Pro"
                           }
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-end", children: [
@@ -4795,8 +4680,10 @@ function UpdateSubscriptionModal({
     }
   );
 }
+var stripMonthly = (price) => price.replace(/\s*\/\s*month\s*$/i, "");
 function PlansView({
   onBack,
+  hideHeader,
   products,
   currentPlanId,
   currentPlanEndDate,
@@ -4894,96 +4781,58 @@ 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)(
           "div",
           {
             className: "grid w-full grid-cols-1 md:grid-cols-2 xl:grid-cols-3 items-stretch",
-            style: { gap: "var(--spacing-6xl)" },
+            style: { gap: "var(--spacing-8xl)" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 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 +4859,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 +4953,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 +4966,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 +5362,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 +5377,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 +5845,7 @@ function BillingContent({
       PlansView,
       {
         onBack: () => setShowPlans(false),
+        hideHeader: Boolean(onShowPlansChange),
         products,
         currentPlanId: subscription?.plan?.id,
         currentPlanEndDate: subscription?.plan?.subscriptionEndDate,
@@ -7843,6 +7690,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 +7987,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 +8107,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 +8132,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,
                       {