@powerhousedao/contributor-billing 0.1.31 → 0.1.32

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

@@ -0,0 +1,1686 @@
+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";
+const SERVICE_LEVELS = [
+    {
+        value: "INCLUDED",
+        label: "Included",
+        shortLabel: "✓",
+        color: "var(--so-emerald-600)",
+    },
+    {
+        value: "OPTIONAL",
+        label: "Optional",
+        shortLabel: "Optional",
+        color: "var(--so-sky-600)",
+    },
+    {
+        value: "NOT_INCLUDED",
+        label: "Not Included",
+        shortLabel: "—",
+        color: "var(--so-slate-400)",
+    },
+    {
+        value: "NOT_APPLICABLE",
+        label: "Not Applicable",
+        shortLabel: "/",
+        color: "var(--so-slate-300)",
+    },
+    {
+        value: "CUSTOM",
+        label: "Custom",
+        shortLabel: "Custom",
+        color: "var(--so-amber-600)",
+    },
+    {
+        value: "VARIABLE",
+        label: "Variable",
+        shortLabel: "#",
+        color: "var(--so-violet-600)",
+    },
+];
+const UNGROUPED_ID = "__ungrouped__";
+const FACET_CATEGORIES = {
+    FUNCTION: {
+        label: "SNO Function",
+        options: [
+            { id: "operational-hub", label: "Operational Hub" },
+            { id: "embryonic-hub", label: "Embryonic Hub" },
+        ],
+    },
+    LEGAL_ENTITY: {
+        label: "Legal Entity",
+        options: [
+            { id: "swiss-association", label: "Swiss Association" },
+            { id: "bvi-ltd", label: "BVI Ltd" },
+            { id: "unaffiliated", label: "Unaffiliated" },
+        ],
+    },
+    TEAM_STRUCTURE: {
+        label: "Team",
+        options: [
+            { id: "remote-team", label: "Remote" },
+            { id: "on-premise", label: "On-Premise" },
+            { id: "hybrid", label: "Hybrid" },
+        ],
+    },
+    ANONYMITY: {
+        label: "Anonymity",
+        options: [
+            { id: "high-anonymity", label: "High" },
+            { id: "highest-anonymity", label: "Highest" },
+        ],
+    },
+};
+const matrixStyles = `
+  .matrix {
+    background: var(--so-white);
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-md);
+    overflow: hidden;
+  }
+
+  /* Facet Selector */
+  .matrix__facets {
+    padding: 1.25rem 1.5rem;
+    background: linear-gradient(to bottom, var(--so-slate-50), var(--so-white));
+    border-bottom: 1px solid var(--so-slate-200);
+  }
+
+  .matrix__facets-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 1.5rem;
+  }
+
+  .matrix__facet-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .matrix__facet-label {
+    font-family: var(--so-font-mono);
+    font-size: 0.625rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__facet-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: var(--so-slate-700);
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    cursor: pointer;
+    outline: none;
+    transition: var(--so-transition-fast);
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1rem;
+  }
+
+  .matrix__facet-select:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .matrix__facet-select:focus {
+    border-color: var(--so-violet-400);
+    box-shadow: 0 0 0 3px var(--so-violet-100);
+  }
+
+  /* Toggle Button Group */
+  .matrix__toggle-group {
+    display: flex;
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    overflow: hidden;
+  }
+
+  .matrix__toggle-btn {
+    padding: 0.5rem 0.875rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-slate-600);
+    background: var(--so-white);
+    border: none;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__toggle-btn:not(:first-child) {
+    border-left: 1px solid var(--so-slate-200);
+  }
+
+  .matrix__toggle-btn:hover:not(.matrix__toggle-btn--active) {
+    background: var(--so-slate-50);
+  }
+
+  .matrix__toggle-btn--active {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
+  /* Facet Notice */
+  .matrix__facet-notice {
+    margin-top: 0.875rem;
+    padding: 0.625rem 0.875rem;
+    background: var(--so-amber-50);
+    border: 1px solid var(--so-amber-200);
+    border-radius: var(--so-radius-md);
+  }
+
+  .matrix__facet-notice-text {
+    font-size: 0.75rem;
+    color: var(--so-amber-700);
+  }
+
+  .matrix__facet-notice-text strong {
+    color: var(--so-amber-800);
+  }
+
+  /* Table */
+  .matrix__table-wrap {
+    overflow-x: auto;
+  }
+
+  .matrix__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+  }
+
+  /* Header */
+  .matrix__corner-cell {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: var(--so-white);
+    padding: 1rem;
+    text-align: left;
+    font-weight: 400;
+    color: var(--so-slate-500);
+    border-bottom: 1px solid var(--so-slate-200);
+    min-width: 260px;
+  }
+
+  .matrix__tier-header {
+    padding: 1rem;
+    text-align: center;
+    border-bottom: 1px solid var(--so-slate-200);
+    min-width: 140px;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+    background: var(--so-white);
+  }
+
+  .matrix__tier-header:hover:not(.matrix__tier-header--selected) {
+    background: var(--so-violet-50);
+  }
+
+  .matrix__tier-header--selected {
+    background: var(--so-violet-600);
+    color: var(--so-white);
+  }
+
+  .matrix__tier-header-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .matrix__tier-radio {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    border: 2px solid var(--so-slate-300);
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__tier-header--selected .matrix__tier-radio {
+    border-color: var(--so-white);
+    background: var(--so-violet-600);
+    box-shadow: inset 0 0 0 3px var(--so-white);
+  }
+
+  .matrix__tier-name {
+    font-family: var(--so-font-sans);
+    font-weight: 600;
+  }
+
+  .matrix__tier-price {
+    font-size: 0.6875rem;
+    opacity: 0.7;
+  }
+
+  .matrix__tier-header--selected .matrix__tier-price {
+    color: var(--so-violet-200);
+  }
+
+  /* Section Header */
+  .matrix__section-header {
+    background: var(--so-slate-100);
+    padding: 0.625rem 1rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--so-slate-600);
+    border-bottom: 1px solid var(--so-slate-200);
+  }
+
+  /* Category Header */
+  .matrix__category-header {
+    background: var(--so-slate-50);
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    border-bottom: 1px solid var(--so-slate-200);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .matrix__category-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__category-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Group Header */
+  .matrix__group-header {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--so-slate-200);
+  }
+
+  .matrix__group-header--setup {
+    background: var(--so-amber-100);
+  }
+
+  .matrix__group-header--optional {
+    background: var(--so-sky-100);
+  }
+
+  .matrix__group-header--regular {
+    background: var(--so-slate-100);
+  }
+
+  .matrix__group-header-sticky {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+  }
+
+  .matrix__group-header-inner {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .matrix__group-toggle {
+    position: relative;
+    width: 2.5rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    border: none;
+    cursor: pointer;
+    transition: var(--so-transition-base);
+  }
+
+  .matrix__group-toggle--on {
+    background: var(--so-violet-600);
+  }
+
+  .matrix__group-toggle--off {
+    background: var(--so-slate-300);
+  }
+
+  .matrix__group-toggle-knob {
+    position: absolute;
+    top: 0.125rem;
+    width: 1rem;
+    height: 1rem;
+    background: var(--so-white);
+    border-radius: 50%;
+    box-shadow: var(--so-shadow-sm);
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__group-toggle--on .matrix__group-toggle-knob {
+    left: calc(100% - 1.125rem);
+  }
+
+  .matrix__group-toggle--off .matrix__group-toggle-knob {
+    left: 0.125rem;
+  }
+
+  .matrix__group-name {
+    font-family: var(--so-font-sans);
+    font-weight: 600;
+    color: var(--so-slate-800);
+  }
+
+  .matrix__group-badge {
+    display: inline-block;
+    padding: 0.25rem 0.625rem;
+    border-radius: var(--so-radius-sm);
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .matrix__group-badge--included {
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+  }
+
+  .matrix__group-badge--optional {
+    background: var(--so-sky-200);
+    color: var(--so-sky-700);
+  }
+
+  /* Service Row */
+  .matrix__service-row {
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__service-row--setup {
+    background: var(--so-amber-50);
+  }
+
+  .matrix__service-row--optional {
+    background: var(--so-sky-50);
+  }
+
+  .matrix__service-row--regular {
+    background: var(--so-slate-50);
+  }
+
+  .matrix__service-row:hover {
+    filter: brightness(0.98);
+  }
+
+  .matrix__service-cell {
+    padding: 0.625rem 1rem;
+    padding-left: 2rem;
+    border-bottom: 1px solid var(--so-slate-100);
+    position: sticky;
+    left: 0;
+    z-index: 10;
+  }
+
+  .matrix__service-title {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: var(--so-slate-700);
+  }
+
+  .matrix__level-cell {
+    padding: 0.625rem 1rem;
+    text-align: center;
+    border-bottom: 1px solid var(--so-slate-100);
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__level-cell:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .matrix__level-cell--selected {
+    box-shadow: inset 0 0 0 2px var(--so-violet-500);
+  }
+
+  .matrix__level-cell--highlight {
+    background: var(--so-violet-50);
+  }
+
+  .matrix__level-value {
+    font-family: var(--so-font-sans);
+    font-weight: 500;
+  }
+
+  /* Metric Row */
+  .matrix__metric-row {
+    background: inherit;
+  }
+
+  .matrix__metric-cell {
+    padding: 0.375rem 1rem;
+    padding-left: 3rem;
+    border-bottom: 1px solid var(--so-slate-100);
+    position: sticky;
+    left: 0;
+    z-index: 10;
+  }
+
+  .matrix__metric-name {
+    font-family: var(--so-font-sans);
+    font-size: 0.6875rem;
+    font-style: italic;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__metric-value-cell {
+    padding: 0.375rem 1rem;
+    text-align: center;
+    border-bottom: 1px solid var(--so-slate-100);
+  }
+
+  .matrix__metric-value {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+  }
+
+  /* Add Service Row */
+  .matrix__add-service-row td {
+    padding: 0.5rem 1rem;
+    padding-left: 2rem;
+    border-bottom: 1px solid var(--so-slate-100);
+  }
+
+  .matrix__add-service-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__add-service-btn:hover {
+    color: var(--so-violet-700);
+  }
+
+  .matrix__add-service-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* Total Rows */
+  .matrix__total-row {
+    background: var(--so-slate-100);
+  }
+
+  .matrix__total-row td {
+    padding: 0.625rem 1rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    border-bottom: 1px solid var(--so-slate-300);
+  }
+
+  .matrix__total-row td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: var(--so-slate-100);
+  }
+
+  .matrix__setup-total-row {
+    background: var(--so-slate-50);
+  }
+
+  .matrix__setup-total-row td {
+    padding: 0.625rem 1rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    border-bottom: 1px solid var(--so-slate-200);
+  }
+
+  .matrix__setup-total-row td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: var(--so-slate-50);
+  }
+
+  /* Grand Total */
+  .matrix__grand-total-row {
+    background: var(--so-violet-100);
+  }
+
+  .matrix__grand-total-row td {
+    padding: 0.875rem 1rem;
+    font-weight: 700;
+    color: var(--so-violet-900);
+    border-top: 2px solid var(--so-violet-300);
+  }
+
+  .matrix__grand-total-row td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: var(--so-violet-100);
+  }
+
+  .matrix__grand-total-cell--selected {
+    background: var(--so-violet-600);
+    color: var(--so-white);
+  }
+
+  /* Empty State */
+  .matrix__empty {
+    padding: 4rem 2rem;
+    text-align: center;
+  }
+
+  .matrix__empty-icon {
+    width: 4rem;
+    height: 4rem;
+    margin: 0 auto 1rem;
+    color: var(--so-slate-300);
+  }
+
+  .matrix__empty-title {
+    font-family: var(--so-font-sans);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--so-slate-900);
+    margin-bottom: 0.5rem;
+  }
+
+  .matrix__empty-text {
+    font-size: 0.875rem;
+    color: var(--so-slate-500);
+    max-width: 28rem;
+    margin: 0 auto;
+  }
+
+  /* Detail Panel */
+  .matrix__panel-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    z-index: 50;
+    animation: panel-overlay-fade 0.2s ease-out;
+  }
+
+  @keyframes panel-overlay-fade {
+    from {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
+    to {
+      opacity: 1;
+      backdrop-filter: blur(4px);
+    }
+  }
+
+  .matrix__panel {
+    width: 24rem;
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    overflow-y: auto;
+    animation: panel-slide-in 0.2s ease-out;
+  }
+
+  @keyframes panel-slide-in {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  .matrix__panel-header {
+    background: #7c3aed;
+    color: #ffffff;
+    padding: 1rem;
+  }
+
+  .matrix__panel-header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+  }
+
+  .matrix__panel-tier {
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.8;
+  }
+
+  .matrix__panel-close {
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    cursor: pointer;
+    border-radius: var(--so-radius-sm);
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .matrix__panel-close-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .matrix__panel-title {
+    font-family: var(--so-font-sans);
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .matrix__panel-body {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .matrix__panel-section-label {
+    display: block;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #334155;
+    margin-bottom: 0.75rem;
+  }
+
+  .matrix__panel-level-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+
+  .matrix__panel-level-btn {
+    padding: 0.625rem 0.875rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: #1e293b;
+    border-radius: var(--so-radius-md);
+    border: 2px solid #cbd5e1;
+    background: #ffffff;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-level-btn:hover:not(.matrix__panel-level-btn--active) {
+    border-color: #94a3b8;
+    background: #f8fafc;
+  }
+
+  .matrix__panel-level-btn--active {
+    border-color: #8b5cf6;
+    background: #f5f3ff;
+    color: #6d28d9;
+    font-weight: 600;
+  }
+
+  .matrix__panel-input {
+    width: 100%;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: #0f172a;
+    background: #ffffff;
+    border: 1.5px solid #cbd5e1;
+    border-radius: var(--so-radius-md);
+    padding: 0.625rem 0.875rem;
+    outline: none;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-input:focus {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  }
+
+  .matrix__panel-limits-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .matrix__panel-add-btn {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #7c3aed;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-add-btn:hover {
+    color: #6d28d9;
+  }
+
+  .matrix__panel-empty-text {
+    font-size: 0.8125rem;
+    font-style: italic;
+    color: #64748b;
+  }
+
+  .matrix__panel-limit-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: var(--so-radius-md);
+    margin-bottom: 0.75rem;
+  }
+
+  .matrix__panel-limit-item:hover .matrix__panel-limit-actions {
+    opacity: 1;
+  }
+
+  .matrix__panel-limit-content {
+    flex: 1;
+    cursor: pointer;
+    padding: 0.25rem;
+    margin: -0.25rem;
+    border-radius: var(--so-radius-sm);
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-limit-content:hover {
+    background: #e2e8f0;
+  }
+
+  .matrix__panel-limit-metric {
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #0f172a;
+  }
+
+  .matrix__panel-limit-value {
+    font-size: 0.8125rem;
+    color: #64748b;
+  }
+
+  .matrix__panel-limit-actions {
+    display: flex;
+    gap: 0.25rem;
+    opacity: 0;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-limit-btn {
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    cursor: pointer;
+    border-radius: var(--so-radius-sm);
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-limit-btn:hover {
+    background: #e2e8f0;
+  }
+
+  .matrix__panel-limit-btn--edit:hover {
+    color: #7c3aed;
+  }
+
+  .matrix__panel-limit-btn--remove:hover {
+    color: #e11d48;
+  }
+
+  .matrix__panel-limit-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* Edit Form */
+  .matrix__panel-edit-form {
+    padding: 0.75rem;
+    background: #f5f3ff;
+    border-radius: var(--so-radius-md);
+    margin-bottom: 0.75rem;
+  }
+
+  .matrix__panel-edit-form > div {
+    margin-bottom: 0.625rem;
+  }
+
+  .matrix__panel-edit-form > div:last-child {
+    margin-bottom: 0;
+  }
+
+  .matrix__panel-edit-label {
+    display: block;
+    font-family: var(--so-font-mono);
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #64748b;
+    margin-bottom: 0.25rem;
+  }
+
+  .matrix__panel-edit-hint {
+    font-size: 0.6875rem;
+    color: #94a3b8;
+    margin-top: 0.25rem;
+  }
+
+  .matrix__panel-edit-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .matrix__panel-edit-btn {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-edit-btn--primary {
+    background: #7c3aed;
+    color: #ffffff;
+    border: none;
+  }
+
+  .matrix__panel-edit-btn--primary:hover:not(:disabled) {
+    background: #6d28d9;
+  }
+
+  .matrix__panel-edit-btn--primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .matrix__panel-edit-btn--secondary {
+    background: #e2e8f0;
+    color: #334155;
+    border: none;
+  }
+
+  .matrix__panel-edit-btn--secondary:hover {
+    background: #cbd5e1;
+  }
+
+  .matrix__panel-footer {
+    padding: 1rem;
+    border-top: 1px solid #e2e8f0;
+    background: #ffffff;
+  }
+
+  .matrix__panel-done-btn {
+    width: 100%;
+    padding: 0.625rem 1rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    font-weight: 600;
+    background: #7c3aed;
+    color: #ffffff;
+    border: none;
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__panel-done-btn:hover {
+    background: var(--so-violet-700);
+  }
+
+  /* Modal */
+  .matrix__modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    animation: modal-backdrop 0.2s ease-out;
+  }
+
+  @keyframes modal-backdrop {
+    from {
+      opacity: 0;
+      backdrop-filter: blur(0px);
+    }
+    to {
+      opacity: 1;
+      backdrop-filter: blur(4px);
+    }
+  }
+
+  .matrix__modal {
+    width: 24rem;
+    background: #ffffff;
+    border-radius: var(--so-radius-lg);
+    box-shadow:
+      0 25px 50px -12px rgba(0, 0, 0, 0.35),
+      0 0 0 1px rgba(0, 0, 0, 0.08);
+    padding: 1.5rem;
+    animation: modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  @keyframes modal-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.9) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .matrix__modal-title {
+    font-family: var(--so-font-sans);
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #0f172a;
+    margin-bottom: 1.25rem;
+    letter-spacing: -0.02em;
+  }
+
+  .matrix__modal-field {
+    margin-bottom: 1.25rem;
+  }
+
+  .matrix__modal-label {
+    display: block;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #334155;
+    margin-bottom: 0.5rem;
+  }
+
+  .matrix__modal-input {
+    width: 100%;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: #0f172a;
+    background: #ffffff;
+    border: 1.5px solid #cbd5e1;
+    border-radius: var(--so-radius-md);
+    padding: 0.75rem 1rem;
+    outline: none;
+    transition: var(--so-transition-fast);
+  }
+
+  .matrix__modal-input:focus {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  }
+
+  .matrix__modal-input::placeholder {
+    color: #94a3b8;
+  }
+
+  .matrix__modal-hint {
+    font-size: 0.8125rem;
+    color: #475569;
+    margin-bottom: 1.25rem;
+    line-height: 1.5;
+  }
+
+  .matrix__modal-actions {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    padding-top: 0.5rem;
+  }
+
+  .matrix__modal-btn {
+    padding: 0.625rem 1.25rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__modal-btn--cancel {
+    background: #e2e8f0;
+    color: #475569;
+    border: none;
+  }
+
+  .matrix__modal-btn--cancel:hover {
+    background: #cbd5e1;
+    color: #1e293b;
+  }
+
+  .matrix__modal-btn--primary {
+    background: #7c3aed;
+    color: #ffffff;
+    border: none;
+    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.3);
+  }
+
+  .matrix__modal-btn--primary:hover:not(:disabled) {
+    background: #6d28d9;
+    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.4);
+    transform: translateY(-1px);
+  }
+
+  .matrix__modal-btn--primary:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  .matrix__modal-btn--primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .matrix__modal--wide {
+    width: 32rem;
+    max-height: 85vh;
+    overflow-y: auto;
+  }
+
+  .matrix__modal-textarea {
+    width: 100%;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: #0f172a;
+    background: #ffffff;
+    border: 1.5px solid #cbd5e1;
+    border-radius: var(--so-radius-md);
+    padding: 0.75rem 1rem;
+    outline: none;
+    transition: var(--so-transition-fast);
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  .matrix__modal-textarea:focus {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  }
+
+  .matrix__modal-textarea::placeholder {
+    color: #94a3b8;
+  }
+
+  .matrix__modal-tier-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 0.75rem;
+  }
+
+  .matrix__modal-tier-option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    background: #ffffff;
+    border: 2px solid #cbd5e1;
+    border-radius: var(--so-radius-lg);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__modal-tier-option:hover {
+    border-color: #a78bfa;
+    background: #f5f3ff;
+  }
+
+  .matrix__modal-tier-option--selected {
+    border-color: #8b5cf6;
+    background: #f5f3ff;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  }
+
+  .matrix__modal-tier-option--selected:hover {
+    border-color: #7c3aed;
+    background: #f5f3ff;
+  }
+
+  /* Custom checkbox styling */
+  .matrix__modal-tier-checkbox {
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    background: #ffffff;
+    border: 2px solid #94a3b8;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__modal-tier-checkbox:checked {
+    background: #7c3aed;
+    border-color: #7c3aed;
+  }
+
+  .matrix__modal-tier-checkbox:checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.375rem;
+    height: 0.625rem;
+    border: 2px solid white;
+    border-top: none;
+    border-left: none;
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+
+  .matrix__modal-tier-option:hover .matrix__modal-tier-checkbox:not(:checked) {
+    border-color: #a78bfa;
+  }
+
+  .matrix__modal-tier-name {
+    flex: 1;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .matrix__modal-tier-price {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #64748b;
+    white-space: nowrap;
+  }
+
+  .matrix__modal-tier-option--selected .matrix__modal-tier-name {
+    color: #4c1d95;
+  }
+
+  .matrix__modal-tier-option--selected .matrix__modal-tier-price {
+    color: #7c3aed;
+  }
+
+  .matrix__modal-tier-hint {
+    font-size: 0.8125rem;
+    color: #64748b;
+    margin: 0.75rem 0 0;
+    font-style: italic;
+  }
+
+  .matrix__modal-hint strong {
+    color: #334155;
+    font-weight: 600;
+  }
+`;
+export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
+    const { state } = document;
+    const services = state.global.services ?? [];
+    const tiers = state.global.tiers ?? [];
+    const optionGroups = state.global.optionGroups ?? [];
+    const [enabledOptionalGroups, setEnabledOptionalGroups] = useState(new Set(optionGroups.filter((g) => g.defaultSelected).map((g) => g.id)));
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [addServiceModal, setAddServiceModal] = useState(null);
+    const [newServiceName, setNewServiceName] = useState("");
+    const [newServiceDescription, setNewServiceDescription] = useState("");
+    const [newServiceSelectedTiers, setNewServiceSelectedTiers] = useState(new Set());
+    const [selectedTierIdx, setSelectedTierIdx] = useState(0);
+    const [selectedFacets, setSelectedFacets] = useState({
+        FUNCTION: "operational-hub",
+        LEGAL_ENTITY: "swiss-association",
+        TEAM_STRUCTURE: "remote-team",
+        ANONYMITY: "high-anonymity",
+    });
+    const getServiceGroup = (service) => {
+        // Services now have optionGroupId directly on them
+        return service.optionGroupId || null;
+    };
+    const groupedServices = useMemo(() => {
+        const groups = new Map();
+        optionGroups.forEach((g) => groups.set(g.id, []));
+        groups.set(UNGROUPED_ID, []);
+        services.forEach((service) => {
+            const groupId = getServiceGroup(service) || UNGROUPED_ID;
+            const groupServices = groups.get(groupId) || [];
+            groupServices.push(service);
+            groups.set(groupId, groupServices);
+        });
+        return groups;
+    }, [services, tiers, optionGroups]);
+    const setupGroups = useMemo(() => {
+        // Groups are setup groups if they're in groupSetupFees (passed from parent)
+        return optionGroups.filter((g) => groupSetupFees && g.id in groupSetupFees);
+    }, [optionGroups, groupSetupFees]);
+    const regularGroups = useMemo(() => {
+        // Regular groups are not setup groups and not add-ons
+        const isSetupGroup = (groupId) => groupSetupFees && groupId in groupSetupFees;
+        return optionGroups.filter((g) => !isSetupGroup(g.id) && !g.isAddOn);
+    }, [optionGroups, groupSetupFees]);
+    const addonGroups = useMemo(() => {
+        return optionGroups.filter((g) => g.isAddOn);
+    }, [optionGroups]);
+    const ungroupedSetupServices = useMemo(() => {
+        return (groupedServices.get(UNGROUPED_ID) || []).filter((s) => s.isSetupFormation);
+    }, [groupedServices]);
+    const ungroupedRegularServices = useMemo(() => {
+        return (groupedServices.get(UNGROUPED_ID) || []).filter((s) => !s.isSetupFormation);
+    }, [groupedServices]);
+    const getServiceLevelForTier = (serviceId, tier) => {
+        return tier.serviceLevels.find((sl) => sl.serviceId === serviceId);
+    };
+    const getUniqueMetricsForService = (serviceId) => {
+        const metricsSet = new Set();
+        tiers.forEach((tier) => {
+            tier.usageLimits
+                .filter((ul) => ul.serviceId === serviceId)
+                .forEach((ul) => metricsSet.add(ul.metric));
+        });
+        return Array.from(metricsSet);
+    };
+    const getUsageLimitForMetric = (serviceId, metric, tier) => {
+        return tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
+    };
+    const handleSetServiceLevel = (serviceId, tierId, level, existingLevelId, optionGroupId) => {
+        if (existingLevelId) {
+            dispatch(updateServiceLevel({
+                tierId,
+                serviceLevelId: existingLevelId,
+                level,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+        else {
+            dispatch(addServiceLevel({
+                tierId,
+                serviceLevelId: generateId(),
+                serviceId,
+                level,
+                optionGroupId,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    const toggleOptionalGroup = (groupId) => {
+        setEnabledOptionalGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(groupId)) {
+                next.delete(groupId);
+            }
+            else {
+                next.add(groupId);
+            }
+            return next;
+        });
+    };
+    const handleAddService = () => {
+        if (!addServiceModal || !newServiceName.trim())
+            return;
+        const newServiceId = generateId();
+        const now = new Date().toISOString();
+        // Add the service with optionGroupId directly on the service
+        dispatch(addService({
+            id: newServiceId,
+            title: newServiceName.trim(),
+            description: newServiceDescription.trim() || null,
+            isSetupFormation: addServiceModal.isSetupFormation,
+            optionGroupId: addServiceModal.groupId !== UNGROUPED_ID
+                ? addServiceModal.groupId
+                : undefined,
+            lastModified: now,
+        }));
+        // Create ServiceLevelBindings for each selected tier
+        newServiceSelectedTiers.forEach((tierId) => {
+            dispatch(addServiceLevel({
+                tierId,
+                serviceLevelId: generateId(),
+                serviceId: newServiceId,
+                level: "INCLUDED",
+                optionGroupId: addServiceModal.groupId !== UNGROUPED_ID
+                    ? addServiceModal.groupId
+                    : undefined,
+                lastModified: now,
+            }));
+        });
+        setNewServiceName("");
+        setNewServiceDescription("");
+        setNewServiceSelectedTiers(new Set());
+        setAddServiceModal(null);
+    };
+    const openAddServiceModal = (groupId, isSetupFormation) => {
+        setAddServiceModal({ groupId, isSetupFormation });
+        setNewServiceName("");
+        setNewServiceDescription("");
+        setNewServiceSelectedTiers(new Set());
+    };
+    const getLevelDisplay = (serviceLevel) => {
+        if (!serviceLevel)
+            return { label: "—", color: "var(--so-slate-300)" };
+        const level = serviceLevel.level;
+        const config = SERVICE_LEVELS.find((l) => l.value === level);
+        if (level === "CUSTOM" && serviceLevel.customValue) {
+            return {
+                label: serviceLevel.customValue,
+                color: config?.color || "var(--so-amber-600)",
+            };
+        }
+        return {
+            label: config?.shortLabel || level,
+            color: config?.color || "var(--so-slate-600)",
+        };
+    };
+    if (services.length === 0 || tiers.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsx("div", { className: "matrix", children: _jsxs("div", { className: "matrix__empty", children: [_jsx("svg", { className: "matrix__empty-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }), _jsx("h3", { className: "matrix__empty-title", children: "Matrix Not Ready" }), _jsx("p", { className: "matrix__empty-text", children: services.length === 0 && tiers.length === 0
+                                    ? "Add services in the Service Catalog and tiers in Tier Definition to configure the matrix."
+                                    : services.length === 0
+                                        ? "Add services in the Service Catalog to configure the matrix."
+                                        : "Add tiers in Tier Definition to configure the matrix." })] }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsxs("div", { className: "matrix", children: [_jsxs("div", { className: "matrix__facets", children: [_jsx("div", { className: "matrix__facets-row", children: Object.entries(FACET_CATEGORIES).map(([key, category]) => (_jsxs("div", { className: "matrix__facet-group", children: [_jsx("span", { className: "matrix__facet-label", children: category.label }), key === "ANONYMITY" ? (_jsx("div", { className: "matrix__toggle-group", children: category.options.map((option) => (_jsx("button", { onClick: () => setSelectedFacets((prev) => ({
+                                                    ...prev,
+                                                    [key]: option.id,
+                                                })), className: `matrix__toggle-btn ${selectedFacets[key] === option.id
+                                                    ? "matrix__toggle-btn--active"
+                                                    : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || "", onChange: (e) => setSelectedFacets((prev) => ({
+                                                ...prev,
+                                                [key]: e.target.value,
+                                            })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }), selectedFacets.ANONYMITY === "highest-anonymity" && (_jsx("div", { className: "matrix__facet-notice", children: _jsxs("p", { className: "matrix__facet-notice-text", children: [_jsx("strong", { children: "Highest Anonymity:" }), " Additional setup services may be required for enhanced privacy configurations."] }) }))] }), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
+                                                    ? "matrix__tier-header--selected"
+                                                    : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
+                                                                ? "Custom"
+                                                                : `$${tier.pricing.amount}/mo` })] }) }, tier.id)))] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
+                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx }, 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: {
+                                                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
+                                                        ? "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) => {
+                                                    const tierPrice = tier.pricing.amount || 0;
+                                                    const grandTotal = tierPrice;
+                                                    return (_jsx("td", { className: idx === selectedTierIdx
+                                                            ? "matrix__grand-total-cell--selected"
+                                                            : "", style: { textAlign: "center" }, children: tier.isCustomPricing ? "Custom" : `$${grandTotal}/mo` }, tier.id));
+                                                })] })] })] }) }), selectedCell && (_jsx(ServiceLevelDetailPanel, { serviceId: selectedCell.serviceId, tierId: selectedCell.tierId, services: services, tiers: tiers, optionGroups: optionGroups, dispatch: dispatch, onClose: () => setSelectedCell(null) })), addServiceModal && (_jsx("div", { className: "matrix__modal-overlay", children: _jsxs("div", { className: "matrix__modal matrix__modal--wide", children: [_jsx("h3", { className: "matrix__modal-title", children: "Add New Service" }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Service Name" }), _jsx("input", { type: "text", value: newServiceName, onChange: (e) => setNewServiceName(e.target.value), placeholder: "Enter service name", className: "matrix__modal-input", autoFocus: true })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Description (optional)" }), _jsx("textarea", { value: newServiceDescription, onChange: (e) => setNewServiceDescription(e.target.value), placeholder: "Enter description...", rows: 2, className: "matrix__modal-textarea" })] }), tiers.length > 0 && (_jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Include in Tiers" }), _jsx("div", { className: "matrix__modal-tier-grid", children: tiers.map((tier) => {
+                                                const isSelected = newServiceSelectedTiers.has(tier.id);
+                                                return (_jsxs("label", { className: `matrix__modal-tier-option ${isSelected ? "matrix__modal-tier-option--selected" : ""}`, children: [_jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => {
+                                                                const newSet = new Set(newServiceSelectedTiers);
+                                                                if (e.target.checked) {
+                                                                    newSet.add(tier.id);
+                                                                }
+                                                                else {
+                                                                    newSet.delete(tier.id);
+                                                                }
+                                                                setNewServiceSelectedTiers(newSet);
+                                                            }, className: "matrix__modal-tier-checkbox" }), _jsx("span", { className: "matrix__modal-tier-name", children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: "matrix__modal-tier-price", children: ["$", tier.pricing.amount, "/", tier.pricing.billingCycle.toLowerCase()] }))] }, tier.id));
+                                            }) }), newServiceSelectedTiers.size === 0 && (_jsx("p", { className: "matrix__modal-tier-hint", children: "Select at least one tier to include this service" }))] })), _jsxs("p", { className: "matrix__modal-hint", children: ["This service will be added to", " ", _jsx("strong", { children: addServiceModal.groupId !== UNGROUPED_ID
+                                                ? optionGroups.find((g) => g.id === addServiceModal.groupId)
+                                                    ?.name || "Unknown Group"
+                                                : "Ungrouped Services" }), " ", "as a", " ", addServiceModal.isSetupFormation
+                                            ? "Setup/Formation"
+                                            : "Recurring", " ", "service."] }), _jsxs("div", { className: "matrix__modal-actions", children: [_jsx("button", { onClick: () => {
+                                                setAddServiceModal(null);
+                                                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" })] })] }) }))] })] }));
+}
+function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, }) {
+    const showGroup = services.length > 0 || onAddService;
+    if (!showGroup)
+        return null;
+    const headerClass = isSetupFormation
+        ? "matrix__group-header--setup"
+        : isOptional
+            ? "matrix__group-header--optional"
+            : "matrix__group-header--regular";
+    const rowClass = isSetupFormation
+        ? "matrix__service-row--setup"
+        : isOptional
+            ? "matrix__service-row--optional"
+            : "matrix__service-row--regular";
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__group-header ${headerClass}`, children: [_jsx("td", { className: `matrix__group-header-sticky ${headerClass}`, children: _jsxs("div", { className: "matrix__group-header-inner", children: [isOptional && (_jsx("button", { onClick: onToggle, className: `matrix__group-toggle ${isEnabled ? "matrix__group-toggle--on" : "matrix__group-toggle--off"}`, children: _jsx("span", { className: "matrix__group-toggle-knob" }) })), _jsx("span", { className: "matrix__group-name", children: group.name })] }) }), _jsx("td", { colSpan: tiers.length, className: headerClass, style: { textAlign: "center" }, children: _jsx("span", { className: `matrix__group-badge ${isSetupFormation || !isOptional
+                                ? "matrix__group-badge--included"
+                                : "matrix__group-badge--optional"}`, children: isSetupFormation
+                                ? "INCLUDED"
+                                : isOptional
+                                    ? "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));
+            }), 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) => {
+                        const priceDisplay = "$0";
+                        return (_jsx("td", { style: {
+                                textAlign: "center",
+                                background: tierIdx === selectedTierIdx && isEnabled
+                                    ? "var(--so-violet-200)"
+                                    : undefined,
+                                color: tierIdx === selectedTierIdx && isEnabled
+                                    ? "var(--so-violet-900)"
+                                    : undefined,
+                            }, 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) => {
+                        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
+                                ? 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) => {
+                        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"
+                                    : "—" }) }, tier.id));
+                    })] }, `${service.id}-${metric}`)))] }));
+}
+function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGroups: _optionGroups, dispatch, onClose, }) {
+    const service = services.find((s) => s.id === serviceId);
+    const tier = tiers.find((t) => t.id === tierId);
+    const panelRef = useRef(null);
+    const overlayRef = useRef(null);
+    // Scroll lock when modal is open
+    useEffect(() => {
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = originalOverflow;
+        };
+    }, []);
+    // Handle Escape key press
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [onClose]);
+    // Focus trap - keep focus inside the panel
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const focusableElements = panel.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        // Focus the first element
+        firstElement?.focus();
+        const handleTabKey = (e) => {
+            if (e.key !== "Tab")
+                return;
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement?.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        };
+        document.addEventListener("keydown", handleTabKey);
+        return () => document.removeEventListener("keydown", handleTabKey);
+    }, []);
+    // Click outside to close
+    const handleOverlayClick = useCallback((e) => {
+        if (e.target === overlayRef.current) {
+            onClose();
+        }
+    }, [onClose]);
+    const serviceLevel = service
+        ? tier?.serviceLevels.find((sl) => sl.serviceId === serviceId)
+        : undefined;
+    const usageLimits = service
+        ? tier?.usageLimits.filter((ul) => ul.serviceId === serviceId) || []
+        : [];
+    const [isAddingMetric, setIsAddingMetric] = useState(false);
+    const [newMetric, setNewMetric] = useState("");
+    const [newLimit, setNewLimit] = useState("");
+    const [customValue, setCustomValue] = useState(serviceLevel?.customValue || "");
+    if (!service || !tier)
+        return null;
+    const handleAddLimit = () => {
+        if (!newMetric.trim())
+            return;
+        dispatch(addUsageLimit({
+            tierId: tier.id,
+            limitId: generateId(),
+            serviceId: service.id,
+            metric: newMetric.trim(),
+            limit: newLimit ? parseInt(newLimit) : undefined,
+            resetPeriod: "MONTHLY",
+            lastModified: new Date().toISOString(),
+        }));
+        setNewMetric("");
+        setNewLimit("");
+        setIsAddingMetric(false);
+    };
+    const handleRemoveLimit = (limitId) => {
+        dispatch(removeUsageLimit({
+            tierId: tier.id,
+            limitId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleSetLevel = (level) => {
+        if (serviceLevel) {
+            dispatch(updateServiceLevel({
+                tierId: tier.id,
+                serviceLevelId: serviceLevel.id,
+                level,
+                customValue: level === "CUSTOM" ? customValue : undefined,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+        else {
+            dispatch(addServiceLevel({
+                tierId: tier.id,
+                serviceLevelId: generateId(),
+                serviceId: service.id,
+                level,
+                customValue: level === "CUSTOM" ? customValue : undefined,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    const handleUpdateCustomValue = () => {
+        if (serviceLevel && serviceLevel.level === "CUSTOM") {
+            dispatch(updateServiceLevel({
+                tierId: tier.id,
+                serviceLevelId: serviceLevel.id,
+                customValue,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    return (_jsx("div", { ref: overlayRef, className: "matrix__panel-overlay", onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "panel-title", children: _jsxs("div", { ref: panelRef, className: "matrix__panel", children: [_jsxs("div", { className: "matrix__panel-header", children: [_jsxs("div", { className: "matrix__panel-header-top", children: [_jsxs("span", { className: "matrix__panel-tier", children: [tier.name, " Tier"] }), _jsx("button", { onClick: onClose, className: "matrix__panel-close", children: _jsx("svg", { className: "matrix__panel-close-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("h3", { id: "panel-title", className: "matrix__panel-title", children: service.title })] }), _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" }) })] }) }));
+}
+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 handleSave = () => {
+        dispatch(updateUsageLimit({
+            tierId,
+            limitId: limit.id,
+            metric: editMetric.trim() || limit.metric,
+            limit: editLimit ? parseInt(editLimit) : undefined,
+            lastModified: new Date().toISOString(),
+        }));
+        setIsEditing(false);
+    };
+    const handleCancel = () => {
+        setEditMetric(limit.metric);
+        setEditLimit(limit.limit?.toString() || "");
+        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-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" }) }) })] })] }));
+}