@powerhousedao/contributor-billing 0.1.31 → 0.1.33

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+import { addTier, updateTier, updateTierPricing, deleteTier, addServiceLevel, updateServiceLevel, removeServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, } from "../../../document-models/service-offering/gen/creators.js";
+export function TiersList({ document, dispatch }) {
+    const { state } = document;
+    const globalState = state.global;
+    const tiers = globalState.tiers ?? [];
+    const services = globalState.services ?? [];
+    const [isAdding, setIsAdding] = useState(false);
+    const [expandedTierId, setExpandedTierId] = useState(null);
+    const [formData, setFormData] = useState({
+        name: "",
+        description: "",
+        amount: "",
+        currency: "USD",
+        billingCycle: "MONTHLY",
+    });
+    const handleAddTier = () => {
+        if (!formData.name || !formData.amount)
+            return;
+        dispatch(addTier({
+            id: generateId(),
+            name: formData.name,
+            description: formData.description || undefined,
+            amount: parseFloat(formData.amount),
+            currency: formData.currency,
+            billingCycle: formData.billingCycle,
+            lastModified: new Date().toISOString(),
+        }));
+        setFormData({
+            name: "",
+            description: "",
+            amount: "",
+            currency: "USD",
+            billingCycle: "MONTHLY",
+        });
+        setIsAdding(false);
+    };
+    const handleDeleteTier = (tierId) => {
+        if (confirm("Are you sure you want to delete this tier?")) {
+            dispatch(deleteTier({
+                id: tierId,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    const handleAddServiceLevel = (tierId, serviceId) => {
+        dispatch(addServiceLevel({
+            tierId,
+            serviceLevelId: generateId(),
+            serviceId,
+            level: "INCLUDED",
+            optionGroupId: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleUpdateServiceLevel = (tierId, serviceLevelId, level) => {
+        dispatch(updateServiceLevel({
+            tierId,
+            serviceLevelId,
+            level: level,
+            optionGroupId: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleRemoveServiceLevel = (tierId, serviceLevelId) => {
+        dispatch(removeServiceLevel({
+            tierId,
+            serviceLevelId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleAddUsageLimit = (tierId) => {
+        const metric = prompt("Enter metric name (e.g., 'Number of Contributors'):");
+        if (!metric)
+            return;
+        const serviceId = services[0]?.id || "";
+        if (!serviceId) {
+            alert("Please add a service first before adding usage limits.");
+            return;
+        }
+        const limitStr = prompt("Enter limit (leave empty for unlimited):");
+        const limit = limitStr ? parseInt(limitStr) : undefined;
+        dispatch(addUsageLimit({
+            tierId,
+            limitId: generateId(),
+            serviceId,
+            metric,
+            limit,
+            resetPeriod: "MONTHLY",
+            notes: undefined,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleRemoveUsageLimit = (tierId, limitId) => {
+        dispatch(removeUsageLimit({
+            tierId,
+            limitId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const getServiceLevelColor = (level) => {
+        switch (level) {
+            case "INCLUDED":
+                return "bg-green-100 text-green-800";
+            case "OPTIONAL":
+                return "bg-blue-100 text-blue-800";
+            case "NOT_INCLUDED":
+                return "bg-gray-100 text-gray-800";
+            default:
+                return "bg-gray-100 text-gray-800";
+        }
+    };
+    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h2", { className: "text-2xl font-semibold text-gray-900", children: "Subscription Tiers" }), !isAdding && (_jsx("button", { onClick: () => setIsAdding(true), className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", children: "+ Add Tier" }))] }), isAdding && (_jsxs("div", { className: "mb-4 p-4 bg-gray-50 rounded-md border border-gray-200", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900 mb-3", children: "New Tier" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Name *" }), _jsx("input", { type: "text", value: formData.name, onChange: (e) => setFormData({ ...formData, name: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "e.g., Basic, Professional, Enterprise" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Amount *" }), _jsx("input", { type: "number", value: formData.amount, onChange: (e) => setFormData({ ...formData, amount: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "200", step: "0.01" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Currency" }), _jsxs("select", { value: formData.currency, onChange: (e) => setFormData({ ...formData, currency: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", children: [_jsx("option", { value: "USD", children: "USD" }), _jsx("option", { value: "EUR", children: "EUR" }), _jsx("option", { value: "GBP", children: "GBP" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Billing Cycle" }), _jsxs("select", { value: formData.billingCycle, onChange: (e) => setFormData({ ...formData, billingCycle: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", children: [_jsx("option", { value: "MONTHLY", children: "Monthly" }), _jsx("option", { value: "QUARTERLY", children: "Quarterly" }), _jsx("option", { value: "SEMI_ANNUAL", children: "Semi-Annual" }), _jsx("option", { value: "ANNUAL", children: "Annual" }), _jsx("option", { value: "ONE_TIME", children: "One-Time" })] })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Description" }), _jsx("textarea", { value: formData.description, onChange: (e) => setFormData({ ...formData, description: e.target.value }), rows: 2, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Tier description..." })] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4", children: [_jsx("button", { onClick: handleAddTier, disabled: !formData.name || !formData.amount, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed", children: "Add Tier" }), _jsx("button", { onClick: () => {
+                                    setIsAdding(false);
+                                    setFormData({
+                                        name: "",
+                                        description: "",
+                                        amount: "",
+                                        currency: "USD",
+                                        billingCycle: "MONTHLY",
+                                    });
+                                }, className: "px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors", children: "Cancel" })] })] })), tiers.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-gray-500", children: [_jsx("p", { children: "No tiers added yet" }), _jsx("p", { className: "text-sm", children: "Click \"Add Tier\" to create your first tier" })] })) : (_jsx("div", { className: "space-y-4", children: tiers.map((tier) => (_jsxs("div", { className: "border border-gray-200 rounded-md overflow-hidden", children: [_jsx("div", { className: "bg-gray-50 p-4", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900", children: tier.name }), tier.description && (_jsx("p", { className: "text-gray-600 text-sm mt-1", children: tier.description })), _jsxs("div", { className: "mt-2 flex items-center gap-4", children: [_jsxs("span", { className: "text-2xl font-bold text-gray-900", children: [tier.pricing.currency, " ", tier.pricing.amount] }), _jsxs("span", { className: "text-sm text-gray-500", children: ["/ ", tier.pricing.billingCycle.replace("_", " ")] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => setExpandedTierId(expandedTierId === tier.id ? null : tier.id), className: "px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded-md transition-colors", children: expandedTierId === tier.id ? "Collapse" : "Expand" }), _jsx("button", { onClick: () => handleDeleteTier(tier.id), className: "px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors", children: "Delete" })] })] }) }), expandedTierId === tier.id && (_jsxs("div", { className: "p-4 space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Service Levels" }), services.length > 0 && (_jsxs("select", { onChange: (e) => {
+                                                        if (e.target.value) {
+                                                            handleAddServiceLevel(tier.id, e.target.value);
+                                                            e.target.value = "";
+                                                        }
+                                                    }, className: "text-sm px-2 py-1 border border-gray-300 rounded-md", defaultValue: "", children: [_jsx("option", { value: "", children: "+ Add Service" }), services
+                                                            .filter((s) => !(tier.serviceLevels ?? []).some((sl) => sl.serviceId === s.id))
+                                                            .map((service) => (_jsx("option", { value: service.id, children: service.title }, service.id)))] }))] }), (tier.serviceLevels ?? []).length === 0 ? (_jsx("p", { className: "text-sm text-gray-500", children: "No services configured for this tier" })) : (_jsx("div", { className: "space-y-2", children: (tier.serviceLevels ?? []).map((sl) => {
+                                                const service = services.find((s) => s.id === sl.serviceId);
+                                                return (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded-md", children: [_jsx("div", { className: "flex-1", children: _jsx("span", { className: "text-sm font-medium text-gray-900", children: service?.title || "Unknown Service" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { value: sl.level, onChange: (e) => handleUpdateServiceLevel(tier.id, sl.id, e.target.value), className: `text-sm px-2 py-1 rounded-md border-0 ${getServiceLevelColor(sl.level)}`, children: [_jsx("option", { value: "INCLUDED", children: "Included" }), _jsx("option", { value: "OPTIONAL", children: "Optional" }), _jsx("option", { value: "NOT_INCLUDED", children: "Not Included" })] }), _jsx("button", { onClick: () => handleRemoveServiceLevel(tier.id, sl.id), className: "text-sm text-red-600 hover:bg-red-50 px-2 py-1 rounded-md", children: "Remove" })] })] }, sl.id));
+                                            }) }))] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Usage Limits" }), _jsx("button", { onClick: () => handleAddUsageLimit(tier.id), className: "text-sm text-blue-600 hover:bg-blue-50 px-2 py-1 rounded-md", children: "+ Add Limit" })] }), (tier.usageLimits ?? []).length === 0 ? (_jsx("p", { className: "text-sm text-gray-500", children: "No usage limits configured" })) : (_jsx("div", { className: "space-y-2", children: (tier.usageLimits ?? []).map((limit) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded-md", children: [_jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: limit.metric }), _jsx("span", { className: "text-sm text-gray-600 ml-2", children: limit.limit
+                                                                    ? `Up to ${limit.limit}`
+                                                                    : "Unlimited" }), limit.resetPeriod && (_jsxs("span", { className: "text-xs text-gray-500 ml-2", children: ["/ ", limit.resetPeriod] }))] }), _jsx("button", { onClick: () => handleRemoveUsageLimit(tier.id, limit.id), className: "text-sm text-red-600 hover:bg-red-50 px-2 py-1 rounded-md", children: "Remove" })] }, limit.id))) }))] })] }))] }, tier.id))) }))] }));
+}

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

