@powerhousedao/service-offering 1.0.0-dev.22 → 1.0.0-dev.24

package/dist/editors/resource-template-editor/components/TemplateInfo.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import { generateId } from "document-model/core";
-import { updateTemplateInfo, updateTemplateStatus, setOperator, addTargetAudience, removeTargetAudience, setSetupServices, setRecurringServices, addFaq, updateFaq, deleteFaq, reorderFaqs, addContentSection, updateContentSection, deleteContentSection, reorderContentSections, } from "../../../document-models/resource-template/v1/gen/creators.js";
+import { updateTemplateInfo, updateTemplateStatus, setOperator, setWeight, addTargetAudience, removeTargetAudience, setSetupServices, setRecurringServices, addFaq, updateFaq, deleteFaq, reorderFaqs, addContentSection, updateContentSection, deleteContentSection, reorderContentSections, } from "../../../document-models/resource-template/v1/gen/creators.js";
 import { MarkdownEditor } from "./markdown-editor.js";
 const STATUS_OPTIONS = [
     { value: "DRAFT", label: "Draft", color: "slate" },
@@ -85,6 +85,7 @@ export function TemplateInfo({ document, dispatch }) {
     const globalState = state.global;
     const [formData, setFormData] = useState({
         title: globalState.title || "",
+        subtitle: globalState.subtitle || "",
         summary: globalState.summary || "",
         description: globalState.description || "",
         operatorId: globalState.operatorId || "",
@@ -114,6 +115,7 @@ export function TemplateInfo({ document, dispatch }) {
     useEffect(() => {
         setFormData({
             title: globalState.title || "",
+            subtitle: globalState.subtitle || "",
             summary: globalState.summary || "",
             description: globalState.description || "",
             operatorId: globalState.operatorId || "",
@@ -123,6 +125,7 @@ export function TemplateInfo({ document, dispatch }) {
         });
     }, [
         globalState.title,
+        globalState.subtitle,
         globalState.summary,
         globalState.description,
         globalState.operatorId,
@@ -156,6 +159,10 @@ export function TemplateInfo({ document, dispatch }) {
             changes.infoLink = formData.infoLink || null;
             hasChanges = true;
         }
+        if (formData.subtitle !== (globalState.subtitle || "")) {
+            changes.subtitle = formData.subtitle || null;
+            hasChanges = true;
+        }
         if (hasChanges) {
             dispatch(updateTemplateInfo({
                 ...changes,
@@ -420,7 +427,12 @@ export function TemplateInfo({ document, dispatch }) {
                                             backgroundImage: formData.thumbnailUrl
                                                 ? `url(${formData.thumbnailUrl})`
                                                 : undefined,
-                                        }, children: [!formData.thumbnailUrl && (_jsxs("div", { className: "template-editor__thumbnail-placeholder", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }), _jsx("span", { children: "Add Thumbnail" })] })), formData.thumbnailUrl && (_jsx("div", { className: `template-editor__status-badge template-editor__status-badge--${currentStatus?.color}`, children: currentStatus?.label }))] }), _jsx("div", { className: "template-editor__thumbnail-input", children: _jsx("input", { type: "text", value: formData.thumbnailUrl, onChange: (e) => handleFieldChange("thumbnailUrl", e.target.value), onBlur: handleInfoBlur, placeholder: "https://example.com/image.jpg", className: "template-editor__input template-editor__input--sm" }) })] }), _jsxs("div", { className: "template-editor__identity", children: [_jsxs("div", { className: "template-editor__title-row", children: [_jsx("input", { type: "text", value: formData.title, onChange: (e) => handleFieldChange("title", e.target.value), onBlur: handleInfoBlur, className: "template-editor__title-input", placeholder: "Product Title" }), _jsxs("div", { className: "template-editor__status-select", children: [_jsx("select", { value: formData.status, onChange: (e) => handleStatusChange(e.target.value), className: "template-editor__select", "data-status": currentStatus?.color, children: STATUS_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("span", { className: `template-editor__status-indicator template-editor__status-indicator--${currentStatus?.color}` })] })] }), _jsxs("div", { className: "template-editor__audiences", children: [globalState.targetAudiences.map((audience) => (_jsxs("span", { className: "template-editor__audience-tag", style: audience.color
+                                        }, children: [!formData.thumbnailUrl && (_jsxs("div", { className: "template-editor__thumbnail-placeholder", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }), _jsx("span", { children: "Add Thumbnail" })] })), formData.thumbnailUrl && (_jsx("div", { className: `template-editor__status-badge template-editor__status-badge--${currentStatus?.color}`, children: currentStatus?.label }))] }), _jsx("div", { className: "template-editor__thumbnail-input", children: _jsx("input", { type: "text", value: formData.thumbnailUrl, onChange: (e) => handleFieldChange("thumbnailUrl", e.target.value), onBlur: handleInfoBlur, placeholder: "https://example.com/image.jpg", className: "template-editor__input template-editor__input--sm" }) })] }), _jsxs("div", { className: "template-editor__identity", children: [_jsxs("div", { className: "template-editor__title-row", children: [_jsx("input", { type: "text", value: formData.title, onChange: (e) => handleFieldChange("title", e.target.value), onBlur: handleInfoBlur, className: "template-editor__title-input", placeholder: "Product Title" }), _jsxs("div", { className: "template-editor__status-select", children: [_jsx("select", { value: formData.status, onChange: (e) => handleStatusChange(e.target.value), className: "template-editor__select", "data-status": currentStatus?.color, children: STATUS_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("span", { className: `template-editor__status-indicator template-editor__status-indicator--${currentStatus?.color}` })] })] }), _jsx("input", { type: "text", value: formData.subtitle, onChange: (e) => handleFieldChange("subtitle", e.target.value), onBlur: handleInfoBlur, className: "template-editor__title-input", placeholder: "Subtitle / Tagline", style: {
+                                            fontSize: "0.95rem",
+                                            fontWeight: 400,
+                                            color: "var(--rt-slate-600, #475569)",
+                                            marginTop: "-4px",
+                                        } }), _jsxs("div", { className: "template-editor__audiences", children: [globalState.targetAudiences.map((audience) => (_jsxs("span", { className: "template-editor__audience-tag", style: audience.color
                                                     ? {
                                                         backgroundColor: `${audience.color}15`,
                                                         borderColor: `${audience.color}40`,
@@ -431,7 +443,37 @@ export function TemplateInfo({ document, dispatch }) {
                                                                 handleAddAudience(newAudienceLabel);
                                                             if (e.key === "Escape")
                                                                 setShowAudienceInput(false);
-                                                        }, placeholder: "Audience name...", className: "template-editor__audience-input", autoFocus: true }), _jsx("button", { type: "button", onClick: () => handleAddAudience(newAudienceLabel), className: "template-editor__audience-add-btn", children: "Add" })] })) : (_jsxs("button", { type: "button", onClick: () => setShowAudienceInput(true), className: "template-editor__add-audience-btn", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 5v14M5 12h14", strokeWidth: "2" }) }), "Add Audience"] }))] }), availablePresets.length > 0 && (_jsxs("div", { className: "template-editor__audience-presets", children: [_jsx("span", { className: "template-editor__presets-label", children: "Quick add:" }), availablePresets.slice(0, 4).map((preset) => (_jsx("button", { type: "button", onClick: () => handleAddAudience(preset.label, preset.color), className: "template-editor__preset-btn", style: { color: preset.color }, children: preset.label }, preset.label)))] })), _jsx("textarea", { value: formData.summary, onChange: (e) => handleFieldChange("summary", e.target.value), onBlur: handleInfoBlur, className: "template-editor__summary", placeholder: "Brief summary of your product...", rows: 2 })] })] }), _jsxs("section", { className: "template-editor__card template-editor__card--full", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--violet", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h10" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Description" }), _jsx("p", { className: "template-editor__card-subtitle", children: "Detailed description of your product" })] })] }), _jsx(MarkdownEditor, { label: "", height: 350, value: formData.description, onChange: (value) => handleFieldChange("description", value), onBlur: handleInfoBlur })] }), _jsxs("section", { className: "template-editor__card template-editor__card--full", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--indigo", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h10M4 18h6" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Expandable Content Sections" }), _jsx("p", { className: "template-editor__card-subtitle", children: "Add long-form article content with expandable titles" })] })] }), _jsx("div", { className: "template-editor__sections-list", children: sortedSections.map((section, index) => (_jsx("div", { className: `template-editor__section-item ${editingSectionId === section.id ? "template-editor__section-item--editing" : ""}`, children: editingSectionId === section.id ? (_jsxs("div", { className: "template-editor__section-edit-form", children: [_jsx("input", { type: "text", value: editingSectionTitle, onChange: (e) => setEditingSectionTitle(e.target.value), className: "template-editor__section-edit-title", placeholder: "Section title", autoFocus: true }), _jsx("textarea", { value: editingSectionContent, onChange: (e) => setEditingSectionContent(e.target.value), className: "template-editor__section-edit-content", placeholder: "Section content...", rows: 6 }), _jsxs("div", { className: "template-editor__section-edit-actions", children: [_jsx("button", { type: "button", onClick: handleSaveSectionEdit, className: "template-editor__section-save-btn", children: "Save" }), _jsx("button", { type: "button", onClick: handleCancelSectionEdit, className: "template-editor__section-cancel-btn", children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "template-editor__section-reorder", children: [_jsx("button", { type: "button", onClick: () => handleMoveSection(index, "up"), className: "template-editor__section-reorder-btn", disabled: index === 0, title: "Move up", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 15l-6-6-6 6" }) }) }), _jsx("button", { type: "button", onClick: () => handleMoveSection(index, "down"), className: "template-editor__section-reorder-btn", disabled: index === sortedSections.length - 1, title: "Move down", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), _jsx("button", { type: "button", onClick: () => toggleSectionExpanded(section.id), className: "template-editor__section-toggle", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: `template-editor__section-chevron ${expandedSections.has(section.id) ? "template-editor__section-chevron--expanded" : ""}`, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) }), _jsxs("div", { className: "template-editor__section-main", children: [_jsxs("div", { className: "template-editor__section-header", onClick: () => toggleSectionExpanded(section.id), children: [_jsx("span", { className: "template-editor__section-title", children: section.title }), _jsx("span", { className: "template-editor__section-preview", children: section.content.length > 80
+                                                        }, placeholder: "Audience name...", className: "template-editor__audience-input", autoFocus: true }), _jsx("button", { type: "button", onClick: () => handleAddAudience(newAudienceLabel), className: "template-editor__audience-add-btn", children: "Add" })] })) : (_jsxs("button", { type: "button", onClick: () => setShowAudienceInput(true), className: "template-editor__add-audience-btn", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 5v14M5 12h14", strokeWidth: "2" }) }), "Add Audience"] }))] }), availablePresets.length > 0 && (_jsxs("div", { className: "template-editor__audience-presets", children: [_jsx("span", { className: "template-editor__presets-label", children: "Quick add:" }), availablePresets.slice(0, 4).map((preset) => (_jsx("button", { type: "button", onClick: () => handleAddAudience(preset.label, preset.color), className: "template-editor__preset-btn", style: { color: preset.color }, children: preset.label }, preset.label)))] })), _jsx("textarea", { value: formData.summary, onChange: (e) => handleFieldChange("summary", e.target.value), onBlur: handleInfoBlur, className: "template-editor__summary", placeholder: "Brief summary of your product...", rows: 2 }), _jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "8px",
+                                            marginTop: "8px",
+                                        }, children: [_jsx("label", { style: {
+                                                    fontSize: "0.75rem",
+                                                    fontWeight: 600,
+                                                    textTransform: "uppercase",
+                                                    letterSpacing: "0.05em",
+                                                    color: "var(--rt-slate-500, #64748b)",
+                                                    whiteSpace: "nowrap",
+                                                }, children: "Sort Weight" }), _jsx("input", { type: "number", value: globalState.weight ?? "", onChange: (e) => {
+                                                    const val = e.target.value === "" ? null : parseInt(e.target.value, 10);
+                                                    dispatch(setWeight({
+                                                        weight: Number.isNaN(val) ? null : val,
+                                                        lastModified: new Date().toISOString(),
+                                                    }));
+                                                }, placeholder: "\u2014", style: {
+                                                    width: "72px",
+                                                    padding: "4px 8px",
+                                                    fontSize: "0.8125rem",
+                                                    border: "1px solid var(--rt-slate-200, #e2e8f0)",
+                                                    borderRadius: "6px",
+                                                    outline: "none",
+                                                    textAlign: "center",
+                                                    fontFamily: "var(--rt-font-mono, monospace)",
+                                                } }), _jsx("span", { style: {
+                                                    fontSize: "0.6875rem",
+                                                    color: "var(--rt-slate-400, #94a3b8)",
+                                                }, children: "Lower = higher priority" })] })] })] }), _jsxs("section", { className: "template-editor__card template-editor__card--full", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--violet", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h10" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Description" }), _jsx("p", { className: "template-editor__card-subtitle", children: "Detailed description of your product" })] })] }), _jsx(MarkdownEditor, { label: "", height: 350, value: formData.description, onChange: (value) => handleFieldChange("description", value), onBlur: handleInfoBlur })] }), _jsxs("section", { className: "template-editor__card template-editor__card--full", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--indigo", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h10M4 18h6" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Expandable Content Sections" }), _jsx("p", { className: "template-editor__card-subtitle", children: "Add long-form article content with expandable titles" })] })] }), _jsx("div", { className: "template-editor__sections-list", children: sortedSections.map((section, index) => (_jsx("div", { className: `template-editor__section-item ${editingSectionId === section.id ? "template-editor__section-item--editing" : ""}`, children: editingSectionId === section.id ? (_jsxs("div", { className: "template-editor__section-edit-form", children: [_jsx("input", { type: "text", value: editingSectionTitle, onChange: (e) => setEditingSectionTitle(e.target.value), className: "template-editor__section-edit-title", placeholder: "Section title", autoFocus: true }), _jsx("textarea", { value: editingSectionContent, onChange: (e) => setEditingSectionContent(e.target.value), className: "template-editor__section-edit-content", placeholder: "Section content...", rows: 6 }), _jsxs("div", { className: "template-editor__section-edit-actions", children: [_jsx("button", { type: "button", onClick: handleSaveSectionEdit, className: "template-editor__section-save-btn", children: "Save" }), _jsx("button", { type: "button", onClick: handleCancelSectionEdit, className: "template-editor__section-cancel-btn", children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "template-editor__section-reorder", children: [_jsx("button", { type: "button", onClick: () => handleMoveSection(index, "up"), className: "template-editor__section-reorder-btn", disabled: index === 0, title: "Move up", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 15l-6-6-6 6" }) }) }), _jsx("button", { type: "button", onClick: () => handleMoveSection(index, "down"), className: "template-editor__section-reorder-btn", disabled: index === sortedSections.length - 1, title: "Move down", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), _jsx("button", { type: "button", onClick: () => toggleSectionExpanded(section.id), className: "template-editor__section-toggle", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: `template-editor__section-chevron ${expandedSections.has(section.id) ? "template-editor__section-chevron--expanded" : ""}`, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) }), _jsxs("div", { className: "template-editor__section-main", children: [_jsxs("div", { className: "template-editor__section-header", onClick: () => toggleSectionExpanded(section.id), children: [_jsx("span", { className: "template-editor__section-title", children: section.title }), _jsx("span", { className: "template-editor__section-preview", children: section.content.length > 80
                                                                     ? `${section.content.substring(0, 80)}...`
                                                                     : section.content })] }), expandedSections.has(section.id) && (_jsx("div", { className: "template-editor__section-content", children: section.content }))] }), _jsxs("div", { className: "template-editor__section-actions", children: [_jsx("button", { type: "button", onClick: () => handleStartEditSection(section), className: "template-editor__section-action-btn", title: "Edit section", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" }), _jsx("path", { d: "M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" })] }) }), _jsx("button", { type: "button", onClick: () => handleDeleteContentSection(section.id), className: "template-editor__section-action-btn template-editor__section-action-btn--delete", title: "Delete section", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" }) }) })] })] })) }, section.id))) }), _jsxs("div", { className: "template-editor__section-add-form", children: [_jsx("input", { type: "text", value: newSectionTitle, onChange: (e) => setNewSectionTitle(e.target.value), placeholder: "New section title...", className: "template-editor__section-new-title" }), _jsx("textarea", { value: newSectionContent, onChange: (e) => setNewSectionContent(e.target.value), placeholder: "Section content (long-form article content)...", className: "template-editor__section-new-content", rows: 4 }), (newSectionTitle || newSectionContent) && (_jsxs("button", { type: "button", onClick: handleAddContentSection, className: "template-editor__section-add-btn", disabled: !newSectionTitle.trim() || !newSectionContent.trim(), children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 5v14M5 12h14", strokeWidth: "2" }) }), "Add Section"] }))] })] }), _jsxs("section", { className: "template-editor__card template-editor__card--full", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--sky", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }), _jsx("path", { d: "M12 17h.01" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Frequently Asked Questions" }), _jsx("p", { className: "template-editor__card-subtitle", children: "Common questions and answers about this product" })] })] }), _jsx("div", { className: "template-editor__faq-list", children: sortedFaqs.map((faq, index) => (_jsx("div", { className: `template-editor__faq-item ${editingFaqId === faq.id ? "template-editor__faq-item--editing" : ""}`, children: editingFaqId === faq.id ? (_jsxs("div", { className: "template-editor__faq-edit-form", children: [_jsx("input", { type: "text", value: editingFaqQuestion, onChange: (e) => setEditingFaqQuestion(e.target.value), className: "template-editor__faq-edit-question", placeholder: "Question", autoFocus: true }), _jsx("textarea", { value: editingFaqAnswer, onChange: (e) => setEditingFaqAnswer(e.target.value), className: "template-editor__faq-edit-answer", placeholder: "Answer", rows: 3 }), _jsxs("div", { className: "template-editor__faq-edit-actions", children: [_jsx("button", { type: "button", onClick: handleSaveFaqEdit, className: "template-editor__faq-save-btn", children: "Save" }), _jsx("button", { type: "button", onClick: handleCancelFaqEdit, className: "template-editor__faq-cancel-btn", children: "Cancel" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "template-editor__faq-reorder", children: [_jsx("button", { type: "button", onClick: () => handleMoveFaq(index, "up"), className: "template-editor__faq-reorder-btn", disabled: index === 0, title: "Move up", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 15l-6-6-6 6" }) }) }), _jsx("button", { type: "button", onClick: () => handleMoveFaq(index, "down"), className: "template-editor__faq-reorder-btn", disabled: index === sortedFaqs.length - 1, title: "Move down", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), _jsx("div", { className: "template-editor__faq-number", children: index + 1 }), _jsxs("div", { className: "template-editor__faq-content", children: [_jsx("div", { className: "template-editor__faq-question", children: faq.question }), _jsx("div", { className: "template-editor__faq-answer", children: faq.answer })] }), _jsxs("div", { className: "template-editor__faq-actions", children: [_jsx("button", { type: "button", onClick: () => handleStartEditFaq(faq), className: "template-editor__faq-action-btn", title: "Edit FAQ", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" }), _jsx("path", { d: "M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" })] }) }), _jsx("button", { type: "button", onClick: () => handleDeleteFaq(faq.id), className: "template-editor__faq-action-btn template-editor__faq-action-btn--delete", title: "Delete FAQ", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" }) }) })] })] })) }, faq.id))) }), _jsxs("div", { className: "template-editor__faq-add-form", children: [_jsx("input", { type: "text", value: newFaqQuestion, onChange: (e) => setNewFaqQuestion(e.target.value), placeholder: "New question...", className: "template-editor__faq-new-question" }), _jsx("textarea", { value: newFaqAnswer, onChange: (e) => setNewFaqAnswer(e.target.value), placeholder: "Answer to the question...", className: "template-editor__faq-new-answer", rows: 2 }), (newFaqQuestion || newFaqAnswer) && (_jsxs("button", { type: "button", onClick: handleAddFaq, className: "template-editor__faq-add-btn", disabled: !newFaqQuestion.trim() || !newFaqAnswer.trim(), children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 5v14M5 12h14", strokeWidth: "2" }) }), "Add FAQ"] }))] })] }), _jsxs("div", { className: "template-editor__section-divider", children: [_jsxs("div", { className: "template-editor__section-badge", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }), _jsx("path", { d: "M2 17l10 5 10-5" }), _jsx("path", { d: "M2 12l10 5 10-5" })] }), "Services Information"] }), _jsx("div", { className: "template-editor__section-divider-line" })] }), _jsxs("div", { className: "template-editor__grid", children: [_jsxs("section", { className: "template-editor__card", children: [_jsxs("div", { className: "template-editor__card-header", children: [_jsx("div", { className: "template-editor__card-icon template-editor__card-icon--emerald", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }), _jsx("path", { d: "M2 17l10 5 10-5" }), _jsx("path", { d: "M2 12l10 5 10-5" })] }) }), _jsxs("div", { children: [_jsx("h3", { className: "template-editor__card-title", children: "Formation & Setup" }), _jsx("p", { className: "template-editor__card-subtitle", children: "One-time setup services" })] }), _jsxs("button", { type: "button", onClick: () => setShowSetupTemplates(!showSetupTemplates), className: `template-editor__templates-toggle ${showSetupTemplates ? "template-editor__templates-toggle--active" : ""}`, children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" }) }), "Templates"] })] }), showSetupTemplates && (_jsx("div", { className: "template-editor__templates-panel", children: Object.entries(SETUP_SERVICE_TEMPLATES).map(([category, templates]) => (_jsxs("div", { className: "template-editor__template-category", children: [_jsx("span", { className: "template-editor__template-category-label", children: category }), _jsx("div", { className: "template-editor__template-items", children: templates.map((template) => {
                                                         const isAdded = globalState.setupServices.includes(template.title);

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceTemplateSelector.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ResourceTemplateSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,kEAAkE,CAAC;AAuF1E,UAAU,6BAA6B;IACrC,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,QAAQ,GACT,EAAE,6BAA6B,2CA0kB/B"}
+{"version":3,"file":"ResourceTemplateSelector.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ResourceTemplateSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,kEAAkE,CAAC;AAyF1E,UAAU,6BAA6B;IACrC,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,QAAQ,GACT,EAAE,6BAA6B,2CA0kB/B"}

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

@@ -48,6 +48,8 @@ function normalizeRemoteTemplate(remote) {
                 optionGroups: [],
                 faqFields: [],
                 contentSections: [],
+                weight: null,
+                subtitle: null,
             },
         },
     };

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

@@ -1 +1 @@
-{"version":3,"file":"ServiceCatalog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServiceCatalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAMtB,MAAM,kEAAkE,CAAC;AAgH1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAokEzE"}
+{"version":3,"file":"ServiceCatalog.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/ServiceCatalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAMtB,MAAM,kEAAkE,CAAC;AAgH1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA8lEzE"}

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

@@ -724,11 +724,14 @@ export function ServiceCatalog({ document, dispatch }) {
                                                                                             }), placeholder: "0", step: "0.1", min: "0", max: "100", className: "flex-1 py-1.5 px-2 pr-1 border-none text-sm text-slate-700 bg-transparent outline-none min-w-0 placeholder:text-slate-400", style: fontMono }), _jsx("span", { className: "px-3 py-2.5 pl-2 text-sm font-medium text-slate-400 bg-slate-50 whitespace-nowrap select-none", children: "%" })] })] })] })), effective !== null && discountPct > 0 && (_jsxs("div", { className: "flex items-center gap-2 mt-1.5 px-2.5 py-1.5 bg-emerald-50 rounded-md", children: [_jsx("span", { className: "text-[0.8125rem] text-emerald-600", children: "\u2192" }), _jsx("span", { className: "text-sm font-bold text-emerald-700", style: fontMono, children: formatPrice(effective, "USD") }), savingsPct > 0 && (_jsxs("span", { className: "ml-auto text-[0.6875rem] font-bold text-emerald-600 bg-emerald-100 px-2 py-0.5 rounded-full", style: fontMono, children: [savingsPct, "% off"] }))] }))] }, cycle));
                                                     }) })] }))] })), editGroupType === "setup" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.05em] text-slate-500", children: "One-time Fee" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-slate-500", children: "$" }), _jsx("input", { type: "number", value: editGroupPrice, onChange: (e) => setEditGroupPrice(e.target.value), placeholder: "0", className: "flex-1 px-2.5 py-2 text-sm text-slate-800 bg-white border-[1.5px] border-slate-200 rounded-md focus:outline-none focus:border-violet-500 focus:shadow-[0_0_0_2px_rgb(237,233,254)]", style: fontSans, step: "0.01" })] })] }), tiers.length > 0 && parseFloat(editGroupPrice) > 0 && (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("span", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.05em] text-slate-500", children: "Setup Fee Discounts by Tier & Billing Cycle" }), _jsx("div", { className: "flex gap-0 border-b border-slate-200 mb-3 overflow-x-auto", children: tiers.map((tier) => (_jsxs("button", { onClick: () => setEditTierTab(tier.id), className: `flex items-center gap-1.5 px-3 py-2 text-xs font-medium bg-none border-none border-b-2 cursor-pointer whitespace-nowrap transition-all duration-150 ${editTierTab === tier.id
                                                             ? "text-violet-700 border-b-violet-600 font-semibold"
-                                                            : "text-slate-500 border-b-transparent hover:text-slate-700 hover:bg-slate-50"} ${tier.isCustomPricing ? "italic" : ""}`, style: fontSans, children: [tier.name, tier.isCustomPricing && (_jsx("span", { className: "text-[0.5625rem] font-semibold uppercase tracking-[0.04em] text-amber-600 bg-amber-50 px-[5px] py-px rounded-full", children: "Custom" }))] }, tier.id))) }), editTierTab &&
+                                                            : "text-slate-500 border-b-transparent hover:text-slate-700 hover:bg-slate-50"} ${tier.isCustomPricing ? "italic" : ""}`, style: fontSans, children: [tier.name, tier.excludeFromSetupFee && (_jsx("span", { className: "text-[0.5625rem] font-semibold uppercase tracking-[0.04em] text-teal-600 bg-teal-50 px-[5px] py-px rounded-full", children: "No Fee" })), tier.isCustomPricing && (_jsx("span", { className: "text-[0.5625rem] font-semibold uppercase tracking-[0.04em] text-amber-600 bg-amber-50 px-[5px] py-px rounded-full", children: "Custom" }))] }, tier.id))) }), editTierTab &&
                                                     (() => {
                                                         const activeTier = tiers.find((t) => t.id === editTierTab);
                                                         if (!activeTier)
                                                             return null;
+                                                        if (activeTier.excludeFromSetupFee) {
+                                                            return (_jsxs("div", { className: "flex items-center gap-2 p-3 bg-teal-50 border border-dashed border-teal-300 rounded-md text-xs text-teal-700 italic", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: _jsx("path", { d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { children: "No setup fee \u2014 this tier is excluded from setup fees." })] }));
+                                                        }
                                                         if (activeTier.isCustomPricing) {
                                                             return (_jsxs("div", { className: "flex items-center gap-2 p-3 bg-slate-50 border border-dashed border-slate-300 rounded-md text-xs text-slate-500 italic", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: _jsx("path", { d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { children: "Custom pricing tier \u2014 discounts negotiated per customer." })] }));
                                                         }

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

@@ -1 +1 @@
-{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAS3B,MAAM,kEAAkE,CAAC;AA2B1E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAgDD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAi8E/D"}
+{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAS3B,MAAM,kEAAkE,CAAC;AA2B1E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAgDD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAq8E/D"}

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

@@ -867,7 +867,9 @@ export function TheMatrix({ document, dispatch }) {
                                                                 }
                                                                 : {}),
                                                         }, children: idx === selectedTierIdx
-                                                            ? `${formatPrice(ab.setupCost, ab.setupCostCurrency || "USD")} one-time`
+                                                            ? tier.excludeFromSetupFee
+                                                                ? "No setup fee"
+                                                                : `${formatPrice(ab.setupCost, ab.setupCostCurrency || "USD")} one-time`
                                                             : null }, tier.id)))] }, `addon-setup-${ab.optionGroupId}`))), (() => {
                                                 const setupBds = tierBreakdowns[selectedTierIdx]?.setupGroupBreakdowns ?? [];
                                                 const totalSetupBase = setupBds.reduce((sum, s) => sum +
@@ -885,9 +887,11 @@ export function TheMatrix({ document, dispatch }) {
                                                                     }
                                                                     : {}),
                                                             }, children: idx === selectedTierIdx
-                                                                ? hasDiscount
-                                                                    ? `${formatPrice(totalSetupEffective, "USD")} one-time`
-                                                                    : `${formatPrice(totalSetupBase, "USD")} one-time`
+                                                                ? tier.excludeFromSetupFee
+                                                                    ? "No setup fee"
+                                                                    : hasDiscount
+                                                                        ? `${formatPrice(totalSetupEffective, "USD")} one-time`
+                                                                        : `${formatPrice(totalSetupBase, "USD")} one-time`
                                                                 : null }, 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: "fixed inset-0 bg-slate-900/75 backdrop-blur-sm flex items-center justify-center z-[100]", style: { animation: "modal-backdrop 0.2s ease-out" }, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-h-[85vh] overflow-y-auto", style: {
                                 width: "min(32rem, calc(100vw - 2rem))",
