@withpotter/components 0.13.0-next.101

package/dist/permission-change-notice.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Said once, when somebody changes a person's access while they are working.
+ *
+ * Deliberately NOT a modal. This fires on window focus, which is the moment a
+ * front desk looks up from a customer — blocking the screen to announce a
+ * permission change would interrupt the very shift it is explaining. It sits in
+ * the flow, states the change, and can be dismissed.
+ *
+ * It is also deliberately quiet in tone. A permission change is normally
+ * routine — a manager tidying up, a promotion — and dressing it as an error
+ * would make every ordinary adjustment feel like a reprimand. The one thing it
+ * must not do is let a row vanish mid-task with no explanation at all.
+ */
+export declare function PermissionChangeNotice(): import("react").JSX.Element | null;

package/dist/permission-change-notice.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { describePermissionChange } from "@withpotter/lib/permission-change";
+function PermissionChangeNotice() {
+  const { permissionChange, acknowledgePermissionChange } = usePermissions();
+  if (!permissionChange) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: "mb-4 flex items-start gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-muted)] px-4 py-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: "Your access changed" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-[var(--text-tertiary)]", children: describePermissionChange(permissionChange) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: acknowledgePermissionChange,
+            "aria-label": "Dismiss",
+            className: "-m-1 shrink-0 rounded p-1 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PermissionChangeNotice
+};
+//# sourceMappingURL=permission-change-notice.js.map

