@powerhousedao/contributor-billing 0.1.41 → 0.1.43

package/dist/editors/service-offering-editor/components/TheMatrix.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { generateId } from "document-model/core";
-import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, } from "../../../document-models/service-offering/gen/creators.js";
+import { RECURRING_BILLING_CYCLES, BILLING_CYCLE_SHORT_LABELS, formatPrice, getMonthlyEquivalent, } from "./pricing-utils.js";
+import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, updateService, } from "../../../document-models/service-offering/gen/creators.js";
+import { useResourceTemplateDocumentsInSelectedDrive } from "../../../document-models/resource-template/hooks.js";
 const SERVICE_LEVELS = [
     {
         value: "INCLUDED",
@@ -41,38 +43,6 @@ const SERVICE_LEVELS = [
     },
 ];
 const UNGROUPED_ID = "__ungrouped__";
-const FACET_CATEGORIES = {
-    FUNCTION: {
-        label: "SNO Function",
-        options: [
-            { id: "operational-hub", label: "Operational Hub" },
-            { id: "embryonic-hub", label: "Embryonic Hub" },
-        ],
-    },
-    LEGAL_ENTITY: {
-        label: "Legal Entity",
-        options: [
-            { id: "swiss-association", label: "Swiss Association" },
-            { id: "bvi-ltd", label: "BVI Ltd" },
-            { id: "unaffiliated", label: "Unaffiliated" },
-        ],
-    },
-    TEAM_STRUCTURE: {
-        label: "Team",
-        options: [
-            { id: "remote-team", label: "Remote" },
-            { id: "on-premise", label: "On-Premise" },
-            { id: "hybrid", label: "Hybrid" },
-        ],
-    },
-    ANONYMITY: {
-        label: "Anonymity",
-        options: [
-            { id: "high-anonymity", label: "High" },
-            { id: "highest-anonymity", label: "Highest" },
-        ],
-    },
-};
 const matrixStyles = `
   .matrix {
     background: var(--so-white);
@@ -268,6 +238,40 @@ const matrixStyles = `
     color: var(--so-violet-200);
   }
 