@@ -1129,7 +1133,7 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                     }
                     const curr = group.currency || "USD";
                     const hasDiscount = effectivePrice !== basePrice;
-                    return (_jsxs("tr", { className: "bg-slate-50 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-200 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-50", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: hasDiscount ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                    return (_jsxs("tr", { className: "bg-slate-50 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-200 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-50", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: selectedTier?.excludeFromSetupFee ? (_jsx("span", { className: "text-slate-400 italic", children: "No setup fee for this tier" })) : hasDiscount ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
                                                 textDecoration: "line-through",
                                                 opacity: 0.5,
                                                 marginRight: 6,

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

@@ -1 +1 @@
-{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAItB,MAAM,kEAAkE,CAAC;AAW1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AA6ED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA0WzE"}
+{"version":3,"file":"TierDefinition.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TierDefinition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAItB,MAAM,kEAAkE,CAAC;AAY1E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AA6ED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAiYzE"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useMemo, useState, useCallback } from "react";
 import { generateId } from "document-model/core";
-import { addTier, updateTier, deleteTier, setAvailableBillingCycles, } from "../../../document-models/service-offering/v1/gen/creators.js";
+import { addTier, updateTier, deleteTier, setAvailableBillingCycles, reorderTiers, } from "../../../document-models/service-offering/v1/gen/creators.js";
 import { calculateTierRecurringPrice, formatPrice } from "./pricing-utils.js";
 import { InfoIcon } from "./InfoIcon.js";
 import { ConfirmDialog } from "./ConfirmDialog.js";
@@ -119,6 +119,20 @@ export function TierDefinition({ document, dispatch }) {
             }));
         });
     };
+    const handleMoveTier = useCallback((tierIndex, direction) => {
+        const newIndex = direction === "left" ? tierIndex - 1 : tierIndex + 1;
+        if (newIndex < 0 || newIndex >= tiers.length)
+            return;
+        const reordered = tiers.map((t) => t.id);
+        [reordered[tierIndex], reordered[newIndex]] = [
+            reordered[newIndex],
+            reordered[tierIndex],
+        ];
+        dispatch(reorderTiers({
+            tierIds: reordered,
+            lastModified: new Date().toISOString(),
+        }));
+    }, [tiers, dispatch]);
     const getTierAccent = (index) => TIER_ACCENTS[index % TIER_ACCENTS.length];
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-6", children: [tiers.length === 0 && (_jsxs("div", { className: "rounded-xl p-6 mb-6 border border-violet-100", style: {
                             background: "linear-gradient(135deg, rgb(245 243 255) 0%, rgb(240 249 255) 100%)",
@@ -149,7 +163,7 @@ export function TierDefinition({ document, dispatch }) {
                                                 lastModified: new Date().toISOString(),
                                             }));
                                         }, children: opt.label }, opt.value));