package/dist/permission-change-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/permission-change-notice.tsx"],"sourcesContent":["'use client';\n\nimport { X } from 'lucide-react';\n\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { describePermissionChange } from '@withpotter/lib/permission-change';\n\n/**\n * Said once, when somebody changes a person's access while they are working.\n *\n * Deliberately NOT a modal. This fires on window focus, which is the moment a\n * front desk looks up from a customer — blocking the screen to announce a\n * permission change would interrupt the very shift it is explaining. It sits in\n * the flow, states the change, and can be dismissed.\n *\n * It is also deliberately quiet in tone. A permission change is normally\n * routine — a manager tidying up, a promotion — and dressing it as an error\n * would make every ordinary adjustment feel like a reprimand. The one thing it\n * must not do is let a row vanish mid-task with no explanation at all.\n */\nexport function PermissionChangeNotice() {\n  const { permissionChange, acknowledgePermissionChange } = usePermissions();\n\n  if (!permissionChange) return null;\n\n  return (\n    <div\n      role=\"status\"\n      className=\"mb-4 flex items-start gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-muted)] px-4 py-3\"\n    >\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm text-[var(--text-primary)]\">\n          Your access changed\n        </p>\n        <p className=\"mt-0.5 text-sm text-[var(--text-tertiary)]\">\n          {describePermissionChange(permissionChange)}\n        </p>\n      </div>\n      <button\n        type=\"button\"\n        onClick={acknowledgePermissionChange}\n        aria-label=\"Dismiss\"\n        className=\"-m-1 shrink-0 rounded p-1 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n      >\n        <X className=\"size-4\" />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AA8BM,SACE,KADF;AA5BN,SAAS,SAAS;AAElB,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAelC,SAAS,yBAAyB;AACvC,QAAM,EAAE,kBAAkB,4BAA4B,IAAI,eAAe;AAEzE,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,OAAE,WAAU,sCAAqC,iCAElD;AAAA,UACA,oBAAC,OAAE,WAAU,8CACV,mCAAyB,gBAAgB,GAC5C;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,QACxB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/plan-editor/helpers.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared types and helpers for the subscriptions feature.
+ * Extracted from subscriptions/page.tsx to enable sub-component files.
+ */
+export type TabId = 'plans' | 'tiers' | 'subscribers';
+export interface PlanFormData {
+    name: string;
+    description: string;
+    amount: string;
+    currency: string;
+    interval: string;
+    intervalCount: string;
+    features: {
+        name: string;
+        included: boolean;
+        limit?: number;
+    }[];
+    trialDays: string;
+    pricingKind: 'fixed' | 'sum-of-items';
+    productIds: string[];
+    minItems: string;
+    maxItems: string;
+    subscriptionDiscountPercent: string;
+    badges: string[];
+    groupId: string;
+    groupLabel: string;
+    groupRole: '' | 'default' | 'alternate';
+}
+export interface TierFormData {
+    name: string;
+    slug: string;
+    description: string;
+    icon: string;
+    color: string;
+    monthlyPrice: string;
+    yearlyPrice: string;
+    currency: string;
+    discountPercentage: string;
+    freeServicesPerMonth: string;
+    priorityBooking: boolean;
+    vipAccess: boolean;
+    featured: boolean;
+    benefits: {
+        name: string;
+        description: string;
+    }[];
+    linkedPlanId: string;
+}
+export declare function formatInterval(interval: string, count?: number): string;
+export declare function getStatusColor(status: string): "bg-[var(--bg-muted)] text-[var(--text-secondary)]" | "bg-[var(--success-bg)] text-[var(--success)]" | "bg-[var(--warning-bg)] text-[var(--warning)]" | "bg-[var(--error-bg)] text-[var(--error)]";
+export declare const EMPTY_PLAN_FORM: PlanFormData;
+export declare const EMPTY_TIER_FORM: TierFormData;

package/dist/plan-editor/helpers.js

@@ -0,0 +1,73 @@
+function formatInterval(interval, count = 1) {
+  const labels = {
+    daily: "day",
+    weekly: "week",
+    monthly: "month",
+    quarterly: "quarter",
+    biannually: "6 months",
+    annually: "year"
+  };
+  const label = labels[interval] || interval;
+  return count > 1 ? `Every ${count} ${label}s` : `Per ${label}`;
+}
+function getStatusColor(status) {
+  switch (status) {
+    case "active":
+      return "bg-[var(--success-bg)] text-[var(--success)]";
+    case "inactive":
+      return "bg-[var(--bg-muted)] text-[var(--text-secondary)]";
+    case "archived":
+      return "bg-[var(--error-bg)] text-[var(--error)]";
+    case "non_renewing":
+      return "bg-[var(--warning-bg)] text-[var(--warning)]";
+    case "attention":
+      return "bg-[var(--warning-bg)] text-[var(--warning)]";
+    case "cancelled":
+      return "bg-[var(--error-bg)] text-[var(--error)]";
+    default:
+      return "bg-[var(--bg-muted)] text-[var(--text-secondary)]";
+  }
+}
+const EMPTY_PLAN_FORM = {
+  name: "",
+  description: "",
+  amount: "",
+  currency: "NGN",
+  interval: "monthly",
+  intervalCount: "1",
+  features: [],
+  trialDays: "",
+  pricingKind: "fixed",
+  productIds: [],
+  minItems: "",
+  maxItems: "",
+  subscriptionDiscountPercent: "",
+  badges: [],
+  groupId: "",
+  groupLabel: "",
+  groupRole: ""
+};
+const EMPTY_TIER_FORM = {
+  name: "",
+  slug: "",
+  description: "",
+  icon: "",
+  color: "#6366f1",
+  monthlyPrice: "",
+  yearlyPrice: "",
+  currency: "NGN",
+  discountPercentage: "",
+  freeServicesPerMonth: "",
+  priorityBooking: false,
+  vipAccess: false,
+  featured: false,
+  benefits: [],
+  linkedPlanId: ""
+};
+export {
+  EMPTY_PLAN_FORM,
+  EMPTY_TIER_FORM,
+  formatInterval,
+  getStatusColor
+};
+//# sourceMappingURL=helpers.js.map

package/dist/plan-editor/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plan-editor/helpers.ts"],"sourcesContent":["/**\n * Shared types and helpers for the subscriptions feature.\n * Extracted from subscriptions/page.tsx to enable sub-component files.\n */\n\nexport type TabId = 'plans' | 'tiers' | 'subscribers';\n\nexport interface PlanFormData {\n  name: string;\n  description: string;\n  amount: string;\n  currency: string;\n  interval: string;\n  intervalCount: string;\n  features: { name: string; included: boolean; limit?: number }[];\n  trialDays: string;\n  // Configurable subscriptions (sum-of-items / cadence-siblings / badges)\n  pricingKind: 'fixed' | 'sum-of-items';\n  productIds: string[];\n  minItems: string;\n  maxItems: string;\n  subscriptionDiscountPercent: string;\n  badges: string[];\n  groupId: string;\n  groupLabel: string;\n  groupRole: '' | 'default' | 'alternate';\n}\n\nexport interface TierFormData {\n  name: string;\n  slug: string;\n  description: string;\n  icon: string;\n  color: string;\n  monthlyPrice: string;\n  yearlyPrice: string;\n  currency: string;\n  discountPercentage: string;\n  freeServicesPerMonth: string;\n  priorityBooking: boolean;\n  vipAccess: boolean;\n  featured: boolean;\n  benefits: { name: string; description: string }[];\n  linkedPlanId: string;\n}\n\nexport function formatInterval(interval: string, count = 1) {\n  const labels: Record<string, string> = {\n    daily: 'day',\n    weekly: 'week',\n    monthly: 'month',\n    quarterly: 'quarter',\n    biannually: '6 months',\n    annually: 'year',\n  };\n  const label = labels[interval] || interval;\n  return count > 1 ? `Every ${count} ${label}s` : `Per ${label}`;\n}\n\nexport function getStatusColor(status: string) {\n  switch (status) {\n    case 'active':\n      return 'bg-[var(--success-bg)] text-[var(--success)]';\n    case 'inactive':\n      return 'bg-[var(--bg-muted)] text-[var(--text-secondary)]';\n    case 'archived':\n      return 'bg-[var(--error-bg)] text-[var(--error)]';\n    case 'non_renewing':\n      return 'bg-[var(--warning-bg)] text-[var(--warning)]';\n    case 'attention':\n      return 'bg-[var(--warning-bg)] text-[var(--warning)]';\n    case 'cancelled':\n      return 'bg-[var(--error-bg)] text-[var(--error)]';\n    default:\n      return 'bg-[var(--bg-muted)] text-[var(--text-secondary)]';\n  }\n}\n\nexport const EMPTY_PLAN_FORM: PlanFormData = {\n  name: '',\n  description: '',\n  amount: '',\n  currency: 'NGN',\n  interval: 'monthly',\n  intervalCount: '1',\n  features: [],\n  trialDays: '',\n  pricingKind: 'fixed',\n  productIds: [],\n  minItems: '',\n  maxItems: '',\n  subscriptionDiscountPercent: '',\n  badges: [],\n  groupId: '',\n  groupLabel: '',\n  groupRole: '',\n};\n\nexport const EMPTY_TIER_FORM: TierFormData = {\n  name: '',\n  slug: '',\n  description: '',\n  icon: '',\n  color: '#6366f1',\n  monthlyPrice: '',\n  yearlyPrice: '',\n  currency: 'NGN',\n  discountPercentage: '',\n  freeServicesPerMonth: '',\n  priorityBooking: false,\n  vipAccess: false,\n  featured: false,\n  benefits: [],\n  linkedPlanId: '',\n};\n"],"mappings":"AA8CO,SAAS,eAAe,UAAkB,QAAQ,GAAG;AAC1D,QAAM,SAAiC;AAAA,IACrC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACA,QAAM,QAAQ,OAAO,QAAQ,KAAK;AAClC,SAAO,QAAQ,IAAI,SAAS,KAAK,IAAI,KAAK,MAAM,OAAO,KAAK;AAC9D;AAEO,SAAS,eAAe,QAAgB;AAC7C,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,MAAM,kBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,YAAY,CAAC;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,6BAA6B;AAAA,EAC7B,QAAQ,CAAC;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb;AAEO,MAAM,kBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa;AAAA,EACb,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,cAAc;AAChB;","names":[]}

package/dist/plan-editor/index.d.ts

@@ -0,0 +1 @@
+export { PlanEditorPage } from './plan-editor-page';

package/dist/plan-editor/index.js

@@ -0,0 +1,5 @@
+import { PlanEditorPage } from "./plan-editor-page";
+export {
+  PlanEditorPage
+};
+//# sourceMappingURL=index.js.map

package/dist/plan-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plan-editor/index.ts"],"sourcesContent":["export { PlanEditorPage } from './plan-editor-page';\n"],"mappings":"AAAA,SAAS,sBAAsB;","names":[]}

package/dist/plan-editor/plan-editor-page.d.ts

@@ -0,0 +1,5 @@
+interface PlanEditorPageProps {
+    mode: 'create' | 'edit';
+}
+export declare function PlanEditorPage({ mode }: PlanEditorPageProps): import("react").JSX.Element;
+export {};

package/dist/plan-editor/plan-editor-page.js

@@ -0,0 +1,142 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useParams, useRouter } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { DetailPageSkeleton } from "@withpotter/ui-kit/page-skeletons";
+import { MobilePageHeader } from "@withpotter/components/mobile/mobile-page-header";
+import { FloatingSaveBar } from "@withpotter/components/editor-shared";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { Reveal } from "@withpotter/ui-kit";
+import { CreditCard, Save } from "lucide-react";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+import { usePlanForm } from "./use-plan-form";
+import {
+  BadgesSection,
+  MemberBenefitsSection,
+  BasicsSection,
+  EligibleItemsSection,
+  PlanPreview,
+  PricingModelSection,
+  PricingSection,
+  SiblingGroupSection,
+  TrialFeaturesSection
+} from "./sections";
+function PlanEditorPage({ mode }) {
+  const router = useRouter();
+  const params = useParams();
+  const { tenant } = useAuth();
+  const tenantSlug = tenant?.slug;
+  const planId = mode === "edit" ? params?.planId : void 0;
+  const {
+    form,
+    setForm,
+    isEditing,
+    loadingPlan,
+    loadError,
+    saving,
+    saveDisabled,
+    blocker,
+    handleSave,
+    isDirty
+  } = usePlanForm({ mode, tenantSlug, planId });
+  const confirm = useConfirm();
+  const leave = async (href) => {
+    if (isDirty && !await confirm({
+      title: "Discard this plan?",
+      description: "What you have typed will not be saved.",
+      confirmLabel: "Discard",
+      cancelLabel: "Keep editing",
+      tone: "danger"
+    }))
+      return;
+    router.push(href);
+  };
+  const onBack = () => void leave("/dashboard/subscriptions");
+  if (loadingPlan) return /* @__PURE__ */ jsx(DetailPageSkeleton, {});
+  if (loadError) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto p-6", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-4",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+            "Back to memberships"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "p-4 border border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)] rounded-md text-sm", children: loadError })
+    ] });
+  }
+  const title = isEditing ? form.name || "Edit plan" : "New plan";
+  const sectionProps = { form, setForm, isEditing };
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    blocker && /* @__PURE__ */ jsx("span", { className: "hidden text-xs text-[var(--text-tertiary)] sm:inline", children: blocker }),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onBack, children: "Discard" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: handleSave,
+        loading: saving,
+        disabled: saveDisabled,
+        icon: /* @__PURE__ */ jsx(Save, {}),
+        children: isEditing ? "Save changes" : "Create plan"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "pb-24 lg:pb-12", children: [
+    /* @__PURE__ */ jsx(MobilePageHeader, { title }),
+    /* @__PURE__ */ jsx(
+      DetailPage,
+      {
+        breadcrumbs: [
+          {
+            label: "Memberships",
+            href: "/dashboard/subscriptions",
+            icon: /* @__PURE__ */ jsx(CreditCard, {})
+          },
+          { label: title }
+        ],
+        onNavigate: (href) => void leave(href),
+        actions,
+        maxWidth: "max-w-6xl",
+        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 py-6 xl:grid-cols-[minmax(0,1fr)_320px] xl:items-start", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-4", children: [
+            /* @__PURE__ */ jsx(PricingModelSection, { ...sectionProps }),
+            isEditing && /* The two pricing sections render nothing on edit, because a
+             Paystack plan code is bound to the amount and the cycle. They
+             simply vanished, so the price looked lost rather than fixed. */
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Price and billing cycle are fixed once a plan exists \u2014 members are billed against them. Create a new plan to charge differently." }),
+            /* @__PURE__ */ jsx(BasicsSection, { ...sectionProps }),
+            /* @__PURE__ */ jsx(PricingSection, { ...sectionProps }),
+            /* @__PURE__ */ jsx(Reveal, { show: form.pricingKind === "sum-of-items", children: /* @__PURE__ */ jsx(EligibleItemsSection, { ...sectionProps, tenantSlug }) }),
+            /* @__PURE__ */ jsx(SiblingGroupSection, { ...sectionProps, tenantSlug }),
+            /* @__PURE__ */ jsx(MemberBenefitsSection, { ...sectionProps }),
+            /* @__PURE__ */ jsx(BadgesSection, { ...sectionProps }),
+            /* @__PURE__ */ jsx(TrialFeaturesSection, { ...sectionProps })
+          ] }),
+          /* @__PURE__ */ jsx(PlanPreview, { form })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingSaveBar,
+      {
+        isDirty,
+        saving,
+        onSave: handleSave,
+        entityName: "Plan",
+        isEditing
+      }
+    )
+  ] });
+}
+export {
+  PlanEditorPage
+};
+//# sourceMappingURL=plan-editor-page.js.map

