@powerhousedao/contributor-billing 0.1.39 → 0.1.41

package/dist/editors/service-offering-editor/components/ServicesList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServicesList.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServicesList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,wDAAwD,CAAC;AAShE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA8QrE"}
+{"version":3,"file":"ServicesList.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServicesList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAEtB,MAAM,wDAAwD,CAAC;AAOhE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA8QrE"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { generateId } from "document-model/core";
-import { addService, updateService, deleteService, addFacetBinding, removeFacetBinding, } from "../../../document-models/service-offering/gen/creators.js";
+import { addService, updateService, deleteService, } from "../../../document-models/service-offering/gen/creators.js";
 export function ServicesList({ document, dispatch }) {
     const { state } = document;
     const globalState = state.global;

package/dist/editors/service-offering-editor/components/TabNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TabNavigation.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,KAAK,GACb,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,YAAY,CAAC;AAgFjB,UAAU,kBAAkB;IAC1B,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,aAAkB,GACnB,EAAE,kBAAkB,2CAsDpB"}
+{"version":3,"file":"TabNavigation.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TabNavigation.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,KAAK,GACb,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,YAAY,CAAC;AA6EjB,UAAU,kBAAkB;IAC1B,SAAS,EAAE,KAAK,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,aAAkB,GACnB,EAAE,kBAAkB,2CAsDpB"}

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const tabs = [
     {
         id: "scope-facets",
-        label: "Scope & Facets",
-        accentColor: "violet",
-        icon: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("circle", { cx: "12", cy: "8", r: "3" }), _jsx("circle", { cx: "6", cy: "16", r: "3" }), _jsx("circle", { cx: "18", cy: "16", r: "3" }), _jsx("path", { d: "M12 11v2M9 14l-1.5 1M15 14l1.5 1" })] })),
+        label: "Resource Template",
+        accentColor: "teal",
+        icon: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) })),
     },
     {
         id: "tier-definition",
@@ -199,6 +199,20 @@ const styles = `
     font-weight: 600;
   }
 
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__icon-ring {
+    background: #ccfbf1;
+    box-shadow: 0 0 0 4px #f0fdfa, 0 4px 12px rgba(20, 184, 166, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__icon {
+    color: #0d9488;
+  }
+
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__label {
+    color: #0f766e;
+    font-weight: 600;
+  }
+
   .so-tabs__item--active[data-accent="emerald"] .so-tabs__icon-ring {
     background: var(--so-emerald-100);
     box-shadow: 0 0 0 4px var(--so-emerald-50), 0 4px 12px rgba(16, 185, 129, 0.25);

package/dist/editors/service-offering-editor/components/TheMatrix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAOtB,MAAM,wDAAwD,CAAC;AAUhE,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;CAChD;AA2uCD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,cAAmB,GACpB,EAAE,cAAc,2CAgsBhB"}
+{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAOtB,MAAM,wDAAwD,CAAC;AAUhE,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;CAChD;AAg0CD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,cAAmB,GACpB,EAAE,cAAc,2CAi+BhB"}

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

@@ -465,6 +465,12 @@ const matrixStyles = `
   /* 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 +482,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 +495,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 +547,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 +1353,11 @@ 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());
     const getServiceGroup = (service) => {
         // Services now have optionGroupId directly on them
         return service.optionGroupId || null;
@@ -1389,6 +1479,104 @@ 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 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)" };
@@ -1425,22 +1613,22 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                     : ""}`, 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 }, 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 }, "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: {
                                                 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 }, "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 }, 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 +1656,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, }) {
     const showGroup = services.length > 0 || onAddService;
     if (!showGroup)
         return null;
@@ -1492,7 +1738,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 }, 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,8 +1754,11 @@ 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, }) {
+    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) => {
+                                        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 &&
@@ -1517,14 +1766,20 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                         return (_jsx("td", { className: `matrix__level-cell ${isSelected ? "matrix__level-cell--selected" : ""} ${tierIdx === selectedTierIdx ? "matrix__level-cell--highlight" : ""}`, 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) => {
+                    })] }), 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 +1856,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 +1910,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" }) }) })] })] }));
 }

package/dist/editors/service-offering-editor/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/editor.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CAqF5C"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/editor.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,qBAAqB,4CAuF5C"}

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { DocumentToolbar } from "@powerhousedao/design-system/connect";
 import { useSelectedServiceOfferingDocument } from "../../document-models/service-offering/hooks.js";
 import { TabNavigation } from "./components/TabNavigation.js";
-import { ScopeAndFacets } from "./components/ScopeAndFacets.js";
+import { ResourceTemplateSelector } from "./components/ResourceTemplateSelector.js";
 import { ServiceCatalog, } from "./components/ServiceCatalog.js";
 import { TierDefinition } from "./components/TierDefinition.js";
 import { TheMatrix } from "./components/TheMatrix.js";
@@ -25,7 +25,7 @@ export default function ServiceOfferingEditor() {
     const renderTabContent = () => {
         switch (activeTab) {
             case "scope-facets":
-                return _jsx(ScopeAndFacets, { document: document, dispatch: dispatch });
+                return (_jsx(ResourceTemplateSelector, { document: document, dispatch: dispatch }));
             case "service-catalog":
                 return (_jsx(ServiceCatalog, { document: document, dispatch: dispatch, groupMetadata: groupMetadata, setGroupMetadata: setGroupMetadata }));
             case "tier-definition":

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { Manifest } from "document-model";
 export declare const manifest: Manifest;
-export declare const documentModels: (import("document-model").DocumentModelModule<import("./document-models/account-transactions/index.js").AccountTransactionsPHState> | import("document-model").DocumentModelModule<import("./document-models/accounts/index.js").AccountsPHState> | import("document-model").DocumentModelModule<import("./document-models/billing-statement/index.js").BillingStatementPHState> | import("document-model").DocumentModelModule<import("./document-models/expense-report/index.js").ExpenseReportPHState> | import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoicePHState> | import("document-model").DocumentModelModule<import("./document-models/snapshot-report/index.js").SnapshotReportPHState> | import("document-model").DocumentModelModule<import("./document-models/service-subscriptions/index.js").ServiceSubscriptionsPHState> | import("document-model").DocumentModelModule<import("./document-models/service-offering/index.js").ServiceOfferingPHState>)[];
+export declare const documentModels: (import("document-model").DocumentModelModule<import("./document-models/account-transactions/index.js").AccountTransactionsPHState> | import("document-model").DocumentModelModule<import("./document-models/accounts/index.js").AccountsPHState> | import("document-model").DocumentModelModule<import("./document-models/billing-statement/index.js").BillingStatementPHState> | import("document-model").DocumentModelModule<import("./document-models/expense-report/index.js").ExpenseReportPHState> | import("document-model").DocumentModelModule<import("./document-models/invoice/index.js").InvoicePHState> | import("document-model").DocumentModelModule<import("./document-models/snapshot-report/index.js").SnapshotReportPHState> | import("document-model").DocumentModelModule<import("./document-models/service-subscriptions/index.js").ServiceSubscriptionsPHState> | import("document-model").DocumentModelModule<import("./document-models/service-offering/index.js").ServiceOfferingPHState> | import("document-model").DocumentModelModule<import("./document-models/resource-template/index.js").ResourceTemplatePHState>)[];
 export declare const editors: import("document-model").EditorModule[];
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,y9BAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,yCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,wlCAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,yCAAgC,CAAC"}