-                                }) }), (state.global.availableBillingCycles ?? []).length === 0 && (_jsx("div", { className: "text-[0.6875rem] text-rose-600 py-1.5 px-2.5 bg-rose-50 rounded-md mt-2", children: "Select at least one billing cycle to enable pricing" }))] }), _jsxs("div", { className: "so-scrollbar-h flex flex-nowrap gap-6 overflow-x-auto overflow-y-visible pb-4", style: { scrollBehavior: "smooth", WebkitOverflowScrolling: "touch" }, children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id), isRecommended: tier.mostPopular, regularGroups: regularGroups }, tier.id))), isAddingTier ? (_jsxs("div", { className: "w-80 bg-white border-2 border-violet-200 rounded-xl p-6", style: { animation: "tier-slide-up 0.2s ease-out" }, children: [_jsx("h3", { className: "text-base font-bold text-slate-900 mb-5", style: { fontFamily: fontSans }, children: "New Subscription Tier" }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-500 mb-1.5", style: { fontFamily: fontMono }, children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "w-full text-base font-semibold text-slate-900 bg-white border border-slate-200 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-400 focus:shadow-[0_0_0_3px_rgb(237_233_254)] placeholder:font-normal placeholder:text-slate-400", style: { fontFamily: fontSans }, autoFocus: true })] }), _jsxs("label", { className: "flex items-center gap-2.5 mb-4 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
+                                }) }), (state.global.availableBillingCycles ?? []).length === 0 && (_jsx("div", { className: "text-[0.6875rem] text-rose-600 py-1.5 px-2.5 bg-rose-50 rounded-md mt-2", children: "Select at least one billing cycle to enable pricing" }))] }), _jsxs("div", { className: "so-scrollbar-h flex flex-nowrap gap-6 overflow-x-auto overflow-y-visible pb-4", style: { scrollBehavior: "smooth", WebkitOverflowScrolling: "touch" }, children: [tiers.map((tier, index) => (_jsx(TierCard, { tier: tier, accent: getTierAccent(index), dispatch: dispatch, onDelete: () => handleDeleteTier(tier.id), isRecommended: tier.mostPopular, regularGroups: regularGroups, onMoveLeft: () => handleMoveTier(index, "left"), onMoveRight: () => handleMoveTier(index, "right"), isFirst: index === 0, isLast: index === tiers.length - 1 }, tier.id))), isAddingTier ? (_jsxs("div", { className: "w-80 bg-white border-2 border-violet-200 rounded-xl p-6", style: { animation: "tier-slide-up 0.2s ease-out" }, children: [_jsx("h3", { className: "text-base font-bold text-slate-900 mb-5", style: { fontFamily: fontSans }, children: "New Subscription Tier" }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-500 mb-1.5", style: { fontFamily: fontMono }, children: "Tier Name" }), _jsx("input", { type: "text", value: newTier.name, onChange: (e) => setNewTier({ ...newTier, name: e.target.value }), placeholder: "e.g., Basic, Professional", className: "w-full text-base font-semibold text-slate-900 bg-white border border-slate-200 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-400 focus:shadow-[0_0_0_3px_rgb(237_233_254)] placeholder:font-normal placeholder:text-slate-400", style: { fontFamily: fontSans }, autoFocus: true })] }), _jsxs("label", { className: "flex items-center gap-2.5 mb-4 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: newTier.isCustomPricing, onChange: (e) => setNewTier({
                                                     ...newTier,
                                                     isCustomPricing: e.target.checked,
                                                 }), className: "w-[1.125rem] h-[1.125rem] cursor-pointer", style: { accentColor: "#f59e0b" } }), _jsx("span", { className: "text-[0.8125rem] text-slate-600", children: "Custom Pricing (price varies per client)" })] }), _jsxs("div", { className: "flex gap-2.5 mt-5", children: [_jsx("button", { onClick: handleAddTier, disabled: !newTier.name.trim(), className: "flex-1 py-2.5 px-4 text-sm font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-violet-600 text-white border-none hover:enabled:bg-violet-700 disabled:bg-slate-200 disabled:text-slate-400 disabled:cursor-not-allowed", style: { fontFamily: fontSans }, children: "Create Tier" }), _jsx("button", { onClick: () => {
@@ -161,7 +175,7 @@ export function TierDefinition({ document, dispatch }) {
                                                     });
                                                 }, className: "flex-1 py-2.5 px-4 text-sm font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-slate-100 text-slate-700 border-none hover:bg-slate-200", style: { fontFamily: fontSans }, children: "Cancel" })] })] })) : (_jsxs("button", { onClick: () => setIsAddingTier(true), className: "group w-80 min-h-[280px] bg-white border-2 border-dashed border-slate-200 rounded-xl flex flex-col items-center justify-center gap-3 cursor-pointer transition-all duration-200 hover:border-violet-300 hover:bg-violet-50", children: [_jsx("div", { className: "w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center transition-all duration-200 group-hover:bg-violet-100", children: _jsx("svg", { className: "w-6 h-6 text-slate-400 transition-all duration-150 group-hover:text-violet-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }) }), _jsx("span", { className: "text-[0.9375rem] font-semibold text-slate-500 transition-all duration-150 group-hover:text-violet-600", style: { fontFamily: fontSans }, children: "Add Subscription Tier" })] }))] }), _jsxs("div", { className: "flex items-start gap-3.5 p-4 px-5 bg-amber-50 border border-amber-200 rounded-xl", children: [_jsx("svg", { className: "shrink-0 w-5 h-5 text-amber-600 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-semibold text-amber-800 mb-1", style: { fontFamily: fontSans }, children: "Pricing is managed at the option group level" }), _jsx("p", { className: "text-[0.8125rem] text-amber-700 leading-relaxed", children: "Billing cycles and pricing are configured per option group in the Service Catalog. Setup fees, recurring prices, and billing cycles apply to all tiers within each group." })] })] })] }), pendingDeleteTierId && (_jsx(ConfirmDialog, { title: "Delete this tier?", message: "This will remove the tier and all its pricing configuration. This action cannot be undone.", confirmLabel: "Delete Tier", variant: "danger", onConfirm: confirmDeleteTier, onCancel: () => setPendingDeleteTierId(null) }))] }));
 }
-const TierCard = memo(function TierCard({ tier, accent, dispatch, onDelete, isRecommended, regularGroups, }) {
+const TierCard = memo(function TierCard({ tier, accent, dispatch, onDelete, isRecommended, regularGroups, onMoveLeft, onMoveRight, isFirst, isLast, }) {
     const [localName, setLocalName] = useState(tier.name);
     const [localDescription, setLocalDescription] = useState(tier.description || "");
     const isCustomPricing = tier.isCustomPricing ?? false;
@@ -204,7 +218,13 @@ const TierCard = memo(function TierCard({ tier, accent, dispatch, onDelete, isRe
                         mostPopular: true,
                         lastModified: new Date().toISOString(),
                     }));
-                }, children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Set as Popular"] })), _jsx("div", { className: "h-1 w-full", style: { background: accent.color } }), _jsxs("div", { className: "so-scrollbar-v p-6 overflow-y-auto flex-1", children: [_jsxs("div", { className: "flex items-start justify-between mb-5", children: [_jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "w-full text-[1.375rem] font-bold text-slate-900 bg-transparent border-none border-b-2 border-b-transparent pb-1 pl-0 transition-all duration-150 outline-none hover:border-b-slate-200 focus:border-b-violet-500", style: { fontFamily: fontSans } })] }), _jsx("button", { onClick: onDelete, className: "p-1.5 text-slate-400 bg-transparent border-none rounded-md cursor-pointer transition-all duration-150 hover:text-rose-500 hover:bg-rose-50", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "flex items-center gap-2 py-3 px-4 bg-amber-50 border border-amber-200 rounded-[10px] mb-4", children: [_jsx("svg", { className: "w-5 h-5 text-amber-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "block text-[0.8125rem] font-semibold text-amber-800", children: "Custom Pricing" }), _jsx("span", { className: "text-[0.6875rem] text-amber-600", children: "Price varies per client" })] })] })), !isCustomPricing && (_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "mb-1.5", children: _jsxs("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: ["Recurring Price", _jsx(InfoIcon, { content: "This price is automatically calculated from the services and pricing configured in the Service Catalog. It is read-only \u2014 to change it, adjust pricing in your option groups." })] }) }), _jsxs("div", { className: "flex items-center gap-2 py-3.5 px-4 bg-slate-50 rounded-[10px] border border-slate-100", children: [_jsx("span", { children: "$" }), _jsx("span", { className: "text-[1.375rem] font-semibold text-emerald-700", style: { fontFamily: fontMono }, children: formatPrice(calculatedPrice.monthlyTotal).replace("$", "") }), _jsx("span", { className: "text-sm text-emerald-600 font-medium", children: "/mo" })] }), calculatedPrice.groupBreakdown.length > 0 && (_jsxs("div", { className: "mt-2 py-2 px-2.5 bg-slate-50 rounded-md border border-slate-100", children: [_jsxs("span", { className: "block text-[0.625rem] font-medium text-slate-500 uppercase tracking-wide mb-1.5", children: ["Sum of ", calculatedPrice.groupBreakdown.length, " service group", calculatedPrice.groupBreakdown.length !== 1 ? "s" : ""] }), calculatedPrice.groupBreakdown.map((g) => (_jsxs("div", { className: "flex items-center justify-between py-[0.1875rem]", children: [_jsxs("span", { className: `flex items-center gap-1 text-xs ${g.hasPrice ? "text-slate-600" : "text-amber-600"}`, children: [!g.hasPrice && (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3 h-3 text-amber-500", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })), g.groupName] }), _jsx("span", { className: `text-xs font-medium ${g.hasPrice ? "text-slate-700" : "text-amber-500 italic"}`, style: { fontFamily: fontMono }, children: g.hasPrice ? formatPrice(g.monthlyAmount) : "$0" })] }, g.groupId)))] })), calculatedPrice.missingPriceGroups.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5 mt-2 py-1.5 px-2 text-[0.6875rem] text-amber-700 bg-amber-50 border border-amber-200 rounded-md", children: [_jsx("svg", { className: "shrink-0 w-3.5 h-3.5 text-amber-500", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), _jsxs("span", { children: [calculatedPrice.missingPriceGroups.length, " group", calculatedPrice.missingPriceGroups.length !== 1
+                }, children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Set as Popular"] })), _jsx("div", { className: "h-1 w-full", style: { background: accent.color } }), _jsxs("div", { className: "so-scrollbar-v p-6 overflow-y-auto flex-1", children: [_jsxs("div", { className: "flex items-start justify-between mb-5", children: [_jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: "Tier Name" }), _jsx("input", { type: "text", value: localName, onChange: (e) => setLocalName(e.target.value), onBlur: handleNameBlur, className: "w-full text-[1.375rem] font-bold text-slate-900 bg-transparent border-none border-b-2 border-b-transparent pb-1 pl-0 transition-all duration-150 outline-none hover:border-b-slate-200 focus:border-b-violet-500", style: { fontFamily: fontSans } })] }), _jsx("button", { onClick: onDelete, className: "p-1.5 text-slate-400 bg-transparent border-none rounded-md cursor-pointer transition-all duration-150 hover:text-rose-500 hover:bg-rose-50", children: _jsx("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), isCustomPricing && (_jsxs("div", { className: "flex items-center gap-2 py-3 px-4 bg-amber-50 border border-amber-200 rounded-[10px] mb-4", children: [_jsx("svg", { className: "w-5 h-5 text-amber-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "block text-[0.8125rem] font-semibold text-amber-800", children: "Custom Pricing" }), _jsx("span", { className: "text-[0.6875rem] text-amber-600", children: "Price varies per client" })] })] })), _jsxs("label", { className: "flex items-center gap-2.5 mb-4 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: tier.excludeFromSetupFee ?? false, onChange: (e) => {
+                                    dispatch(updateTier({
+                                        id: tier.id,
+                                        excludeFromSetupFee: e.target.checked,
+                                        lastModified: new Date().toISOString(),
+                                    }));
+                                }, className: "w-[1.125rem] h-[1.125rem] cursor-pointer", style: { accentColor: "#0d9488" } }), _jsx("span", { className: "text-[0.8125rem] text-slate-600", children: "Exclude from setup fee" })] }), !isCustomPricing && (_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "mb-1.5", children: _jsxs("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: ["Recurring Price", _jsx(InfoIcon, { content: "This price is automatically calculated from the services and pricing configured in the Service Catalog. It is read-only \u2014 to change it, adjust pricing in your option groups." })] }) }), _jsxs("div", { className: "flex items-center gap-2 py-3.5 px-4 bg-slate-50 rounded-[10px] border border-slate-100", children: [_jsx("span", { children: "$" }), _jsx("span", { className: "text-[1.375rem] font-semibold text-emerald-700", style: { fontFamily: fontMono }, children: formatPrice(calculatedPrice.monthlyTotal).replace("$", "") }), _jsx("span", { className: "text-sm text-emerald-600 font-medium", children: "/mo" })] }), calculatedPrice.groupBreakdown.length > 0 && (_jsxs("div", { className: "mt-2 py-2 px-2.5 bg-slate-50 rounded-md border border-slate-100", children: [_jsxs("span", { className: "block text-[0.625rem] font-medium text-slate-500 uppercase tracking-wide mb-1.5", children: ["Sum of ", calculatedPrice.groupBreakdown.length, " service group", calculatedPrice.groupBreakdown.length !== 1 ? "s" : ""] }), calculatedPrice.groupBreakdown.map((g) => (_jsxs("div", { className: "flex items-center justify-between py-[0.1875rem]", children: [_jsxs("span", { className: `flex items-center gap-1 text-xs ${g.hasPrice ? "text-slate-600" : "text-amber-600"}`, children: [!g.hasPrice && (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3 h-3 text-amber-500", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })), g.groupName] }), _jsx("span", { className: `text-xs font-medium ${g.hasPrice ? "text-slate-700" : "text-amber-500 italic"}`, style: { fontFamily: fontMono }, children: g.hasPrice ? formatPrice(g.monthlyAmount) : "$0" })] }, g.groupId)))] })), calculatedPrice.missingPriceGroups.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5 mt-2 py-1.5 px-2 text-[0.6875rem] text-amber-700 bg-amber-50 border border-amber-200 rounded-md", children: [_jsx("svg", { className: "shrink-0 w-3.5 h-3.5 text-amber-500", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), _jsxs("span", { children: [calculatedPrice.missingPriceGroups.length, " group", calculatedPrice.missingPriceGroups.length !== 1
                                                 ? "s"
