@powerhousedao/contributor-billing 0.1.40 → 0.1.42

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

@@ -1,7 +1,7 @@
 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 { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, updateService, } from "../../../document-models/service-offering/gen/creators.js";
 const SERVICE_LEVELS = [
     {
         value: "INCLUDED",
@@ -437,6 +437,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,9 +775,50 @@ 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;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__metric-row:hover {
+    background: rgba(124, 58, 237, 0.08);
   }
 
   .matrix__metric-cell {
@@ -476,6 +830,12 @@ const matrixStyles = `
     z-index: 10;
   }
 
+  .matrix__metric-name-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .matrix__metric-name {
     font-family: var(--so-font-sans);
     font-size: 0.6875rem;
@@ -483,6 +843,47 @@ const matrixStyles = `
     color: var(--so-slate-500);
   }
 
+  .matrix__metric-actions {
+    display: flex;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__metric-row:hover .matrix__metric-actions {
+    opacity: 1;
+  }
+
+  .matrix__metric-btn {
+    padding: 0.125rem;
+    background: transparent;
+    border: none;
+    color: var(--so-slate-400);
+    cursor: pointer;
+    border-radius: var(--so-radius-sm);
+    transition: var(--so-transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .matrix__metric-btn:hover {
+    background: var(--so-slate-200);
+  }
+
+  .matrix__metric-btn--edit:hover {
+    color: var(--so-violet-600);
+  }
+
+  .matrix__metric-btn--remove:hover {
+    color: var(--so-rose-600);
+  }
+
+  .matrix__metric-btn-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
   .matrix__metric-value-cell {
     padding: 0.375rem 1rem;
     text-align: center;
@@ -494,6 +895,38 @@ const matrixStyles = `
     color: var(--so-slate-500);
   }
 
+  /* Add Metric Button on Service Row */
+  .matrix__service-cell-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .matrix__add-metric-btn {
+    opacity: 0.6;
+    font-family: var(--so-font-sans);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--so-radius-sm);
+    transition: var(--so-transition-fast);
+    white-space: nowrap;
+  }
+
+  .matrix__service-row:hover .matrix__add-metric-btn {
+    opacity: 1;
+  }
+
+  .matrix__add-metric-btn:hover {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
   /* Add Service Row */
   .matrix__add-service-row td {
     padding: 0.5rem 1rem;
@@ -1268,6 +1701,13 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         TEAM_STRUCTURE: "remote-team",
         ANONYMITY: "high-anonymity",
     });
+    // Metric editing modal state
+    const [metricModal, setMetricModal] = useState(null);
+    const [metricName, setMetricName] = useState("");
+    const [metricLimits, setMetricLimits] = useState({});
+    const [metricEnabledTiers, setMetricEnabledTiers] = useState(new Set());
+    // Bulk actions state
+    const [showBulkActions, setShowBulkActions] = useState(false);
     const getServiceGroup = (service) => {
         // Services now have optionGroupId directly on them
         return service.optionGroupId || null;
@@ -1314,6 +1754,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);
     };
@@ -1349,6 +1799,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;
@@ -1389,6 +1983,114 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         setNewServiceDescription("");
         setNewServiceSelectedTiers(new Set());
     };
+    // Metric modal handlers
+    const handleAddMetric = (serviceId) => {
+        setMetricModal({ serviceId, metric: null });
+        setMetricName("");
+        // Initialize limits for all tiers to empty string
+        const initialLimits = {};
+        // For new metrics, enable all tiers by default
+        const allTierIds = new Set();
+        tiers.forEach((tier) => {
+            initialLimits[tier.id] = "";
+            allTierIds.add(tier.id);
+        });
+        setMetricLimits(initialLimits);
+        setMetricEnabledTiers(allTierIds);
+    };
+    const handleEditMetric = (serviceId, metric) => {
+        setMetricModal({ serviceId, metric });
+        setMetricName(metric);
+        // Initialize limits with existing values and track which tiers have this metric
+        const existingLimits = {};
+        const enabledTiers = new Set();
+        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 || "";
+            if (usageLimit) {
+                enabledTiers.add(tier.id);
+            }
+        });
+        setMetricLimits(existingLimits);
+        setMetricEnabledTiers(enabledTiers);
+    };
+    const handleRemoveMetric = (serviceId, metric) => {
+        // Remove this metric from all tiers
+        tiers.forEach((tier) => {
+            const usageLimit = tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
+            if (usageLimit) {
+                dispatch(removeUsageLimit({
+                    tierId: tier.id,
+                    limitId: usageLimit.id,
+                    lastModified: new Date().toISOString(),
+                }));
+            }
+        });
+    };
+    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(),
+        }));
+    };
+    const handleSaveMetric = () => {
+        if (!metricModal || !metricName.trim())
+            return;
+        const { serviceId, metric: originalMetric } = metricModal;
+        const now = new Date().toISOString();
+        tiers.forEach((tier) => {
+            const isEnabled = metricEnabledTiers.has(tier.id);
+            const limitValue = metricLimits[tier.id];
+            const existingLimit = originalMetric
+                ? tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === originalMetric)
+                : null;
+            // Check if value is numeric or string
+            const parsedLimit = limitValue ? parseInt(limitValue, 10) : null;
+            const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+            if (existingLimit && !isEnabled) {
+                // Remove limit - tier was disabled
+                dispatch(removeUsageLimit({
+                    tierId: tier.id,
+                    limitId: existingLimit.id,
+                    lastModified: now,
+                }));
+            }
+            else if (existingLimit && isEnabled) {
+                // Update existing limit - use limit for numeric values, notes for strings
+                dispatch(updateUsageLimit({
+                    tierId: tier.id,
+                    limitId: existingLimit.id,
+                    metric: metricName.trim(),
+                    limit: isNumeric ? parsedLimit : null,
+                    notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    lastModified: now,
+                }));
+            }
+            else if (!existingLimit && isEnabled) {
+                // Add new limit - use limit for numeric values, notes for strings
+                dispatch(addUsageLimit({
+                    tierId: tier.id,
+                    limitId: generateId(),
+                    serviceId,
+                    metric: metricName.trim(),
+                    limit: isNumeric ? parsedLimit : null,
+                    notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    resetPeriod: "MONTHLY",
+                    lastModified: now,
+                }));
+            }
+        });
+        setMetricModal(null);
+        setMetricName("");
+        setMetricLimits({});
+        setMetricEnabledTiers(new Set());
+    };
     const getLevelDisplay = (serviceLevel) => {
         if (!serviceLevel)
             return { label: "—", color: "var(--so-slate-300)" };
@@ -1420,27 +2122,33 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                     : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || "", 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))) }), 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
+                                            })), 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."] }) }))] }), 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) => (_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 }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                            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 }, 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 }, "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 }, 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 }, "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 }, 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 }, "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 }, "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 }, 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 }, 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
@@ -1468,9 +2176,67 @@ 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" })] })] }) }))] })] }));
+                                            }, 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: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "0.5rem",
+                                            }, children: tiers.map((tier) => {
+                                                const isEnabled = metricEnabledTiers.has(tier.id);
+                                                return (_jsxs("div", { style: {
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "0.75rem",
+                                                        padding: "0.5rem",
+                                                        borderRadius: "6px",
+                                                        background: isEnabled
+                                                            ? "rgba(124, 58, 237, 0.05)"
+                                                            : "#f8fafc",
+                                                        border: isEnabled
+                                                            ? "1px solid rgba(124, 58, 237, 0.2)"
+                                                            : "1px solid #e2e8f0",
+                                                        transition: "all 0.15s ease",
+                                                    }, 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 ? "Enter value" : "—", className: "matrix__modal-input", disabled: !isEnabled, style: {
+                                                                flex: 1,
+                                                                opacity: isEnabled ? 1 : 0.5,
+                                                                cursor: isEnabled ? "text" : "not-allowed",
+                                                            } })] }, tier.id));
+                                            }) })] }), _jsxs("div", { className: "matrix__modal-actions", children: [_jsx("button", { onClick: () => {
+                                                setMetricModal(null);
+                                                setMetricName("");
+                                                setMetricLimits({});
+                                                setMetricEnabledTiers(new Set());
+                                            }, 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, }) {
+function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
     const showGroup = services.length > 0 || onAddService;
     if (!showGroup)
         return null;
@@ -1492,7 +2258,7 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                                     ? "OPTIONAL"
                                     : "INCLUDED" }) })] }), services.map((service) => {
                 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 }, 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 }, 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) => {
@@ -1508,23 +2274,47 @@ 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, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsx("span", { className: "matrix__service-title", children: service.title }) }), tiers.map((tier, tierIdx) => {
+function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
+    // 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: [_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) => {
                         const serviceLevel = getServiceLevelForTier(service.id, tier);
                         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));
-                    })] }), metrics.map((metric) => (_jsxs("tr", { className: `matrix__metric-row ${rowClass}`, children: [_jsx("td", { className: `matrix__metric-cell ${rowClass}`, children: _jsx("span", { className: "matrix__metric-name", children: metric }) }), tiers.map((tier, tierIdx) => {
+                                : { 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);
+                                            }, className: "matrix__metric-btn matrix__metric-btn--edit", title: "Edit metric", children: _jsx("svg", { className: "matrix__metric-btn-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: (e) => {
+                                                e.stopPropagation();
+                                                onRemoveMetric(service.id, metric);
+                                            }, className: "matrix__metric-btn matrix__metric-btn--remove", title: "Remove metric", children: _jsx("svg", { className: "matrix__metric-btn-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] })] }) }), tiers.map((tier, tierIdx) => {
                         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}`
-                                        : "Unlimited"
+                                        : usageLimit.notes || "Unlimited"
                                     : "—" }) }, tier.id));
                     })] }, `${service.id}-${metric}`)))] }));
 }