+  /* Billing Cycle Selector in Tier Header */
+  .matrix__tier-cycle-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.625rem;
+    color: var(--so-slate-600);
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    outline: none;
+    transition: var(--so-transition-fast);
+    margin-top: 0.25rem;
+  }
+
+  .matrix__tier-cycle-select:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .matrix__tier-cycle-select:focus {
+    border-color: var(--so-violet-400);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  .matrix__tier-header--selected .matrix__tier-cycle-select {
+    background: var(--so-violet-500);
+    border-color: var(--so-violet-400);
+    color: var(--so-white);
+  }
+
+  .matrix__tier-header--selected .matrix__tier-cycle-select:focus {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+  }
+
   /* Section Header */
   .matrix__section-header {
     background: var(--so-slate-100);
@@ -437,6 +441,319 @@ const matrixStyles = `
     color: var(--so-slate-700);
   }
 
+  /* Premium Only Badge - Exclusivity Signal (Toggle Button) */
+  .matrix__premium-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    margin-left: 0.5rem;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+    font-family: var(--so-font-sans);
+  }
+
+  .matrix__premium-badge--active {
+    color: var(--so-amber-700);
+    background: linear-gradient(135deg, var(--so-amber-100) 0%, var(--so-amber-50) 100%);
+    border: 1px solid var(--so-amber-200);
+  }
+
+  .matrix__premium-badge--active:hover {
+    background: linear-gradient(135deg, var(--so-amber-200) 0%, var(--so-amber-100) 100%);
+    border-color: var(--so-amber-300);
+  }
+
+  .matrix__premium-badge--inactive {
+    color: var(--so-slate-400);
+    background: var(--so-slate-50);
+    border: 1px dashed var(--so-slate-200);
+    opacity: 0.6;
+  }
+
+  .matrix__premium-badge--inactive:hover {
+    opacity: 1;
+    color: var(--so-amber-600);
+    background: var(--so-amber-50);
+    border: 1px dashed var(--so-amber-300);
+  }
+
+  .matrix__premium-badge--active svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    fill: var(--so-amber-500);
+    stroke: var(--so-amber-600);
+  }
+
+  .matrix__premium-badge--inactive svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    fill: none;
+    stroke: currentColor;
+  }
+
+  /* Incomplete Services Warning */
+  .matrix__incomplete-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.875rem;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    background: var(--so-amber-50);
+    border: 1px solid var(--so-amber-200);
+    border-radius: var(--so-radius-md);
+    animation: matrix-warning-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes matrix-warning-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
+    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1); }
+  }
+
+  .matrix__incomplete-icon {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--so-amber-600);
+  }
+
+  .matrix__incomplete-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .matrix__incomplete-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .matrix__incomplete-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--so-amber-800);
+  }
+
+  .matrix__incomplete-text {
+    font-size: 0.8125rem;
+    color: var(--so-amber-700);
+    line-height: 1.5;
+  }
+
+  .matrix__incomplete-text strong {
+    font-weight: 600;
+    color: var(--so-amber-900);
+  }
+
+  /* Bulk Actions Toolbar */
+  .matrix__bulk-actions {
+    margin-bottom: 1rem;
+  }
+
+  .matrix__bulk-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--so-slate-600);
+    background: var(--so-slate-100);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__bulk-toggle:hover {
+    background: var(--so-slate-200);
+    color: var(--so-slate-700);
+  }
+
+  .matrix__bulk-toggle svg:first-child {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .matrix__bulk-toggle-arrow {
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-left: auto;
+    transition: transform var(--so-transition-fast);
+  }
+
+  .matrix__bulk-toggle-arrow--open {
+    transform: rotate(180deg);
+  }
+
+  .matrix__bulk-panel {
+    margin-top: 0.75rem;
+    padding: 1rem;
+    background: var(--so-slate-50);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    animation: so-scale-in var(--so-transition-fast) ease-out;
+  }
+
+  .matrix__bulk-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .matrix__bulk-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__bulk-buttons,
+  .matrix__bulk-copy {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .matrix__bulk-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.875rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: var(--so-radius-sm);
+    border: 1px solid;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__bulk-btn svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .matrix__bulk-btn--include {
+    background: var(--so-emerald-50);
+    border-color: var(--so-emerald-200);
+    color: var(--so-emerald-700);
+  }
+
+  .matrix__bulk-btn--include:hover {
+    background: var(--so-emerald-100);
+    border-color: var(--so-emerald-300);
+  }
+
+  .matrix__bulk-btn--clear {
+    background: var(--so-rose-50);
+    border-color: var(--so-rose-200);
+    color: var(--so-rose-700);
+  }
+
+  .matrix__bulk-btn--clear:hover {
+    background: var(--so-rose-100);
+    border-color: var(--so-rose-300);
+  }
+
+  .matrix__bulk-btn--copy {
+    background: var(--so-sky-50);
+    border-color: var(--so-sky-200);
+    color: var(--so-sky-700);
+  }
+
+  .matrix__bulk-btn--copy:hover {
+    background: var(--so-sky-100);
+    border-color: var(--so-sky-300);
+  }
+
+  /* Pattern Presets Section */
+  .matrix__bulk-patterns {
+    border-top: 1px dashed var(--so-slate-200);
+    padding-top: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  .matrix__bulk-label-icon {
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+  }
+
+  .matrix__pattern-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .matrix__pattern-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.875rem 0.75rem;
+    background: linear-gradient(135deg, var(--so-white) 0%, var(--so-slate-50) 100%);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+    text-align: center;
+  }
+
+  .matrix__pattern-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--so-shadow-md);
+    border-color: var(--so-violet-300);
+    background: linear-gradient(135deg, var(--so-violet-50) 0%, var(--so-white) 100%);
+  }
+
+  .matrix__pattern-btn:active {
+    transform: translateY(0);
+  }
+
+  .matrix__pattern-icon {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  .matrix__pattern-name {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+  }
+
+  .matrix__pattern-desc {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+    line-height: 1.3;
+  }
+
+  .matrix__pattern-btn--simple {
+    padding: 0.625rem 0.75rem;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+
+  .matrix__pattern-btn--simple .matrix__pattern-icon {
+    font-size: 1rem;
+  }
+
+  .matrix__pattern-btn--simple .matrix__pattern-name {
+    font-size: 0.75rem;
+  }
+
   .matrix__level-cell {
     padding: 0.625rem 1rem;
     text-align: center;
@@ -462,6 +779,41 @@ const matrixStyles = `
     font-weight: 500;
   }
 
+  /* Loss Aversion Styling for NOT_INCLUDED */
+  .matrix__level-cell--not-included {
+    position: relative;
+    background: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 8px,
+      rgba(148, 163, 184, 0.08) 8px,
+      rgba(148, 163, 184, 0.08) 16px
+    );
+  }
+
+  .matrix__level-cell--not-included:hover .matrix__upgrade-hint {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .matrix__upgrade-hint {
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    font-size: 0.5625rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    white-space: nowrap;
+    opacity: 0;
+    transition: all 0.15s ease-out;
+    pointer-events: none;
+  }
+
+  .matrix__level-value--not-included {
+    opacity: 0.6;
+  }
+
   /* Metric Row */
   .matrix__metric-row {
     background: inherit;
@@ -542,11 +894,26 @@ const matrixStyles = `
     border-bottom: 1px solid var(--so-slate-100);
   }
 
+  .matrix__metric-value-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
   .matrix__metric-value {
     font-size: 0.6875rem;
     color: var(--so-slate-500);
   }
 
+  .matrix__metric-overage {
+    font-family: var(--so-font-mono);
+    font-size: 0.5625rem;
+    font-weight: 500;
+    color: #059669;
+    white-space: nowrap;
+  }
+
   /* Add Metric Button on Service Row */
   .matrix__service-cell-wrapper {
     display: flex;
@@ -579,6 +946,54 @@ const matrixStyles = `
     color: var(--so-violet-700);
   }
 
+  /* Service Reorder Buttons */
+  .matrix__reorder-btns {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-right: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .matrix__service-row:hover .matrix__reorder-btns {
+    opacity: 1;
+  }
+
+  .matrix__reorder-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 14px;
+    padding: 0;
+    background: var(--so-slate-100);
+    border: 1px solid var(--so-slate-200);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.1s ease;
+  }
+
+  .matrix__reorder-btn:hover:not(:disabled) {
+    background: var(--so-violet-100);
+    border-color: var(--so-violet-300);
+  }
+
+  .matrix__reorder-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .matrix__reorder-btn svg {
+    width: 10px;
+    height: 10px;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__reorder-btn:hover:not(:disabled) svg {
+    color: var(--so-violet-600);
+  }
+
   /* Add Service Row */
   .matrix__add-service-row td {
     padding: 0.5rem 1rem;
@@ -919,6 +1334,89 @@ const matrixStyles = `
     color: #64748b;
   }
 
+  .matrix__panel-limit-value-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .matrix__panel-limit-overage {
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    color: #059669;
+    font-weight: 500;
+  }
+
+  /* Overage Pricing Section */
+  .matrix__panel-overage-section {
+    margin-top: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px dashed #cbd5e1;
+  }
+
+  .matrix__panel-overage-row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+  }
+
+  .matrix__panel-overage-price {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .matrix__panel-overage-currency {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    color: #64748b;
+  }
+
+  .matrix__panel-overage-input {
+    width: 4.5rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #0f172a;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  .matrix__panel-overage-input:focus {
+    border-color: #7c3aed;
+  }
+
+  .matrix__panel-overage-separator {
+    font-size: 0.875rem;
+    color: #94a3b8;
+  }
+
+  .matrix__panel-overage-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: #334155;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .matrix__panel-overage-select:focus {
+    border-color: #7c3aed;
+  }
+
+  .matrix__panel-overage-label {
+    font-size: 0.75rem;
+    color: #64748b;
+  }
+
   .matrix__panel-limit-actions {
     display: flex;
     gap: 0.25rem;
@@ -1340,6 +1838,26 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
     const services = state.global.services ?? [];
     const tiers = state.global.tiers ?? [];
     const optionGroups = state.global.optionGroups ?? [];
+    const resourceTemplateId = state.global.resourceTemplateId;
+    // Get resource templates to find the selected one
+    const templates = useResourceTemplateDocumentsInSelectedDrive();
+    // Get selected facets from the offering document's facetTargets
+    const offeringFacetTargets = state.global.facetTargets ?? [];
+    // Build facet categories from the SERVICE OFFERING's selected facet targets
+    // This ensures only the options selected in the offering's facet targeting appear in the Matrix
+    const facetCategories = useMemo(() => {
+        const categories = {};
+        offeringFacetTargets.forEach((facet) => {
+            categories[facet.categoryKey] = {
+                label: facet.categoryLabel,
+                options: facet.selectedOptions.map((option) => ({
+                    id: option.toLowerCase().replace(/\s+/g, "-"),
+                    label: option,
+                })),
+            };
+        });
+        return categories;
+    }, [offeringFacetTargets]);
     const [enabledOptionalGroups, setEnabledOptionalGroups] = useState(new Set(optionGroups.filter((g) => g.defaultSelected).map((g) => g.id)));
     const [selectedCell, setSelectedCell] = useState(null);
     const [addServiceModal, setAddServiceModal] = useState(null);
@@ -1347,17 +1865,32 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
     const [newServiceDescription, setNewServiceDescription] = useState("");
     const [newServiceSelectedTiers, setNewServiceSelectedTiers] = useState(new Set());
     const [selectedTierIdx, setSelectedTierIdx] = useState(0);
-    const [selectedFacets, setSelectedFacets] = useState({
-        FUNCTION: "operational-hub",
-        LEGAL_ENTITY: "swiss-association",
-        TEAM_STRUCTURE: "remote-team",
-        ANONYMITY: "high-anonymity",
+    // Selected billing cycle per tier (for tiers with multiple pricing options)
+    const [selectedBillingCycles, setSelectedBillingCycles] = useState({});
+    // Initialize selected facets from offering's facet targets
+    const [selectedFacets, setSelectedFacets] = useState(() => {
+        const initial = {};
+        offeringFacetTargets.forEach((facet) => {
+            if (facet.selectedOptions.length > 0) {
+                initial[facet.categoryKey] = facet.selectedOptions[0]
+                    .toLowerCase()
+                    .replace(/\s+/g, "-");
+            }
+        });
+        return initial;
     });
     // Metric editing modal state
     const [metricModal, setMetricModal] = useState(null);
     const [metricName, setMetricName] = useState("");
     const [metricLimits, setMetricLimits] = useState({});
     const [metricEnabledTiers, setMetricEnabledTiers] = useState(new Set());
+    // Per-tier overage pricing for metric modal
+    const [metricOveragePrices, setMetricOveragePrices] = useState({});
+    const [metricOverageCycles, setMetricOverageCycles] = useState({});
+    // Unit name for the metric (e.g., "entity", "user", "API call")
+    const [metricUnitName, setMetricUnitName] = useState("");
+    // Bulk actions state
+    const [showBulkActions, setShowBulkActions] = useState(false);
     const getServiceGroup = (service) => {
         // Services now have optionGroupId directly on them
         return service.optionGroupId || null;
@@ -1404,6 +1937,16 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         });
         return Array.from(metricsSet);
     };
+    // Incomplete services detection - services not assigned to any tier
+    const incompleteServices = useMemo(() => {
+        if (tiers.length === 0)
+            return [];
+        return services.filter((service) => {
+            // Check if service is included in at least one tier
+            const isIncludedAnywhere = tiers.some((tier) => tier.serviceLevels.some((sl) => sl.serviceId === service.id && sl.level === "INCLUDED"));
+            return !isIncludedAnywhere;
+        });
+    }, [services, tiers]);
     const getUsageLimitForMetric = (serviceId, metric, tier) => {
         return tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
     };
@@ -1439,6 +1982,150 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             return next;
         });
     };
+    // Bulk action handlers
+    const handleBulkIncludeAllInTier = (tierId) => {
+        const now = new Date().toISOString();
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier)
+            return;
+        services.forEach((service) => {
+            const existingLevel = tier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            if (!existingLevel) {
+                dispatch(addServiceLevel({
+                    tierId,
+                    serviceLevelId: generateId(),
+                    serviceId: service.id,
+                    level: "INCLUDED",
+                    optionGroupId: service.optionGroupId || undefined,
+                    lastModified: now,
+                }));
+            }
+            else if (existingLevel.level !== "INCLUDED") {
+                dispatch(updateServiceLevel({
+                    tierId,
+                    serviceLevelId: existingLevel.id,
+                    level: "INCLUDED",
+                    lastModified: now,
+                }));
+            }
+        });
+    };
+    const handleBulkClearTier = (tierId) => {
+        const now = new Date().toISOString();
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier)
+            return;
+        tier.serviceLevels.forEach((sl) => {
+            dispatch(updateServiceLevel({
+                tierId,
+                serviceLevelId: sl.id,
+                level: "NOT_INCLUDED",
+                lastModified: now,
+            }));
+        });
+    };
+    const handleBulkCopyFromTier = (sourceTierId, targetTierId) => {
+        const now = new Date().toISOString();
+        const sourceTier = tiers.find((t) => t.id === sourceTierId);
+        const targetTier = tiers.find((t) => t.id === targetTierId);
+        if (!sourceTier || !targetTier)
+            return;
+        services.forEach((service) => {
+            const sourceLevel = sourceTier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            const targetLevel = targetTier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            const newLevel = sourceLevel?.level || "NOT_INCLUDED";
+            if (!targetLevel) {
+                dispatch(addServiceLevel({
+                    tierId: targetTierId,
+                    serviceLevelId: generateId(),
+                    serviceId: service.id,
+                    level: newLevel,
+                    optionGroupId: service.optionGroupId || undefined,
+                    lastModified: now,
+                }));
+            }
+            else if (targetLevel.level !== newLevel) {
+                dispatch(updateServiceLevel({
+                    tierId: targetTierId,
+                    serviceLevelId: targetLevel.id,
+                    level: newLevel,
+                    lastModified: now,
+                }));
+            }
+        });
+    };
+    // Common Pattern Presets - apply marketing psychology patterns across all tiers
+    const handleApplyPattern = (patternId) => {
+        const now = new Date().toISOString();
+        const tierCount = tiers.length;
+        if (tierCount === 0)
+            return;
+        // Pattern definitions
+        const patterns = {
+            // Good-Better-Best: Progressive inclusion (50% → 75% → 100%)
+            "good-better-best": (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const servicePosition = serviceIdx / totalServices;
+                const tierPosition = tierIdx / (totalTiers - 1 || 1);
+                // Lower tiers get fewer services
+                const threshold = 0.5 + tierPosition * 0.5;
+                return servicePosition < threshold ? "INCLUDED" : "NOT_INCLUDED";
+            },
+            // Premium Only: Top services only in top tier
+            "premium-only": (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const isTopTier = tierIdx === totalTiers - 1;
+                const isPremiumService = serviceIdx < Math.ceil(totalServices * 0.3);
+                if (isPremiumService) {
+                    return isTopTier ? "INCLUDED" : "NOT_INCLUDED";
+                }
+                return "INCLUDED";
+            },
+            // Core + Upgrades: Core included everywhere, extras are optional
+            "core-upgrades": (serviceIdx, tierIdx, totalServices) => {
+                const isCoreService = serviceIdx < Math.ceil(totalServices * 0.5);
+                if (isCoreService) {
+                    return "INCLUDED";
+                }
+                return "OPTIONAL";
+            },
+            // Ascending: Each tier adds more services
+            ascending: (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const servicesPerTier = Math.ceil(totalServices / totalTiers);
+                const includedUpTo = (tierIdx + 1) * servicesPerTier;
+                return serviceIdx < includedUpTo ? "INCLUDED" : "NOT_INCLUDED";
+            },
+            // All Included: Everything included in all tiers
+            "all-included": () => "INCLUDED",
+            // All Optional: Everything optional in all tiers
+            "all-optional": () => "OPTIONAL",
+        };
+        const pattern = patterns[patternId];
+        if (!pattern)
+            return;
+        services.forEach((service, serviceIdx) => {
+            tiers.forEach((tier, tierIdx) => {
+                const newLevel = pattern(serviceIdx, tierIdx, services.length, tierCount);
+                const existingLevel = tier.serviceLevels.find((sl) => sl.serviceId === service.id);
+                if (!existingLevel) {
+                    dispatch(addServiceLevel({
+                        tierId: tier.id,
+                        serviceLevelId: generateId(),
+                        serviceId: service.id,
+                        level: newLevel,
+                        optionGroupId: service.optionGroupId || undefined,
+                        lastModified: now,
+                    }));
+                }
+                else if (existingLevel.level !== newLevel) {
+                    dispatch(updateServiceLevel({
+                        tierId: tier.id,
+                        serviceLevelId: existingLevel.id,
+                        level: newLevel,
+                        lastModified: now,
+                    }));
+                }
+            });
+        });
+    };
     const handleAddService = () => {
         if (!addServiceModal || !newServiceName.trim())
             return;
@@ -1485,32 +2172,53 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         setMetricName("");
         // Initialize limits for all tiers to empty string
         const initialLimits = {};
+        const initialOveragePrices = {};
+        const initialOverageCycles = {};
         // For new metrics, enable all tiers by default
         const allTierIds = new Set();
         tiers.forEach((tier) => {
             initialLimits[tier.id] = "";
+            initialOveragePrices[tier.id] = "";
+            initialOverageCycles[tier.id] = "";
             allTierIds.add(tier.id);
         });
         setMetricLimits(initialLimits);
         setMetricEnabledTiers(allTierIds);
+        // Reset per-tier overage pricing and unit name
+        setMetricOveragePrices(initialOveragePrices);
+        setMetricOverageCycles(initialOverageCycles);
+        setMetricUnitName("");
     };
     const handleEditMetric = (serviceId, metric) => {
         setMetricModal({ serviceId, metric });
         setMetricName(metric);
         // Initialize limits with existing values and track which tiers have this metric
         const existingLimits = {};
+        const existingOveragePrices = {};
+        const existingOverageCycles = {};
         const enabledTiers = new Set();
+        let existingUnitName = "";
         tiers.forEach((tier) => {
             const usageLimit = tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
             // Load value from either limit (numeric) or notes (string)
             existingLimits[tier.id] =
                 usageLimit?.limit?.toString() || usageLimit?.notes || "";
+            // Load per-tier overage pricing
+            existingOveragePrices[tier.id] = usageLimit?.unitPrice?.toString() || "";
+            existingOverageCycles[tier.id] = usageLimit?.unitPriceBillingCycle || "";
             if (usageLimit) {
                 enabledTiers.add(tier.id);
+                // Get unit name from first tier that has it
+                if (!existingUnitName && usageLimit.unitName) {
+                    existingUnitName = usageLimit.unitName;
+                }
             }
         });
         setMetricLimits(existingLimits);
         setMetricEnabledTiers(enabledTiers);
+        setMetricOveragePrices(existingOveragePrices);
+        setMetricOverageCycles(existingOverageCycles);
+        setMetricUnitName(existingUnitName);
     };
     const handleRemoveMetric = (serviceId, metric) => {
         // Remove this metric from all tiers
@@ -1525,6 +2233,45 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             }
         });
     };
+    const handleTogglePremiumExclusive = (serviceId) => {
+        const service = services.find((s) => s.id === serviceId);
+        if (!service)
+            return;
+        dispatch(updateService({
+            id: serviceId,
+            isPremiumExclusive: !service.isPremiumExclusive,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    // Service reordering - swap display order with adjacent service
+    const handleReorderService = (serviceId, direction, groupServices) => {
+        // Sort services by displayOrder for consistent ordering
+        const sortedServices = [...groupServices].sort((a, b) => {
+            const orderA = a.displayOrder ?? 999;
+            const orderB = b.displayOrder ?? 999;
+            return orderA - orderB;
+        });
+        const currentIndex = sortedServices.findIndex((s) => s.id === serviceId);
+        if (currentIndex === -1)
+            return;
+        const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+        if (targetIndex < 0 || targetIndex >= sortedServices.length)
+            return;
+        const currentService = sortedServices[currentIndex];
+        const targetService = sortedServices[targetIndex];
+        const now = new Date().toISOString();
+        // Swap display orders
+        dispatch(updateService({
+            id: currentService.id,
+            displayOrder: targetIndex,
+            lastModified: now,
+        }));
+        dispatch(updateService({
+            id: targetService.id,
+            displayOrder: currentIndex,
+            lastModified: now,
+        }));
+    };
     const handleSaveMetric = () => {
         if (!metricModal || !metricName.trim())
             return;
@@ -1539,6 +2286,13 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             // Check if value is numeric or string
             const parsedLimit = limitValue ? parseInt(limitValue, 10) : null;
             const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+            // Get per-tier overage pricing
+            const tierOveragePrice = metricOveragePrices[tier.id];
+            const tierOverageCycle = metricOverageCycles[tier.id];
+            const parsedOveragePrice = tierOveragePrice
+                ? parseFloat(tierOveragePrice)
+                : null;
+            const hasOveragePricing = parsedOveragePrice && tierOverageCycle;
             if (existingLimit && !isEnabled) {
                 // Remove limit - tier was disabled
                 dispatch(removeUsageLimit({
@@ -1553,8 +2307,14 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                     tierId: tier.id,
                     limitId: existingLimit.id,
                     metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
                     limit: isNumeric ? parsedLimit : null,
                     notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : null,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
+                    unitPriceBillingCycle: hasOveragePricing
+                        ? tierOverageCycle
+                        : undefined,
                     lastModified: now,
                 }));
             }
@@ -1565,9 +2325,15 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                     limitId: generateId(),
                     serviceId,
                     metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
                     limit: isNumeric ? parsedLimit : null,
                     notes: !isNumeric && limitValue ? limitValue.trim() : null,
                     resetPeriod: "MONTHLY",
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : undefined,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
+                    unitPriceBillingCycle: hasOveragePricing
+                        ? tierOverageCycle
+                        : undefined,
                     lastModified: now,
                 }));
             }
@@ -1576,6 +2342,9 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         setMetricName("");
         setMetricLimits({});
         setMetricEnabledTiers(new Set());
+        setMetricOveragePrices({});
+        setMetricOverageCycles({});
+        setMetricUnitName("");
     };
     const getLevelDisplay = (serviceLevel) => {
         if (!serviceLevel)
@@ -1600,35 +2369,72 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                         ? "Add services in the Service Catalog to configure the matrix."
                                         : "Add tiers in Tier Definition to configure the matrix." })] }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsxs("div", { className: "matrix", children: [_jsxs("div", { className: "matrix__facets", children: [_jsx("div", { className: "matrix__facets-row", children: Object.entries(FACET_CATEGORIES).map(([key, category]) => (_jsxs("div", { className: "matrix__facet-group", children: [_jsx("span", { className: "matrix__facet-label", children: category.label }), key === "ANONYMITY" ? (_jsx("div", { className: "matrix__toggle-group", children: category.options.map((option) => (_jsx("button", { onClick: () => setSelectedFacets((prev) => ({
-                                                    ...prev,
-                                                    [key]: option.id,
-                                                })), className: `matrix__toggle-btn ${selectedFacets[key] === option.id
-                                                    ? "matrix__toggle-btn--active"
-                                                    : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || "", onChange: (e) => setSelectedFacets((prev) => ({
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsxs("div", { className: "matrix", children: [Object.keys(facetCategories).length > 0 && (_jsx("div", { className: "matrix__facets", children: _jsx("div", { className: "matrix__facets-row", children: Object.entries(facetCategories).map(([key, category]) => (_jsxs("div", { className: "matrix__facet-group", children: [_jsx("span", { className: "matrix__facet-label", children: category.label }), category.options.length <= 3 ? (_jsx("div", { className: "matrix__toggle-group", children: category.options.map((option) => (_jsx("button", { type: "button", onClick: () => setSelectedFacets((prev) => ({
                                                 ...prev,
-                                                [key]: e.target.value,
-                                            })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }), selectedFacets.ANONYMITY === "highest-anonymity" && (_jsx("div", { className: "matrix__facet-notice", children: _jsxs("p", { className: "matrix__facet-notice-text", children: [_jsx("strong", { children: "Highest Anonymity:" }), " Additional setup services may be required for enhanced privacy configurations."] }) }))] }), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
-                                                    ? "matrix__tier-header--selected"
-                                                    : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
-                                                                ? "Custom"
-                                                                : `$${tier.pricing.amount}/mo` })] }) }, tier.id)))] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
-                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                                [key]: option.id,
+                                            })), className: `matrix__toggle-btn ${selectedFacets[key] === option.id
+                                                ? "matrix__toggle-btn--active"
+                                                : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || category.options[0]?.id || "", onChange: (e) => setSelectedFacets((prev) => ({
+                                            ...prev,
+                                            [key]: e.target.value,
+                                        })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }) })), services.length > 0 && tiers.length > 0 && (_jsxs("div", { className: "matrix__bulk-actions", children: [_jsxs("button", { type: "button", onClick: () => setShowBulkActions(!showBulkActions), className: "matrix__bulk-toggle", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h7" }) }), "Bulk Actions", _jsx("svg", { className: `matrix__bulk-toggle-arrow ${showBulkActions ? "matrix__bulk-toggle-arrow--open" : ""}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M19 9l-7 7-7-7" }) })] }), showBulkActions && (_jsxs("div", { className: "matrix__bulk-panel", children: [_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Include all services in:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkIncludeAllInTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--include", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), tier.name] }, tier.id))) })] }), _jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Clear all from:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkClearTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--clear", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }), tier.name] }, tier.id))) })] }), tiers.length >= 2 && (_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Copy configuration:" }), _jsx("div", { className: "matrix__bulk-copy", children: tiers.map((sourceTier, idx) => tiers
+                                                    .filter((_, i) => i !== idx)
+                                                    .map((targetTier) => (_jsxs("button", { type: "button", onClick: () => handleBulkCopyFromTier(sourceTier.id, targetTier.id), className: "matrix__bulk-btn matrix__bulk-btn--copy", children: [sourceTier.name, " \u2192 ", targetTier.name] }, `${sourceTier.id}-${targetTier.id}`)))) })] })), _jsxs("div", { className: "matrix__bulk-section matrix__bulk-patterns", children: [_jsxs("span", { className: "matrix__bulk-label", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "matrix__bulk-label-icon", children: _jsx("path", { d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Apply Pattern Preset:"] }), _jsxs("div", { className: "matrix__pattern-grid", children: [_jsxs("button", { type: "button", onClick: () => handleApplyPattern("good-better-best"), className: "matrix__pattern-btn", title: "Progressive inclusion: Basic tier gets 50%, mid-tier 75%, top tier 100%", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83D\uDCC8" }), _jsx("span", { className: "matrix__pattern-name", children: "Good-Better-Best" }), _jsx("span", { className: "matrix__pattern-desc", children: "Progressive inclusion" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("premium-only"), className: "matrix__pattern-btn", title: "Top 30% services exclusive to premium tier, rest included everywhere", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2B50" }), _jsx("span", { className: "matrix__pattern-name", children: "Premium Exclusives" }), _jsx("span", { className: "matrix__pattern-desc", children: "Top services in top tier only" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("core-upgrades"), className: "matrix__pattern-btn", title: "Core services included, extras as optional add-ons", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83C\uDFAF" }), _jsx("span", { className: "matrix__pattern-name", children: "Core + Add-ons" }), _jsx("span", { className: "matrix__pattern-desc", children: "Half included, half optional" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("ascending"), className: "matrix__pattern-btn", title: "Each tier unlocks more services progressively", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83E\uDE9C" }), _jsx("span", { className: "matrix__pattern-name", children: "Ascending Tiers" }), _jsx("span", { className: "matrix__pattern-desc", children: "Each tier unlocks more" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-included"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything included in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2713" }), _jsx("span", { className: "matrix__pattern-name", children: "All Included" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-optional"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything optional in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u25D0" }), _jsx("span", { className: "matrix__pattern-name", children: "All Optional" })] })] })] })] }))] })), incompleteServices.length > 0 && (_jsxs("div", { className: "matrix__incomplete-warning", children: [_jsx("div", { className: "matrix__incomplete-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { className: "matrix__incomplete-content", children: [_jsxs("span", { className: "matrix__incomplete-title", children: [incompleteServices.length, " service", incompleteServices.length !== 1 ? "s" : "", " not configured"] }), _jsxs("span", { className: "matrix__incomplete-text", children: ["The following services are not included in any tier:", " ", _jsx("strong", { children: incompleteServices
+                                                    .slice(0, 3)
+                                                    .map((s) => s.title)
+                                                    .join(", ") }), incompleteServices.length > 3 &&
+                                                ` and ${incompleteServices.length - 3} more`] })] })] })), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => {
+                                                const hasPricingOptions = tier.pricingOptions && tier.pricingOptions.length > 0;
+                                                const selectedCycleId = selectedBillingCycles[tier.id];
+                                                const activePricingOption = hasPricingOptions
+                                                    ? tier.pricingOptions.find((po) => po.id === selectedCycleId) ||
+                                                        tier.pricingOptions.find((po) => po.isDefault) ||
+                                                        tier.pricingOptions[0]
+                                                    : null;
+                                                const displayAmount = activePricingOption
+                                                    ? activePricingOption.amount
+                                                    : tier.pricing.amount;
+                                                const displayCycle = activePricingOption
+                                                    ? activePricingOption.billingCycle
+                                                    : tier.pricing.billingCycle;
+                                                const monthlyEquivalent = displayAmount &&
+                                                    displayCycle !== "MONTHLY" &&
+                                                    displayCycle !== "ONE_TIME"
+                                                    ? getMonthlyEquivalent(displayAmount, displayCycle)
+                                                    : null;
+                                                return (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
+                                                        ? "matrix__tier-header--selected"
+                                                        : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
+                                                                    ? "Custom"
+                                                                    : monthlyEquivalent
+                                                                        ? `$${monthlyEquivalent.toFixed(0)}/mo`
+                                                                        : displayAmount !== null
+                                                                            ? `$${displayAmount}/mo`
+                                                                            : "$null/mo" }), hasPricingOptions &&
+                                                                tier.pricingOptions.length > 1 && (_jsx("select", { value: selectedCycleId || activePricingOption?.id || "", onClick: (e) => e.stopPropagation(), onChange: (e) => {
+                                                                    e.stopPropagation();
+                                                                    setSelectedBillingCycles((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    }));
+                                                                }, className: "matrix__tier-cycle-select", children: tier.pricingOptions.map((po) => (_jsxs("option", { value: po.id, children: [BILLING_CYCLE_SHORT_LABELS[po.billingCycle], " ", "- $", po.amount] }, po.id))) }))] }) }, tier.id));
+                                            })] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
+                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Setup & Formation",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, "ungrouped-setup")), (regularGroups.length > 0 ||
-                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, "ungrouped-setup")), (regularGroups.length > 0 ||
+                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Recurring Services",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
+                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
                                                         ? "Custom"
-                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
+                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
                                                     const tierPrice = tier.pricing.amount || 0;
                                                     const grandTotal = tierPrice;
                                                     return (_jsx("td", { className: idx === selectedTierIdx
@@ -1656,17 +2462,19 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                 setNewServiceName("");
                                                 setNewServiceDescription("");
                                                 setNewServiceSelectedTiers(new Set());
-                                            }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleAddService, disabled: !newServiceName.trim() || newServiceSelectedTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: "Add Service" })] })] }) })), metricModal && (_jsx("div", { className: "matrix__modal-overlay", children: _jsxs("div", { className: "matrix__modal matrix__modal--wide", children: [_jsx("h3", { className: "matrix__modal-title", children: metricModal.metric ? "Edit Metric" : "Add Metric" }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Metric Name" }), _jsx("input", { type: "text", value: metricName, onChange: (e) => setMetricName(e.target.value), placeholder: "e.g., API Calls, Storage, Users", className: "matrix__modal-input", autoFocus: true })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Pricing Tiers & Values" }), _jsx("p", { className: "matrix__modal-hint", style: { marginBottom: "0.75rem" }, children: "Enable the metric for each tier and set values." }), _jsx("div", { style: {
+                                            }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleAddService, disabled: !newServiceName.trim() || newServiceSelectedTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: "Add Service" })] })] }) })), metricModal && (_jsx("div", { className: "matrix__modal-overlay", children: _jsxs("div", { className: "matrix__modal matrix__modal--wide", children: [_jsx("h3", { className: "matrix__modal-title", children: metricModal.metric ? "Edit Metric" : "Add Metric" }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Metric Name" }), _jsx("input", { type: "text", value: metricName, onChange: (e) => setMetricName(e.target.value), placeholder: "e.g., Number of Entities, API Calls, Storage", className: "matrix__modal-input", autoFocus: true })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Unit Name (Optional)" }), _jsx("input", { type: "text", value: metricUnitName, onChange: (e) => setMetricUnitName(e.target.value), placeholder: "e.g., entity, user, API call, GB", className: "matrix__modal-input" }), _jsx("p", { className: "matrix__modal-hint", style: { marginTop: "0.375rem" }, children: "Used for overage pricing display (e.g., \"$50 per entity per month\")" })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Pricing Tiers & Values" }), _jsx("p", { className: "matrix__modal-hint", style: { marginBottom: "0.75rem" }, children: "Enable the metric for each tier and set values." }), _jsx("div", { style: {
                                                 display: "flex",
                                                 flexDirection: "column",
                                                 gap: "0.5rem",
                                             }, children: tiers.map((tier) => {
                                                 const isEnabled = metricEnabledTiers.has(tier.id);
+                                                const tierOveragePrice = metricOveragePrices[tier.id] || "";
+                                                const tierOverageCycle = metricOverageCycles[tier.id] || "";
                                                 return (_jsxs("div", { style: {
                                                         display: "flex",
-                                                        alignItems: "center",
-                                                        gap: "0.75rem",
-                                                        padding: "0.5rem",
+                                                        flexDirection: "column",
+                                                        gap: "0.5rem",
+                                                        padding: "0.75rem",
                                                         borderRadius: "6px",
                                                         background: isEnabled
                                                             ? "rgba(124, 58, 237, 0.05)"
@@ -1675,48 +2483,101 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                             ? "1px solid rgba(124, 58, 237, 0.2)"
                                                             : "1px solid #e2e8f0",
                                                         transition: "all 0.15s ease",
-                                                    }, children: [_jsxs("label", { style: {
+                                                    }, children: [_jsxs("div", { style: {
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                gap: "0.75rem",
+                                                            }, children: [_jsxs("label", { style: {
+                                                                        display: "flex",
+                                                                        alignItems: "center",
+                                                                        gap: "0.5rem",
+                                                                        cursor: "pointer",
+                                                                        minWidth: "120px",
+                                                                    }, children: [_jsx("input", { type: "checkbox", checked: isEnabled, onChange: (e) => {
+                                                                                setMetricEnabledTiers((prev) => {
+                                                                                    const next = new Set(prev);
+                                                                                    if (e.target.checked) {
+                                                                                        next.add(tier.id);
+                                                                                    }
+                                                                                    else {
+                                                                                        next.delete(tier.id);
+                                                                                    }
+                                                                                    return next;
+                                                                                });
+                                                                            }, style: {
+                                                                                width: "16px",
+                                                                                height: "16px",
+                                                                                accentColor: "#7c3aed",
+                                                                                cursor: "pointer",
+                                                                            } }), _jsx("span", { style: {
+                                                                                fontWeight: 600,
+                                                                                color: isEnabled ? "#334155" : "#94a3b8",
+                                                                                fontSize: "0.875rem",
+                                                                            }, children: tier.name })] }), _jsx("input", { type: "text", value: metricLimits[tier.id] || "", onChange: (e) => setMetricLimits((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    })), placeholder: isEnabled ? "Limit value" : "—", className: "matrix__modal-input", disabled: !isEnabled, style: {
+                                                                        flex: 1,
+                                                                        opacity: isEnabled ? 1 : 0.5,
+                                                                        cursor: isEnabled ? "text" : "not-allowed",
+                                                                    } })] }), isEnabled && (_jsxs("div", { style: {
                                                                 display: "flex",
                                                                 alignItems: "center",
                                                                 gap: "0.5rem",
-                                                                cursor: "pointer",
-                                                                minWidth: "120px",
-                                                            }, children: [_jsx("input", { type: "checkbox", checked: isEnabled, onChange: (e) => {
-                                                                        setMetricEnabledTiers((prev) => {
-                                                                            const next = new Set(prev);
-                                                                            if (e.target.checked) {
-                                                                                next.add(tier.id);
-                                                                            }
-                                                                            else {
-                                                                                next.delete(tier.id);
-                                                                            }
-                                                                            return next;
-                                                                        });
-                                                                    }, style: {
-                                                                        width: "16px",
-                                                                        height: "16px",
-                                                                        accentColor: "#7c3aed",
+                                                                marginLeft: "1.75rem",
+                                                                padding: "0.5rem 0.75rem",
+                                                                background: "rgba(255,255,255,0.6)",
+                                                                borderRadius: "4px",
+                                                            }, children: [_jsx("span", { style: {
+                                                                        fontSize: "0.75rem",
+                                                                        color: "#64748b",
+                                                                        whiteSpace: "nowrap",
+                                                                    }, children: "Overage:" }), _jsx("span", { style: {
+                                                                        fontFamily: "var(--so-font-mono)",
+                                                                        fontSize: "0.8125rem",
+                                                                        color: "#64748b",
+                                                                    }, children: "$" }), _jsx("input", { type: "number", value: tierOveragePrice, onChange: (e) => setMetricOveragePrices((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    })), placeholder: "0.00", step: "0.01", style: {
+                                                                        width: "4rem",
+                                                                        fontFamily: "var(--so-font-mono)",
+                                                                        fontSize: "0.8125rem",
+                                                                        fontWeight: 500,
+                                                                        color: "#0f172a",
+                                                                        background: "#ffffff",
+                                                                        border: "1px solid #cbd5e1",
+                                                                        borderRadius: "4px",
+                                                                        padding: "0.25rem 0.375rem",
+                                                                        outline: "none",
+                                                                    } }), _jsx("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: "/" }), _jsxs("select", { value: tierOverageCycle, onChange: (e) => setMetricOverageCycles((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value || "",
+                                                                    })), style: {
+                                                                        fontFamily: "var(--so-font-sans)",
+                                                                        fontSize: "0.75rem",
+                                                                        color: "#334155",
+                                                                        background: "#ffffff",
+                                                                        border: "1px solid #cbd5e1",
+                                                                        borderRadius: "4px",
+                                                                        padding: "0.25rem 0.375rem",
                                                                         cursor: "pointer",
-                                                                    } }), _jsx("span", { style: {
-                                                                        fontWeight: 600,
-                                                                        color: isEnabled ? "#334155" : "#94a3b8",
-                                                                        fontSize: "0.875rem",
-                                                                    }, children: tier.name })] }), _jsx("input", { type: "text", value: metricLimits[tier.id] || "", onChange: (e) => setMetricLimits((prev) => ({
-                                                                ...prev,
-                                                                [tier.id]: e.target.value,
-                                                            })), placeholder: isEnabled ? "Enter value" : "—", className: "matrix__modal-input", disabled: !isEnabled, style: {
-                                                                flex: 1,
-                                                                opacity: isEnabled ? 1 : 0.5,
-                                                                cursor: isEnabled ? "text" : "not-allowed",
-                                                            } })] }, tier.id));
+                                                                        outline: "none",
+                                                                    }, children: [_jsx("option", { value: "", children: "None" }), RECURRING_BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle, children: BILLING_CYCLE_SHORT_LABELS[cycle] }, cycle)))] }), _jsxs("span", { style: {
+                                                                        fontSize: "0.6875rem",
+                                                                        color: "#64748b",
+                                                                    }, children: ["per extra ", metricUnitName || "unit"] })] }))] }, tier.id));
                                             }) })] }), _jsxs("div", { className: "matrix__modal-actions", children: [_jsx("button", { onClick: () => {
                                                 setMetricModal(null);
                                                 setMetricName("");
+                                                setMetricUnitName("");
                                                 setMetricLimits({});
                                                 setMetricEnabledTiers(new Set());
+                                                setMetricOveragePrices({});
+                                                setMetricOverageCycles({});
                                             }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleSaveMetric, disabled: !metricName.trim() || metricEnabledTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: metricModal.metric ? "Save Changes" : "Add Metric" })] })] }) }))] })] }));
 }