-                                                : "", " ", "without pricing (counted as $0)"] })] }))] })), _jsxs("div", { className: "mt-4", children: [_jsx("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "w-full text-[0.8125rem] text-slate-600 bg-slate-50 border border-slate-200 rounded-[10px] p-3 resize-none outline-none transition-all duration-150 focus:border-violet-400 focus:shadow-[0_0_0_3px_rgb(237_233_254)] placeholder:text-slate-400", style: { fontFamily: fontSans } })] })] }), _jsxs("div", { className: "flex items-center gap-2 py-4 px-6 bg-slate-50 border-t border-slate-100", children: [_jsx("svg", { className: "w-4 h-4 text-slate-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "text-xs text-slate-500", children: "Configure service levels in the Matrix view" })] })] }));
+                                                : "", " ", "without pricing (counted as $0)"] })] }))] })), _jsxs("div", { className: "mt-4", children: [_jsx("span", { className: "block text-[0.625rem] font-medium uppercase tracking-widest text-slate-400 mb-1.5", style: { fontFamily: fontMono }, children: "Description" }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: handleDescriptionBlur, placeholder: "Add a description...", rows: 2, className: "w-full text-[0.8125rem] text-slate-600 bg-slate-50 border border-slate-200 rounded-[10px] p-3 resize-none outline-none transition-all duration-150 focus:border-violet-400 focus:shadow-[0_0_0_3px_rgb(237_233_254)] placeholder:text-slate-400", style: { fontFamily: fontSans } })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3 px-6 bg-slate-50 border-t border-slate-100", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: onMoveLeft, disabled: isFirst, className: "p-1.5 rounded-md border-none cursor-pointer transition-all duration-150 bg-transparent text-slate-400 hover:enabled:text-violet-600 hover:enabled:bg-violet-50 disabled:opacity-30 disabled:cursor-not-allowed", title: "Move left", children: _jsx("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("button", { onClick: onMoveRight, disabled: isLast, className: "p-1.5 rounded-md border-none cursor-pointer transition-all duration-150 bg-transparent text-slate-400 hover:enabled:text-violet-600 hover:enabled:bg-violet-50 disabled:opacity-30 disabled:cursor-not-allowed", title: "Move right", children: _jsx("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), _jsx("span", { className: "text-[0.6875rem] text-slate-400", children: "Matrix view for service levels" })] })] }));
 });

package/dist/style.css

@@ -30,8 +30,12 @@
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
     --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-teal-50: oklch(98.4% 0.014 180.72);
     --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
     --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
     --color-sky-50: oklch(97.7% 0.013 236.62);
     --color-sky-100: oklch(95.1% 0.026 236.824);
     --color-sky-200: oklch(90.1% 0.058 230.902);
@@ -1126,6 +1130,9 @@
   .border-slate-400 {
     border-color: var(--color-slate-400);
   }
+  .border-teal-300 {
+    border-color: var(--color-teal-300);
+  }
   .border-teal-500 {
     border-color: var(--color-teal-500);
   }
@@ -1309,6 +1316,9 @@
       background-color: color-mix(in oklab, var(--color-slate-900) 75%, transparent);
     }
   }
+  .bg-teal-50 {
+    background-color: var(--color-teal-50);
+  }
   .bg-teal-100 {
     background-color: var(--color-teal-100);
   }
@@ -1862,6 +1872,12 @@
   .text-teal-500 {
     color: var(--color-teal-500);
   }
+  .text-teal-600 {
+    color: var(--color-teal-600);
+  }
+  .text-teal-700 {
+    color: var(--color-teal-700);
+  }
   .text-violet-500 {
     color: var(--color-violet-500);
   }
@@ -2845,6 +2861,15 @@
       }
     }
   }