@@ -0,0 +1,2 @@
+export default function ServiceOfferingEditor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

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

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

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

@@ -0,0 +1,336 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { ServiceCatalog, } from "./components/ServiceCatalog.js";
+import { TierDefinition } from "./components/TierDefinition.js";
+import { TheMatrix } from "./components/TheMatrix.js";
+export default function ServiceOfferingEditor() {
+    const [document, dispatch] = useSelectedServiceOfferingDocument();
+    const [activeTab, setActiveTab] = useState("scope-facets");
+    // Centralized group metadata state shared between ServiceCatalog and TheMatrix
+    const [groupMetadata, setGroupMetadata] = useState({});
+    if (!document) {
+        return (_jsxs("div", { className: "so-editor", children: [_jsx("style", { children: editorStyles }), _jsxs("div", { className: "so-empty-state", children: [_jsx("div", { className: "so-empty-state__icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }), _jsx("h2", { className: "so-empty-state__title", children: "No service offering selected" }), _jsx("p", { className: "so-empty-state__subtitle", children: "Select a document to start editing" })] })] }));
+    }
+    // Derive groupSetupFees for TheMatrix from groupMetadata
+    const groupSetupFees = {};
+    Object.entries(groupMetadata).forEach(([groupId, meta]) => {
+        if (meta.isSetupFormation) {
+            groupSetupFees[groupId] = meta.setupFee;
+        }
+    });
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case "scope-facets":
+                return _jsx(ScopeAndFacets, { document: document, dispatch: dispatch });
+            case "service-catalog":
+                return (_jsx(ServiceCatalog, { document: document, dispatch: dispatch, groupMetadata: groupMetadata, setGroupMetadata: setGroupMetadata }));
+            case "tier-definition":
+                return _jsx(TierDefinition, { document: document, dispatch: dispatch });
+            case "the-matrix":
+                return (_jsx(TheMatrix, { document: document, dispatch: dispatch, groupSetupFees: groupSetupFees }));
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", { className: "so-editor", children: [_jsx("style", { children: editorStyles }), _jsx(DocumentToolbar, {}), _jsxs("div", { className: "so-editor__container", children: [_jsx(TabNavigation, { activeTab: activeTab, onTabChange: setActiveTab }), _jsx("div", { className: "so-editor__content", children: renderTabContent() })] })] }));
+}
+const editorStyles = `
+  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');
+
+  .so-editor {
+    --so-font-sans: 'DM Sans', system-ui, sans-serif;
+    --so-font-mono: 'DM Mono', 'SF Mono', monospace;
+
+    --so-slate-50: #f8fafc;
+    --so-slate-100: #f1f5f9;
+    --so-slate-200: #e2e8f0;
+    --so-slate-300: #cbd5e1;
+    --so-slate-400: #94a3b8;
+    --so-slate-500: #64748b;
+    --so-slate-600: #475569;
+    --so-slate-700: #334155;
+    --so-slate-800: #1e293b;
+    --so-slate-900: #0f172a;
+
+    --so-amber-50: #fffbeb;
+    --so-amber-100: #fef3c7;
+    --so-amber-200: #fde68a;
+    --so-amber-500: #f59e0b;
+    --so-amber-600: #d97706;
+    --so-amber-700: #b45309;
+
+    --so-emerald-50: #ecfdf5;
+    --so-emerald-100: #d1fae5;
+    --so-emerald-500: #10b981;
+    --so-emerald-600: #059669;
+    --so-emerald-700: #047857;
+
+    --so-violet-50: #f5f3ff;
+    --so-violet-100: #ede9fe;
+    --so-violet-200: #ddd6fe;
+    --so-violet-500: #8b5cf6;
+    --so-violet-600: #7c3aed;
+    --so-violet-700: #6d28d9;
+
+    --so-rose-50: #fff1f2;
+    --so-rose-100: #ffe4e6;
+    --so-rose-500: #f43f5e;
+    --so-rose-600: #e11d48;
+
+    --so-sky-50: #f0f9ff;
+    --so-sky-100: #e0f2fe;
+    --so-sky-500: #0ea5e9;
+    --so-sky-600: #0284c7;
+
+    --so-radius-sm: 6px;
+    --so-radius-md: 10px;
+    --so-radius-lg: 14px;
+    --so-radius-xl: 20px;
+
+    --so-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+    --so-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+    --so-shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
+    --so-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06);
+
+    --so-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --so-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --so-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    font-family: var(--so-font-sans);
+    background: linear-gradient(135deg, var(--so-slate-100) 0%, var(--so-slate-50) 50%, #f0f4f8 100%);
+    min-height: 100%;
+    overflow-y: auto;
+  }
+
+  .so-editor__container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 32px 48px;
+  }
+
+  .so-editor__content {
+    min-height: 500px;
+    animation: so-fade-in var(--so-transition-slow) ease-out;
+  }
+
+  @keyframes so-fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes so-scale-in {
+    from { opacity: 0; transform: scale(0.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  .so-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    text-align: center;
+    padding: 48px;
+  }
+
+  .so-empty-state__icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 24px;
+    color: var(--so-slate-300);
+    animation: so-float 3s ease-in-out infinite;
+  }
+
+  .so-empty-state__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  @keyframes so-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+  }
+
+  .so-empty-state__title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    margin: 0 0 8px;
+    letter-spacing: -0.02em;
+  }
+
+  .so-empty-state__subtitle {
+    font-size: 1rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  /* Shared component styles */
+  .so-card {
+    background: white;
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-md);
+    border: 1px solid var(--so-slate-100);
+    transition: box-shadow var(--so-transition-base), transform var(--so-transition-base);
+  }
+
+  .so-card:hover {
+    box-shadow: var(--so-shadow-lg);
+  }
+
+  .so-card--interactive:hover {
+    transform: translateY(-2px);
+  }
+
+  .so-section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    letter-spacing: -0.02em;
+    margin: 0 0 20px;
+  }
+
+  .so-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+    margin-bottom: 8px;
+  }
+
+  .so-input {
+    width: 100%;
+    padding: 12px 16px;
+    font-family: var(--so-font-sans);
+    font-size: 0.9375rem;
+    color: var(--so-slate-800);
+    background: var(--so-slate-50);
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    transition: all var(--so-transition-fast);
+  }
+
+  .so-input:hover {
+    border-color: var(--so-slate-300);
+    background: white;
+  }
+
+  .so-input:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    background: white;
+    box-shadow: 0 0 0 3px var(--so-violet-100);
+  }
+
+  .so-input::placeholder {
+    color: var(--so-slate-400);
+  }
+
+  .so-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 20px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-md);
+    border: none;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .so-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .so-btn--primary {
+    background: linear-gradient(135deg, var(--so-violet-600) 0%, var(--so-violet-700) 100%);
+    color: white;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+  }
+
+  .so-btn--primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+  }
+
+  .so-btn--primary:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  .so-btn--secondary {
+    background: var(--so-slate-100);
+    color: var(--so-slate-700);
+  }
+
+  .so-btn--secondary:hover:not(:disabled) {
+    background: var(--so-slate-200);
+  }
+
+  .so-btn--ghost {
+    background: transparent;
+    color: var(--so-slate-600);
+  }
+
+  .so-btn--ghost:hover:not(:disabled) {
+    background: var(--so-slate-100);
+  }
+
+  .so-btn--danger {
+    background: var(--so-rose-50);
+    color: var(--so-rose-600);
+  }
+
+  .so-btn--danger:hover:not(:disabled) {
+    background: var(--so-rose-100);
+  }
+
+  .so-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+  }
+
+  .so-badge--amber {
+    background: var(--so-amber-100);
+    color: var(--so-amber-700);
+  }
+
+  .so-badge--emerald {
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+  }
+
+  .so-badge--violet {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
+  .so-badge--sky {
+    background: var(--so-sky-100);
+    color: var(--so-sky-600);
+  }
+
+  .so-badge--slate {
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+  }
+
+  .so-mono {
+    font-family: var(--so-font-mono);
+  }
+`;

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

@@ -0,0 +1,4 @@
+import type { EditorModule } from "document-model";
+/** Document editor module for the Service Offering document type */
+export declare const ServiceOfferingEditor: EditorModule;
+//# sourceMappingURL=module.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../editors/service-offering-editor/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,oEAAoE;AACpE,eAAO,MAAM,qBAAqB,EAAE,YAOnC,CAAC"}

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

@@ -0,0 +1,10 @@
+import { lazy } from "react";
+/** Document editor module for the Service Offering document type */
+export const ServiceOfferingEditor = {
+    Component: lazy(() => import("./editor.js")),
+    documentTypes: ["powerhouse/service-offering"],
+    config: {
+        id: "service-offering-editor",
+        name: "Service Offering Editor",
+    },
+};

package/dist/editors/service-subscriptions-editor/components/AddCategoryModal.d.ts

@@ -0,0 +1,7 @@
+interface AddCategoryModalProps {
+    onClose: () => void;
+    isDarkMode: boolean;
+}
+export declare function AddCategoryModal({ onClose, isDarkMode, }: AddCategoryModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AddCategoryModal.d.ts.map

package/dist/editors/service-subscriptions-editor/components/AddCategoryModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddCategoryModal.d.ts","sourceRoot":"","sources":["../../../../editors/service-subscriptions-editor/components/AddCategoryModal.tsx"],"names":[],"mappings":"AAKA,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,GACX,EAAE,qBAAqB,2CA4HvB"}

package/dist/editors/service-subscriptions-editor/components/AddCategoryModal.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+import { useSelectedServiceSubscriptionsDocument } from "../../../document-models/service-subscriptions/hooks.js";
+import { addCategory } from "../../../document-models/service-subscriptions/gen/creators.js";
+export function AddCategoryModal({ onClose, isDarkMode, }) {
+    const [, dispatch] = useSelectedServiceSubscriptionsDocument();
+    const [formData, setFormData] = useState({
+        name: "",
+        description: "",
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!formData.name) {
+            alert("Name is required");
+            return;
+        }
+        dispatch?.(addCategory({
+            id: generateId(),
+            name: formData.name,
+            description: formData.description || undefined,
+        }));
+        onClose();
+    };
+    const updateField = (field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+    const inputClass = `w-full px-3 py-2.5 text-sm rounded-lg border transition-colors focus:outline-none focus:border-indigo-500 ${isDarkMode
+        ? "bg-gray-900 border-gray-700 text-gray-100 placeholder-gray-500"
+        : "bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400"}`;
+    const labelClass = `block text-sm font-medium mb-1.5 ${isDarkMode ? "text-gray-400" : "text-gray-500"}`;
+    return (_jsx("div", { className: `fixed inset-0 flex items-center justify-center z-50 ${isDarkMode ? "bg-black/70" : "bg-black/40"}`, onClick: onClose, children: _jsxs("div", { className: `w-full max-w-md rounded-xl border ${isDarkMode
+                ? "bg-gray-800 border-gray-700"
+                : "bg-white border-gray-200 shadow-xl"}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: `flex justify-between items-center px-6 py-5 border-b ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsx("h2", { className: `text-lg font-semibold ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: "Add Category" }), _jsx("button", { className: `w-8 h-8 flex items-center justify-center rounded-md transition-colors ${isDarkMode
+                                ? "text-gray-400 hover:text-gray-100 hover:bg-gray-700"
+                                : "text-gray-500 hover:text-gray-900 hover:bg-gray-100"}`, onClick: onClose, children: "\u2715" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Name *" }), _jsx("input", { type: "text", className: inputClass, placeholder: "e.g., Development Tools, Cloud Infrastructure", value: formData.name, onChange: (e) => updateField("name", e.target.value), autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Description" }), _jsx("textarea", { className: `${inputClass} resize-y`, placeholder: "Optional description...", value: formData.description, onChange: (e) => updateField("description", e.target.value), rows: 3 })] })] }), _jsxs("div", { className: `flex justify-end gap-3 px-6 py-4 border-t ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsx("button", { type: "button", className: `px-4 py-2 text-sm font-medium rounded-lg border transition-colors ${isDarkMode
+                                        ? "bg-gray-700 border-gray-600 text-gray-100 hover:bg-gray-600"
+                                        : "bg-white border-gray-200 text-gray-900 hover:bg-gray-50"}`, onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", className: "px-4 py-2 text-sm font-medium bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors", children: "Add Category" })] })] })] }) }));
+}

package/dist/editors/service-subscriptions-editor/components/AddSubscriptionModal.d.ts

@@ -0,0 +1,10 @@
+import type { Vendor, Category } from "../../../document-models/service-subscriptions/gen/types.js";
+interface AddSubscriptionModalProps {
+    vendors: Vendor[];
+    categories: Category[];
+    onClose: () => void;
+    isDarkMode: boolean;
+}
+export declare function AddSubscriptionModal({ vendors, categories, onClose, isDarkMode, }: AddSubscriptionModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AddSubscriptionModal.d.ts.map

package/dist/editors/service-subscriptions-editor/components/AddSubscriptionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddSubscriptionModal.d.ts","sourceRoot":"","sources":["../../../../editors/service-subscriptions-editor/components/AddSubscriptionModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,MAAM,EACN,QAAQ,EAGT,MAAM,6DAA6D,CAAC;AAErE,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAU,EACV,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,2CAiS3B"}

package/dist/editors/service-subscriptions-editor/components/AddSubscriptionModal.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+import { useSelectedServiceSubscriptionsDocument } from "../../../document-models/service-subscriptions/hooks.js";
+import { addSubscription } from "../../../document-models/service-subscriptions/gen/creators.js";
+export function AddSubscriptionModal({ vendors, categories, onClose, isDarkMode, }) {
+    const [, dispatch] = useSelectedServiceSubscriptionsDocument();
+    const [formData, setFormData] = useState({
+        name: "",
+        vendorId: vendors[0]?.id ?? "",
+        categoryId: "",
+        billingCycle: "MONTHLY",
+        amount: "",
+        currency: "USD",
+        status: "ACTIVE",
+        planName: "",
+        totalSeats: "",
+        accountEmail: "",
+        accountOwner: "",
+        loginUrl: "",
+        notes: "",
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!formData.name || !formData.vendorId) {
+            alert("Name and vendor are required");
+            return;
+        }
+        dispatch?.(addSubscription({
+            id: generateId(),
+            name: formData.name,
+            vendorId: formData.vendorId,
+            categoryId: formData.categoryId || undefined,
+            billingCycle: formData.billingCycle,
+            amount: formData.amount ? parseFloat(formData.amount) : undefined,
+            currency: formData.currency || undefined,
+            status: formData.status,
+            planName: formData.planName || undefined,
+            seats: formData.totalSeats
+                ? { total: parseInt(formData.totalSeats), assignedMembers: [] }
+                : undefined,
+            accountEmail: formData.accountEmail || undefined,
+            accountOwner: formData.accountOwner || undefined,
+            loginUrl: formData.loginUrl || undefined,
+            notes: formData.notes || undefined,
+            tags: [],
+        }));
+        onClose();
+    };
+    const updateField = (field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+    const inputClass = `w-full px-3 py-2.5 text-sm rounded-lg border transition-colors focus:outline-none focus:border-indigo-500 ${isDarkMode
+        ? "bg-gray-900 border-gray-700 text-gray-100 placeholder-gray-500"
+        : "bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400"}`;
+    const labelClass = `block text-sm font-medium mb-1.5 ${isDarkMode ? "text-gray-400" : "text-gray-500"}`;
+    return (_jsx("div", { className: `fixed inset-0 flex items-center justify-center z-50 ${isDarkMode ? "bg-black/70" : "bg-black/40"}`, onClick: onClose, children: _jsxs("div", { className: `w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-xl border ${isDarkMode
+                ? "bg-gray-800 border-gray-700"
+                : "bg-white border-gray-200 shadow-xl"}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: `flex justify-between items-center px-6 py-5 border-b ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsx("h2", { className: `text-lg font-semibold ${isDarkMode ? "text-gray-100" : "text-gray-900"}`, children: "Add Subscription" }), _jsx("button", { className: `w-8 h-8 flex items-center justify-center rounded-md transition-colors ${isDarkMode
+                                ? "text-gray-400 hover:text-gray-100 hover:bg-gray-700"
+                                : "text-gray-500 hover:text-gray-900 hover:bg-gray-100"}`, onClick: onClose, children: "\u2715" })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Name *" }), _jsx("input", { type: "text", className: inputClass, placeholder: "e.g., GitHub Enterprise", value: formData.name, onChange: (e) => updateField("name", e.target.value), autoFocus: true })] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Vendor *" }), _jsxs("select", { className: inputClass, value: formData.vendorId, onChange: (e) => updateField("vendorId", e.target.value), children: [vendors.length === 0 && (_jsx("option", { value: "", children: "No vendors available" })), vendors.map((v) => (_jsx("option", { value: v.id, children: v.name }, v.id)))] })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Category" }), _jsxs("select", { className: inputClass, value: formData.categoryId, onChange: (e) => updateField("categoryId", e.target.value), children: [_jsx("option", { value: "", children: "None" }), categories.map((c) => (_jsx("option", { value: c.id, children: c.name }, c.id)))] })] })] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Status" }), _jsxs("select", { className: inputClass, value: formData.status, onChange: (e) => updateField("status", e.target.value), children: [_jsx("option", { value: "ACTIVE", children: "Active" }), _jsx("option", { value: "TRIAL", children: "Trial" }), _jsx("option", { value: "PENDING", children: "Pending" }), _jsx("option", { value: "PAUSED", children: "Paused" }), _jsx("option", { value: "CANCELLED", children: "Cancelled" }), _jsx("option", { value: "EXPIRED", children: "Expired" })] })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Plan Name" }), _jsx("input", { type: "text", className: inputClass, placeholder: "e.g., Pro, Enterprise", value: formData.planName, onChange: (e) => updateField("planName", e.target.value) })] })] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Amount" }), _jsx("input", { type: "number", className: inputClass, placeholder: "0.00", value: formData.amount, onChange: (e) => updateField("amount", e.target.value) })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Billing Cycle" }), _jsxs("select", { className: inputClass, value: formData.billingCycle, onChange: (e) => updateField("billingCycle", e.target.value), children: [_jsx("option", { value: "MONTHLY", children: "Monthly" }), _jsx("option", { value: "QUARTERLY", children: "Quarterly" }), _jsx("option", { value: "ANNUAL", children: "Annual" }), _jsx("option", { value: "BIENNIAL", children: "Biennial" }), _jsx("option", { value: "ONE_TIME", children: "One-time" }), _jsx("option", { value: "USAGE_BASED", children: "Usage-based" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Total Seats" }), _jsx("input", { type: "number", className: inputClass, placeholder: "Leave empty if not applicable", value: formData.totalSeats, onChange: (e) => updateField("totalSeats", e.target.value) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Account Owner" }), _jsx("input", { type: "text", className: inputClass, placeholder: "Name", value: formData.accountOwner, onChange: (e) => updateField("accountOwner", e.target.value) })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: labelClass, children: "Account Email" }), _jsx("input", { type: "email", className: inputClass, placeholder: "email@company.com", value: formData.accountEmail, onChange: (e) => updateField("accountEmail", e.target.value) })] })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Login URL" }), _jsx("input", { type: "url", className: inputClass, placeholder: "https://...", value: formData.loginUrl, onChange: (e) => updateField("loginUrl", e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Notes" }), _jsx("textarea", { className: `${inputClass} resize-y`, placeholder: "Additional notes...", value: formData.notes, onChange: (e) => updateField("notes", e.target.value), rows: 3 })] })] }), _jsxs("div", { className: `flex justify-end gap-3 px-6 py-4 border-t ${isDarkMode ? "border-gray-700" : "border-gray-200"}`, children: [_jsx("button", { type: "button", className: `px-4 py-2 text-sm font-medium rounded-lg border transition-colors ${isDarkMode
+                                        ? "bg-gray-700 border-gray-600 text-gray-100 hover:bg-gray-600"
+                                        : "bg-white border-gray-200 text-gray-900 hover:bg-gray-50"}`, onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", className: "px-4 py-2 text-sm font-medium bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors", children: "Add Subscription" })] })] })] }) }));
+}