-function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, }) {
+function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, onReorderService, }) {
     const showGroup = services.length > 0 || onAddService;
     if (!showGroup)
         return null;
@@ -1736,9 +2597,9 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                                 ? "INCLUDED"
                                 : isOptional
                                     ? "OPTIONAL"
-                                    : "INCLUDED" }) })] }), services.map((service) => {
+                                    : "INCLUDED" }) })] }), services.map((service, serviceIndex) => {
                 const metrics = getUniqueMetricsForService(service.id);
-                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric }, service.id));
+                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric, onTogglePremiumExclusive: onTogglePremiumExclusive, onReorderService: onReorderService, groupServices: services, serviceIndex: serviceIndex }, service.id));
             }), onAddService && group.id !== "__ungrouped__" && (_jsxs("tr", { className: `matrix__add-service-row ${rowClass}`, children: [_jsx("td", { className: rowClass, children: _jsxs("button", { onClick: () => onAddService(group.id, isSetupFormation), className: "matrix__add-service-btn", children: [_jsx("svg", { className: "matrix__add-service-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), "+ Add a Service"] }) }), _jsx("td", { colSpan: tiers.length, className: rowClass })] })), isSetupFormation && (_jsxs("tr", { className: "matrix__setup-total-row", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: setupFee
                             ? `$${setupFee} flat fee (applied to all tiers)`
                             : "No setup fee configured" })] })), isOptional && (_jsxs("tr", { className: `matrix__total-row ${headerClass}`, children: [_jsx("td", { className: headerClass, children: "SUBTOTAL" }), tiers.map((tier, tierIdx) => {
@@ -1754,8 +2615,21 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                             }, children: isEnabled ? priceDisplay : "$0" }, tier.id));
                     })] }))] }));
 }