+  .hover\:enabled\:bg-violet-50 {
+    &:hover {
+      @media (hover: hover) {
+        &:enabled {
+          background-color: var(--color-violet-50);
+        }
+      }
+    }
+  }
   .hover\:enabled\:bg-violet-100 {
     &:hover {
       @media (hover: hover) {

package/dist/subgraphs/resources-services/resolvers.js

@@ -503,6 +503,8 @@ function mapResourceTemplateState(state, doc) {
             content: section.content,
             displayOrder: section.displayOrder,
         })),
+        weight: state.weight ?? null,
+        subtitle: state.subtitle || null,
     };
 }
 /**
@@ -588,6 +590,8 @@ function mapServiceOfferingState(state, doc) {
             name: tier.name,
             description: tier.description || null,
             isCustomPricing: tier.isCustomPricing,
+            mostPopular: tier.mostPopular,
+            excludeFromSetupFee: tier.excludeFromSetupFee ?? false,
             pricingMode: tier.pricingMode || null,
             pricing: {
                 amount: tier.pricing?.amount ?? null,

package/dist/subgraphs/resources-services/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../subgraphs/resources-services/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,YAsVpB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../subgraphs/resources-services/schema.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,MAAM,EAAE,YA0VpB,CAAC"}

package/dist/subgraphs/resources-services/schema.js

@@ -83,6 +83,8 @@ export const schema = gql `
     optionGroups: [RSOptionGroup!]!
     faqFields: [RSFaqField!]
     contentSections: [RSContentSection!]!
+    weight: Int
+    subtitle: String
   }
 
   enum RSTemplateStatus {
@@ -241,9 +243,11 @@ export const schema = gql `
     pricingMode: RSTierPricingMode
     pricing: RSServicePricing!
     defaultBillingCycle: RSBillingCycle
+    mostPopular: Boolean!
     billingCycleDiscounts: [RSBillingCycleDiscount!]!
     serviceLevels: [RSServiceLevelBinding!]!
     usageLimits: [RSServiceUsageLimit!]!
+    excludeFromSetupFee: Boolean!
   }
 
   type RSServicePricing {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@powerhousedao/service-offering",
   "description": "service offering document models",
-  "version": "1.0.0-dev.22",
+  "version": "1.0.0-dev.24",
   "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",
@@ -76,13 +76,13 @@
   },
   "dependencies": {
     "@electric-sql/pglite": "0.3.15",
-    "@powerhousedao/builder-tools": "6.0.0-dev.104",
-    "@powerhousedao/common": "6.0.0-dev.104",
-    "@powerhousedao/design-system": "6.0.0-dev.104",
+    "@powerhousedao/builder-tools": "6.0.0-dev.105",
+    "@powerhousedao/common": "6.0.0-dev.105",
+    "@powerhousedao/design-system": "6.0.0-dev.105",
     "@powerhousedao/document-engineering": "1.40.1",
-    "@powerhousedao/vetra": "6.0.0-dev.104",
+    "@powerhousedao/vetra": "6.0.0-dev.105",
     "@uiw/react-md-editor": "^4.0.11",
-    "document-model": "6.0.0-dev.104",
+    "document-model": "6.0.0-dev.105",
     "graphql": "16.12.0",
     "graphql-tag": "^2.12.6",
     "lucide-react": "^0.577.0",
@@ -91,22 +91,22 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
+    "@powerhousedao/analytics-engine-core": "6.0.0-dev.105",
+    "@powerhousedao/config": "6.0.0-dev.105",
+    "@powerhousedao/connect": "6.0.0-dev.105",
+    "@powerhousedao/ph-cli": "6.0.0-dev.105",
+    "@powerhousedao/reactor-api": "6.0.0-dev.105",
+    "@powerhousedao/reactor-browser": "6.0.0-dev.105",
+    "@powerhousedao/reactor-local": "6.0.0-dev.105",
+    "@powerhousedao/switchboard": "6.0.0-dev.105",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@powerhousedao/analytics-engine-core": "6.0.0-dev.104",
-    "@powerhousedao/config": "6.0.0-dev.104",
-    "@powerhousedao/connect": "6.0.0-dev.104",
-    "@powerhousedao/ph-cli": "6.0.0-dev.104",
-    "@powerhousedao/reactor-api": "6.0.0-dev.104",
-    "@powerhousedao/reactor-browser": "6.0.0-dev.104",
-    "@powerhousedao/reactor-local": "6.0.0-dev.104",
-    "@powerhousedao/switchboard": "6.0.0-dev.104",
     "@tailwindcss/cli": "^4.1.4",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^24.9.2",
     "@types/react": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.0",
-    "document-drive": "6.0.0-dev.104",
+    "document-drive": "6.0.0-dev.105",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",