@@ -1601,12 +2391,15 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
     const handleAddLimit = () => {
         if (!newMetric.trim())
             return;
+        const parsedLimit = newLimit ? parseInt(newLimit, 10) : null;
+        const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
         dispatch(addUsageLimit({
             tierId: tier.id,
             limitId: generateId(),
             serviceId: service.id,
             metric: newMetric.trim(),
-            limit: newLimit ? parseInt(newLimit) : undefined,
+            limit: isNumeric ? parsedLimit : undefined,
+            notes: !isNumeric && newLimit ? newLimit.trim() : undefined,
             resetPeriod: "MONTHLY",
             lastModified: new Date().toISOString(),
         }));
@@ -1652,35 +2445,36 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
             }));
         }
     };
-    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 })] }), _jsxs("div", { className: "matrix__panel-body", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-section-label", children: "Service Level" }), _jsx("div", { className: "matrix__panel-level-grid", children: SERVICE_LEVELS.map((option) => (_jsx("button", { onClick: () => handleSetLevel(option.value), className: `matrix__panel-level-btn ${serviceLevel?.level === option.value
-                                            ? "matrix__panel-level-btn--active"
-                                            : ""}`, children: option.label }, option.value))) })] }), serviceLevel?.level === "CUSTOM" && (_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-section-label", children: "Custom Value" }), _jsx("input", { type: "text", value: customValue, onChange: (e) => setCustomValue(e.target.value), onBlur: handleUpdateCustomValue, placeholder: "e.g., Expedited, Basic, Pro", className: "matrix__panel-input" })] })), _jsxs("div", { children: [_jsxs("div", { className: "matrix__panel-limits-header", children: [_jsx("label", { className: "matrix__panel-section-label", style: { marginBottom: 0 }, children: "Usage Limits / 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: "Limit Value" }), _jsx("input", { type: "text", value: newLimit, onChange: (e) => setNewLimit(e.target.value), placeholder: "e.g., 100, 5, leave empty for Unlimited", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter a number or leave empty for \"Unlimited\"" })] }), _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("");
-                                                        setIsAddingMetric(false);
-                                                    }, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }))] })] }), _jsx("div", { className: "matrix__panel-footer", children: _jsx("button", { onClick: onClose, className: "matrix__panel-done-btn", children: "Done" }) })] }) }));
+    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("");
+                                                    setIsAddingMetric(false);
+                                                }, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }))] }) }), _jsx("div", { className: "matrix__panel-footer", children: _jsx("button", { onClick: onClose, className: "matrix__panel-done-btn", children: "Done" }) })] }) }));
 }
 function MetricLimitItem({ limit, tierId, dispatch, onRemove, }) {
     const [isEditing, setIsEditing] = useState(false);
     const [editMetric, setEditMetric] = useState(limit.metric);
-    const [editLimit, setEditLimit] = useState(limit.limit?.toString() || "");
+    const [editLimit, setEditLimit] = useState(limit.limit?.toString() || limit.notes || "");
     const handleSave = () => {
+        const parsedLimit = editLimit ? parseInt(editLimit, 10) : null;
+        const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
         dispatch(updateUsageLimit({
             tierId,
             limitId: limit.id,
             metric: editMetric.trim() || limit.metric,
-            limit: editLimit ? parseInt(editLimit) : undefined,
+            limit: isNumeric ? parsedLimit : undefined,
+            notes: !isNumeric && editLimit ? editLimit.trim() : undefined,
             lastModified: new Date().toISOString(),
         }));
         setIsEditing(false);
     };
     const handleCancel = () => {
         setEditMetric(limit.metric);
-        setEditLimit(limit.limit?.toString() || "");
+        setEditLimit(limit.limit?.toString() || limit.notes || "");
         setIsEditing(false);
     };
     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: "Limit Value" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 3, Unlimited, As needed", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Can be numeric (3) or descriptive (Unlimited, Custom)" })] }), _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: "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-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 ? `Up to ${limit.limit}` : "Unlimited" })] }), _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 }), _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" }) }) })] })] }));
 }