-function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsx("span", { className: "matrix__service-title", children: service.title }), _jsx("button", { onClick: (e) => {
+function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, onReorderService, groupServices, serviceIndex, }) {
+    // Use persisted isPremiumExclusive field from document state
+    const isPremiumExclusive = service.isPremiumExclusive;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsxs("div", { className: "matrix__reorder-btns", children: [_jsx("button", { className: "matrix__reorder-btn", onClick: (e) => {
+                                                e.stopPropagation();
+                                                onReorderService(service.id, "up", groupServices);
+                                            }, disabled: serviceIndex === 0, title: "Move up", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 15l-6-6-6 6" }) }) }), _jsx("button", { className: "matrix__reorder-btn", onClick: (e) => {
+                                                e.stopPropagation();
+                                                onReorderService(service.id, "down", groupServices);
+                                            }, disabled: serviceIndex === groupServices.length - 1, title: "Move down", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), _jsx("span", { className: "matrix__service-title", children: service.title }), _jsxs("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onTogglePremiumExclusive(service.id);
+                                    }, className: `matrix__premium-badge ${isPremiumExclusive ? "matrix__premium-badge--active" : "matrix__premium-badge--inactive"}`, title: isPremiumExclusive
+                                        ? "Click to remove premium exclusive status"
+                                        : "Click to mark as premium exclusive", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Premium"] }), _jsx("button", { onClick: (e) => {
                                         e.stopPropagation();
                                         onAddMetric(service.id);
                                     }, className: "matrix__add-metric-btn", title: "Add metric to this service", children: "+ Metric" })] }) }), tiers.map((tier, tierIdx) => {
@@ -1763,9 +2637,17 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                         const display = getLevelDisplay(serviceLevel);
                         const isSelected = selectedCell?.serviceId === service.id &&
                             selectedCell?.tierId === tier.id;
-                        return (_jsx("td", { className: `matrix__level-cell ${isSelected ? "matrix__level-cell--selected" : ""} ${tierIdx === selectedTierIdx ? "matrix__level-cell--highlight" : ""}`, onClick: () => setSelectedCell(isSelected
+                        const isNotIncluded = !serviceLevel || serviceLevel.level === "NOT_INCLUDED";
+                        // Find next tier that has this service included (for upgrade hint)
+                        const nextTierWithService = isNotIncluded
+                            ? tiers.slice(tierIdx + 1).find((t) => {
+                                const sl = getServiceLevelForTier(service.id, t);
+                                return sl && sl.level === "INCLUDED";
+                            })
+                            : null;
+                        return (_jsxs("td", { className: `matrix__level-cell ${isSelected ? "matrix__level-cell--selected" : ""} ${tierIdx === selectedTierIdx ? "matrix__level-cell--highlight" : ""} ${isNotIncluded ? "matrix__level-cell--not-included" : ""}`, onClick: () => setSelectedCell(isSelected
                                 ? null
-                                : { serviceId: service.id, tierId: tier.id }), children: _jsx("span", { className: "matrix__level-value", style: { color: display.color }, children: display.label }) }, tier.id));
+                                : { serviceId: service.id, tierId: tier.id }), children: [_jsx("span", { className: `matrix__level-value ${isNotIncluded ? "matrix__level-value--not-included" : ""}`, style: { color: display.color }, children: display.label }), isNotIncluded && nextTierWithService && (_jsxs("span", { className: "matrix__upgrade-hint", children: ["In ", nextTierWithService.name, " \u2192"] }))] }, tier.id));
                     })] }), metrics.map((metric) => (_jsxs("tr", { className: `matrix__metric-row ${rowClass}`, onClick: () => onEditMetric(service.id, metric), children: [_jsx("td", { className: `matrix__metric-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__metric-name-wrapper", children: [_jsx("span", { className: "matrix__metric-name", children: metric }), _jsxs("div", { className: "matrix__metric-actions", children: [_jsx("button", { onClick: (e) => {
                                                 e.stopPropagation();
                                                 onEditMetric(service.id, metric);
@@ -1776,11 +2658,12 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                         const usageLimit = getUsageLimitForMetric(service.id, metric, tier);
                         return (_jsx("td", { className: `matrix__metric-value-cell ${tierIdx === selectedTierIdx
                                 ? "matrix__level-cell--highlight"
-                                : ""}`, children: _jsx("span", { className: "matrix__metric-value", children: usageLimit
-                                    ? usageLimit.limit
-                                        ? `Up to ${usageLimit.limit}`
-                                        : usageLimit.notes || "Unlimited"
-                                    : "—" }) }, tier.id));
+                                : ""}`, children: _jsxs("div", { className: "matrix__metric-value-container", children: [_jsx("span", { className: "matrix__metric-value", children: usageLimit
+                                            ? usageLimit.limit
+                                                ? `Up to ${usageLimit.limit}`
+                                                : usageLimit.notes || "Unlimited"
+                                            : "—" }), usageLimit?.unitPrice &&
+                                        usageLimit?.unitPriceBillingCycle && (_jsxs("span", { className: "matrix__metric-overage", children: ["+", formatPrice(usageLimit.unitPrice, usageLimit.unitPriceCurrency || "USD"), "/", BILLING_CYCLE_SHORT_LABELS[usageLimit.unitPriceBillingCycle].toLowerCase()] }))] }) }, tier.id));
                     })] }, `${service.id}-${metric}`)))] }));
 }
 function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGroups: _optionGroups, dispatch, onClose, }) {
@@ -1879,37 +2762,6 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
             lastModified: new Date().toISOString(),
         }));
     };