package/dist/plan-editor/plan-editor-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plan-editor/plan-editor-page.tsx"],"sourcesContent":["'use client';\n\nimport { useParams, useRouter } from 'next/navigation';\nimport { ArrowLeft } from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { DetailPageSkeleton } from '@withpotter/ui-kit/page-skeletons';\nimport { MobilePageHeader } from '@withpotter/components/mobile/mobile-page-header';\nimport { FloatingSaveBar } from '@withpotter/components/editor-shared';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { Reveal } from '@withpotter/ui-kit';\nimport { CreditCard, Save } from 'lucide-react';\nimport { useConfirm } from '@withpotter/ui-kit/confirm-dialog';\nimport { usePlanForm } from './use-plan-form';\nimport {\n  BadgesSection,\n  MemberBenefitsSection,\n  BasicsSection,\n  EligibleItemsSection,\n  PlanPreview,\n  PricingModelSection,\n  PricingSection,\n  SiblingGroupSection,\n  TrialFeaturesSection,\n} from './sections';\n\ninterface PlanEditorPageProps {\n  mode: 'create' | 'edit';\n}\n\nexport function PlanEditorPage({ mode }: PlanEditorPageProps) {\n  const router = useRouter();\n  const params = useParams();\n  const { tenant } = useAuth();\n  const tenantSlug = tenant?.slug;\n  const planId = mode === 'edit' ? (params?.planId as string) : undefined;\n\n  const {\n    form,\n    setForm,\n    isEditing,\n    loadingPlan,\n    loadError,\n    saving,\n    saveDisabled,\n    blocker,\n    handleSave,\n    isDirty,\n  } = usePlanForm({ mode, tenantSlug, planId });\n\n  const confirm = useConfirm();\n\n  /**\n   * Leaving is not saving, and it used to be silent.\n   *\n   * `useEditorDirtyTracking` installs a `beforeunload` guard, which catches a\n   * reload and nothing else — Discard and the breadcrumb are client\n   * navigation, so a half-built plan went away on one click with no question\n   * asked.\n   */\n  const leave = async (href: string) => {\n    if (\n      isDirty &&\n      !(await confirm({\n        title: 'Discard this plan?',\n        description: 'What you have typed will not be saved.',\n        confirmLabel: 'Discard',\n        cancelLabel: 'Keep editing',\n        tone: 'danger',\n      }))\n    )\n      return;\n    router.push(href);\n  };\n\n  const onBack = () => void leave('/dashboard/subscriptions');\n\n  if (loadingPlan) return <DetailPageSkeleton />;\n\n  if (loadError) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-6\">\n        <button\n          type=\"button\"\n          onClick={onBack}\n          className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-4\"\n        >\n          <ArrowLeft className=\"size-4\" />\n          Back to memberships\n        </button>\n        <div className=\"p-4 border border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)] rounded-md text-sm\">\n          {loadError}\n        </div>\n      </div>\n    );\n  }\n\n  const title = isEditing ? form.name || 'Edit plan' : 'New plan';\n  const sectionProps = { form, setForm, isEditing };\n\n  /**\n   * The shared detail/editor frame, same as the customer, product and invoice\n   * editors. This owned a bespoke sticky bar of its own — one of four copies of\n   * the same header, each carrying the same `sticky top-14` offset for an app\n   * header this shell does not have, so each overlapped its own first section.\n   */\n  const actions = (\n    <>\n      {/* The reason the button is dead, beside the button. */}\n      {blocker && (\n        <span className=\"hidden text-xs text-[var(--text-tertiary)] sm:inline\">\n          {blocker}\n        </span>\n      )}\n      <Button variant=\"secondary\" onClick={onBack}>\n        Discard\n      </Button>\n      <Button\n        variant=\"primary\"\n        onClick={handleSave}\n        loading={saving}\n        disabled={saveDisabled}\n        icon={<Save />}\n      >\n        {isEditing ? 'Save changes' : 'Create plan'}\n      </Button>\n    </>\n  );\n\n  return (\n    <div className=\"pb-24 lg:pb-12\">\n      <MobilePageHeader title={title} />\n\n      <DetailPage\n        breadcrumbs={[\n          {\n            label: 'Memberships',\n            href: '/dashboard/subscriptions',\n            icon: <CreditCard />,\n          },\n          { label: title },\n        ]}\n        onNavigate={(href) => void leave(href)}\n        actions={actions}\n        maxWidth=\"max-w-6xl\"\n      >\n        {/* Two columns from xl, the same shape as the product editor: the\n            form in the wide one, the thing being made beside it. */}\n        <div className=\"grid grid-cols-1 gap-6 py-6 xl:grid-cols-[minmax(0,1fr)_320px] xl:items-start\">\n          <div className=\"min-w-0 space-y-4\">\n            <PricingModelSection {...sectionProps} />\n            {isEditing && (\n              /* The two pricing sections render nothing on edit, because a\n               Paystack plan code is bound to the amount and the cycle. They\n               simply vanished, so the price looked lost rather than fixed. */\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                Price and billing cycle are fixed once a plan exists — members\n                are billed against them. Create a new plan to charge\n                differently.\n              </p>\n            )}\n            <BasicsSection {...sectionProps} />\n            <PricingSection {...sectionProps} />\n            {/* Only a sum-of-items plan has items, and it arrives on the same\n              spring as the amount it replaces — the panel grows into the page\n              rather than the eight hundred pixels below it jumping. */}\n            <Reveal show={form.pricingKind === 'sum-of-items'}>\n              <EligibleItemsSection {...sectionProps} tenantSlug={tenantSlug} />\n            </Reveal>\n            <SiblingGroupSection {...sectionProps} tenantSlug={tenantSlug} />\n            <MemberBenefitsSection {...sectionProps} />\n            <BadgesSection {...sectionProps} />\n            <TrialFeaturesSection {...sectionProps} />\n          </div>\n\n          <PlanPreview form={form} />\n        </div>\n      </DetailPage>\n\n      <FloatingSaveBar\n        isDirty={isDirty}\n        saving={saving}\n        onSave={handleSave}\n        entityName=\"Plan\"\n        isEditing={isEditing}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/plan-editor/sections/badges-section.d.ts

@@ -0,0 +1,7 @@
+import type { PlanSectionProps } from '../types';
+/**
+ * The ribbon on the plan, on the storefront. "Badges" said nothing about that,
+ * so the hint does — a merchant should not have to publish one to find out
+ * where it lands.
+ */
+export declare function BadgesSection({ form, setForm }: PlanSectionProps): import("react").JSX.Element;

package/dist/plan-editor/sections/badges-section.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { Button } from "@withpotter/ui-kit/button";
+import { EditorSection, Field, Input, RemovableChip } from "@withpotter/ui-kit";
+function BadgesSection({ form, setForm }) {
+  const [draft, setDraft] = useState("");
+  const add = () => {
+    const v = draft.trim();
+    if (!v || form.badges.includes(v)) return;
+    setForm((f) => ({ ...f, badges: [...f.badges, v] }));
+    setDraft("");
+  };
+  const remove = (v) => setForm((f) => ({ ...f, badges: f.badges.filter((b) => b !== v) }));
+  return /* @__PURE__ */ jsxs(EditorSection, { title: "Badges", children: [
+    /* @__PURE__ */ jsx(
+      Field,
+      {
+        label: "Ribbon on the plan",
+        hint: "Sits on the plan's card where people choose, e.g. Most popular.",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  add();
+                }
+              },
+              placeholder: "e.g. Most popular",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: add, children: "Add" })
+        ] })
+      }
+    ),
+    form.badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: form.badges.map((b) => /* @__PURE__ */ jsx(
+      RemovableChip,
+      {
+        onRemove: () => remove(b),
+        removeLabel: `Remove ${b}`,
+        children: b
+      },
+      b
+    )) }) })
+  ] });
+}
+export {
+  BadgesSection
+};
+//# sourceMappingURL=badges-section.js.map