-    const handleSetLevel = (level) => {
-        if (serviceLevel) {
-            dispatch(updateServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: serviceLevel.id,
-                level,
-                customValue: level === "CUSTOM" ? customValue : undefined,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-        else {
-            dispatch(addServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: generateId(),
-                serviceId: service.id,
-                level,
-                customValue: level === "CUSTOM" ? customValue : undefined,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-    };
-    const handleUpdateCustomValue = () => {
-        if (serviceLevel && serviceLevel.level === "CUSTOM") {
-            dispatch(updateServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: serviceLevel.id,
-                customValue,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-    };
     return (_jsx("div", { ref: overlayRef, className: "matrix__panel-overlay", onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "panel-title", children: _jsxs("div", { ref: panelRef, className: "matrix__panel", children: [_jsxs("div", { className: "matrix__panel-header", children: [_jsxs("div", { className: "matrix__panel-header-top", children: [_jsxs("span", { className: "matrix__panel-tier", children: [tier.name, " Tier"] }), _jsx("button", { onClick: onClose, className: "matrix__panel-close", children: _jsx("svg", { className: "matrix__panel-close-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("h3", { id: "panel-title", className: "matrix__panel-title", children: service.title })] }), _jsx("div", { className: "matrix__panel-body", children: _jsxs("div", { children: [_jsxs("div", { className: "matrix__panel-limits-header", children: [_jsx("label", { className: "matrix__panel-section-label", style: { marginBottom: 0 }, children: "Metrics" }), _jsx("button", { onClick: () => setIsAddingMetric(true), className: "matrix__panel-add-btn", children: "+ Add Metric" })] }), usageLimits.map((limit) => (_jsx(MetricLimitItem, { limit: limit, tierId: tier.id, dispatch: dispatch, onRemove: () => handleRemoveLimit(limit.id) }, limit.id))), usageLimits.length === 0 && !isAddingMetric && (_jsx("p", { className: "matrix__panel-empty-text", children: "No metrics added yet. Metrics will appear as nested rows under this service in the matrix." })), isAddingMetric && (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: newMetric, onChange: (e) => setNewMetric(e.target.value), placeholder: "e.g., API Calls, Storage, Users", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Value" }), _jsx("input", { type: "text", value: newLimit, onChange: (e) => setNewLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter a value or leave empty" })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleAddLimit, disabled: !newMetric.trim(), className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Add Metric" }), _jsx("button", { onClick: () => {
                                                     setNewMetric("");
                                                     setNewLimit("");
@@ -1919,27 +2771,53 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
 function MetricLimitItem({ limit, tierId, dispatch, onRemove, }) {
     const [isEditing, setIsEditing] = useState(false);
     const [editMetric, setEditMetric] = useState(limit.metric);
+    const [editUnitName, setEditUnitName] = useState(limit.unitName || "");
     const [editLimit, setEditLimit] = useState(limit.limit?.toString() || limit.notes || "");
+    // Overage pricing state
+    const [editUnitPrice, setEditUnitPrice] = useState(limit.unitPrice?.toString() || "");
+    const [editUnitPriceCurrency] = useState(limit.unitPriceCurrency || "USD");
+    const [editUnitPriceBillingCycle, setEditUnitPriceBillingCycle] = useState(limit.unitPriceBillingCycle || "");
     const handleSave = () => {
         const parsedLimit = editLimit ? parseInt(editLimit, 10) : null;
         const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+        const parsedUnitPrice = editUnitPrice ? parseFloat(editUnitPrice) : null;
         dispatch(updateUsageLimit({
             tierId,
             limitId: limit.id,
             metric: editMetric.trim() || limit.metric,
+            unitName: editUnitName.trim() || undefined,
             limit: isNumeric ? parsedLimit : undefined,
             notes: !isNumeric && editLimit ? editLimit.trim() : undefined,
+            unitPrice: parsedUnitPrice,
+            unitPriceCurrency: parsedUnitPrice && editUnitPriceBillingCycle
+                ? editUnitPriceCurrency
+                : undefined,
+            unitPriceBillingCycle: parsedUnitPrice && editUnitPriceBillingCycle
+                ? editUnitPriceBillingCycle
+                : undefined,
             lastModified: new Date().toISOString(),
         }));
         setIsEditing(false);
     };
     const handleCancel = () => {
         setEditMetric(limit.metric);
+        setEditUnitName(limit.unitName || "");
         setEditLimit(limit.limit?.toString() || limit.notes || "");
+        setEditUnitPrice(limit.unitPrice?.toString() || "");
+        setEditUnitPriceBillingCycle(limit.unitPriceBillingCycle || "");
         setIsEditing(false);
     };
+    // Format overage display string
+    const getOverageDisplay = () => {
+        if (!limit.unitPrice || !limit.unitPriceBillingCycle)
+            return null;
+        const cycleLabel = BILLING_CYCLE_SHORT_LABELS[limit.unitPriceBillingCycle].toLowerCase();
+        const unitLabel = limit.unitName || "unit";
+        return `+${formatPrice(limit.unitPrice, limit.unitPriceCurrency || "USD")} per ${unitLabel}/${cycleLabel}`;
+    };
+    const overageDisplay = getOverageDisplay();
     if (isEditing) {
-        return (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "Metric name", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Value" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter a value or leave empty" })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleSave, className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Save" }), _jsx("button", { onClick: handleCancel, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }));
+        return (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "e.g., Number of Entities", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Unit Name" }), _jsx("input", { type: "text", value: editUnitName, onChange: (e) => setEditUnitName(e.target.value), placeholder: "e.g., entity, credit card, contractor", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Used for overage pricing display (e.g., \"$50 per entity\")" })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Included Value" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter limit included in tier or leave empty" })] }), _jsxs("div", { className: "matrix__panel-overage-section", children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Overage Pricing (Optional)" }), _jsx("p", { className: "matrix__panel-edit-hint", style: { marginBottom: "0.5rem" }, children: "Set a price for usage beyond the included limit" }), _jsxs("div", { className: "matrix__panel-overage-row", children: [_jsxs("div", { className: "matrix__panel-overage-price", children: [_jsx("span", { className: "matrix__panel-overage-currency", children: "$" }), _jsx("input", { type: "number", value: editUnitPrice, onChange: (e) => setEditUnitPrice(e.target.value), placeholder: "0.00", step: "0.01", className: "matrix__panel-overage-input" })] }), _jsx("span", { className: "matrix__panel-overage-separator", children: "/" }), _jsxs("select", { value: editUnitPriceBillingCycle, onChange: (e) => setEditUnitPriceBillingCycle(e.target.value || ""), className: "matrix__panel-overage-select", children: [_jsx("option", { value: "", children: "No overage" }), RECURRING_BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle, children: BILLING_CYCLE_SHORT_LABELS[cycle] }, cycle)))] }), _jsxs("span", { className: "matrix__panel-overage-label", children: ["per ", editUnitName || "unit"] })] })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleSave, className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Save" }), _jsx("button", { onClick: handleCancel, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }));
     }
-    return (_jsxs("div", { className: "matrix__panel-limit-item", children: [_jsxs("div", { className: "matrix__panel-limit-content", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "matrix__panel-limit-metric", children: limit.metric }), _jsx("div", { className: "matrix__panel-limit-value", children: limit.limit ?? limit.notes ?? "—" })] }), _jsxs("div", { className: "matrix__panel-limit-actions", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "matrix__panel-limit-btn matrix__panel-limit-btn--edit", title: "Edit metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }), _jsx("button", { onClick: onRemove, className: "matrix__panel-limit-btn matrix__panel-limit-btn--remove", title: "Remove metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }));
+    return (_jsxs("div", { className: "matrix__panel-limit-item", children: [_jsxs("div", { className: "matrix__panel-limit-content", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "matrix__panel-limit-metric", children: limit.metric }), _jsxs("div", { className: "matrix__panel-limit-value-group", children: [_jsx("div", { className: "matrix__panel-limit-value", children: limit.limit ?? limit.notes ?? "—" }), overageDisplay && (_jsx("div", { className: "matrix__panel-limit-overage", children: overageDisplay }))] })] }), _jsxs("div", { className: "matrix__panel-limit-actions", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "matrix__panel-limit-btn matrix__panel-limit-btn--edit", title: "Edit metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }), _jsx("button", { onClick: onRemove, className: "matrix__panel-limit-btn matrix__panel-limit-btn--remove", title: "Remove metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }));
 }