package/dist/plan-editor/sections/badges-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/badges-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport type { PlanSectionProps } from '../types';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { EditorSection, Field, Input, RemovableChip } from '@withpotter/ui-kit';\n\n/**\n * The ribbon on the plan, on the storefront. \"Badges\" said nothing about that,\n * so the hint does — a merchant should not have to publish one to find out\n * where it lands.\n */\nexport function BadgesSection({ form, setForm }: PlanSectionProps) {\n  const [draft, setDraft] = useState('');\n\n  const add = () => {\n    const v = draft.trim();\n    if (!v || form.badges.includes(v)) return;\n    setForm((f) => ({ ...f, badges: [...f.badges, v] }));\n    setDraft('');\n  };\n  const remove = (v: string) =>\n    setForm((f) => ({ ...f, badges: f.badges.filter((b) => b !== v) }));\n\n  return (\n    <EditorSection title=\"Badges\">\n      <Field\n        label=\"Ribbon on the plan\"\n        hint=\"Sits on the plan's card where people choose, e.g. Most popular.\"\n      >\n        <div className=\"flex gap-2\">\n          <Input\n            type=\"text\"\n            value={draft}\n            onChange={(e) => setDraft(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                add();\n              }\n            }}\n            placeholder=\"e.g. Most popular\"\n            className=\"flex-1\"\n          />\n          <Button variant=\"secondary\" onClick={add}>\n            Add\n          </Button>\n        </div>\n      </Field>\n      {form.badges.length > 0 && (\n        <div className=\"flex flex-wrap gap-1\">\n          <AnimatePresence initial={false}>\n            {form.badges.map((b) => (\n              <RemovableChip\n                key={b}\n                onRemove={() => remove(b)}\n                removeLabel={`Remove ${b}`}\n              >\n                {b}\n              </RemovableChip>\n            ))}\n          </AnimatePresence>\n        </div>\n      )}\n    </EditorSection>\n  );\n}\n"],"mappings":";AA+BQ,SACE,KADF;AA7BR,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAEhC,SAAS,cAAc;AACvB,SAAS,eAAe,OAAO,OAAO,qBAAqB;AAOpD,SAAS,cAAc,EAAE,MAAM,QAAQ,GAAqB;AACjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAErC,QAAM,MAAM,MAAM;AAChB,UAAM,IAAI,MAAM,KAAK;AACrB,QAAI,CAAC,KAAK,KAAK,OAAO,SAAS,CAAC,EAAG;AACnC,YAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE;AACnD,aAAS,EAAE;AAAA,EACb;AACA,QAAM,SAAS,CAAC,MACd,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,QAAQ,EAAE,OAAO,OAAO,CAAC,MAAM,MAAM,CAAC,EAAE,EAAE;AAEpE,SACE,qBAAC,iBAAc,OAAM,UACnB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QAEL,+BAAC,SAAI,WAAU,cACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,cACxC,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,SAAS;AACrB,oBAAE,eAAe;AACjB,sBAAI;AAAA,gBACN;AAAA,cACF;AAAA,cACA,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,oBAAC,UAAO,SAAQ,aAAY,SAAS,KAAK,iBAE1C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACC,KAAK,OAAO,SAAS,KACpB,oBAAC,SAAI,WAAU,wBACb,8BAAC,mBAAgB,SAAS,OACvB,eAAK,OAAO,IAAI,CAAC,MAChB;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU,MAAM,OAAO,CAAC;AAAA,QACxB,aAAa,UAAU,CAAC;AAAA,QAEvB;AAAA;AAAA,MAJI;AAAA,IAKP,CACD,GACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/plan-editor/sections/basics-section.d.ts

@@ -0,0 +1,2 @@
+import type { PlanSectionProps } from '../types';
+export declare function BasicsSection({ form, setForm }: PlanSectionProps): import("react").JSX.Element;

package/dist/plan-editor/sections/basics-section.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorSection, Field, Input, Textarea } from "@withpotter/ui-kit";
+function BasicsSection({ form, setForm }) {
+  return /* @__PURE__ */ jsxs(EditorSection, { title: "Basics", children: [
+    /* @__PURE__ */ jsx(Field, { label: "Plan name", required: true, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        value: form.name,
+        onChange: (e) => setForm((f) => ({ ...f, name: e.target.value })),
+        placeholder: "e.g. Premium monthly",
+        className: "w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: "Description", children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: form.description,
+        onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })),
+        rows: 2,
+        className: "w-full"
+      }
+    ) })
+  ] });
+}
+export {
+  BasicsSection
+};
+//# sourceMappingURL=basics-section.js.map

package/dist/plan-editor/sections/basics-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plan-editor/sections/basics-section.tsx"],"sourcesContent":["'use client';\n\nimport type { PlanSectionProps } from '../types';\nimport { EditorSection, Field, Input, Textarea } from '@withpotter/ui-kit';\n\nexport function BasicsSection({ form, setForm }: PlanSectionProps) {\n  return (\n    <EditorSection title=\"Basics\">\n      <Field label=\"Plan name\" required>\n        <Input\n          type=\"text\"\n          value={form.name}\n          onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}\n          placeholder=\"e.g. Premium monthly\"\n          className=\"w-full\"\n        />\n      </Field>\n      <Field label=\"Description\">\n        <Textarea\n          value={form.description}\n          onChange={(e) =>\n            setForm((f) => ({ ...f, description: e.target.value }))\n          }\n          rows={2}\n          className=\"w-full\"\n        />\n      </Field>\n    </EditorSection>\n  );\n}\n"],"mappings":";AAOI,SAEI,KAFJ;AAJJ,SAAS,eAAe,OAAO,OAAO,gBAAgB;AAE/C,SAAS,cAAc,EAAE,MAAM,QAAQ,GAAqB;AACjE,SACE,qBAAC,iBAAc,OAAM,UACnB;AAAA,wBAAC,SAAM,OAAM,aAAY,UAAQ,MAC/B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,KAAK;AAAA,QACZ,UAAU,CAAC,MAAM,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,EAAE,OAAO,MAAM,EAAE;AAAA,QAChE,aAAY;AAAA,QACZ,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,IACA,oBAAC,SAAM,OAAM,eACX;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,KAAK;AAAA,QACZ,UAAU,CAAC,MACT,QAAQ,CAAC,OAAO,EAAE,GAAG,GAAG,aAAa,EAAE,OAAO,MAAM,EAAE;AAAA,QAExD,MAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/plan-editor/sections/eligible-items-section.d.ts

@@ -0,0 +1,6 @@
+import type { PlanSectionProps } from '../types';
+interface EligibleItemsSectionProps extends PlanSectionProps {
+    tenantSlug: string | undefined;
+}
+export declare function EligibleItemsSection({ form, setForm, tenantSlug, }: EligibleItemsSectionProps): import("react").JSX.Element;
+export {};