@powerhousedao/service-offering 0.0.1

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

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
+interface ServicesListProps {
+    document: ServiceOfferingDocument;
+    dispatch: DocumentDispatch<ServiceOfferingAction>;
+}
+export declare function ServicesList({ document, dispatch }: ServicesListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ServicesList.d.ts.map

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

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

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateId } from "document-model/core";
+import { addService, updateService, deleteService, } from "../../../document-models/service-offering/gen/creators.js";
+export function ServicesList({ document, dispatch }) {
+    const { state } = document;
+    const globalState = state.global;
+    const services = globalState.services ?? [];
+    const [isAdding, setIsAdding] = useState(false);
+    const [editingId, setEditingId] = useState(null);
+    const [formData, setFormData] = useState({
+        title: "",
+        description: "",
+    });
+    const handleAdd = () => {
+        if (!formData.title)
+            return;
+        dispatch(addService({
+            id: generateId(),
+            title: formData.title,
+            description: formData.description || undefined,
+            lastModified: new Date().toISOString(),
+        }));
+        setFormData({ title: "", description: "" });
+        setIsAdding(false);
+    };
+    const handleUpdate = (serviceId) => {
+        dispatch(updateService({
+            id: serviceId,
+            title: formData.title || undefined,
+            description: formData.description || undefined,
+            lastModified: new Date().toISOString(),
+        }));
+        setFormData({ title: "", description: "" });
+        setEditingId(null);
+    };
+    const handleDelete = (serviceId) => {
+        if (confirm("Are you sure you want to delete this service? This will also remove all tier bindings for this service.")) {
+            dispatch(deleteService({
+                id: serviceId,
+                lastModified: new Date().toISOString(),
+            }));
+        }
+    };
+    const startEdit = (service) => {
+        setEditingId(service.id);
+        setFormData({
+            title: service.title,
+            description: service.description || "",
+        });
+    };
+    const cancelEdit = () => {
+        setEditingId(null);
+        setFormData({ title: "", description: "" });
+    };
+    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: "Services" }), !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 Service" }))] }), 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 Service" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Title *" }), _jsx("input", { type: "text", value: formData.title, onChange: (e) => setFormData({ ...formData, title: 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., Legal Entity Incorporation" })] }), _jsxs("div", { 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: "Service description..." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: handleAdd, disabled: !formData.title, 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 Service" }), _jsx("button", { onClick: () => {
+                                            setIsAdding(false);
+                                            setFormData({ title: "", description: "" });
+                                        }, className: "px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors", children: "Cancel" })] })] })] })), services.length === 0 ? (_jsxs("div", { className: "text-center py-8 text-gray-500", children: [_jsx("p", { children: "No services added yet" }), _jsx("p", { className: "text-sm", children: "Click \"Add Service\" to define your first service" })] })) : (_jsx("div", { className: "space-y-3", children: services.map((service) => (_jsx("div", { className: "border border-gray-200 rounded-md p-4 hover:border-gray-300 transition-colors", children: editingId === service.id ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Title *" }), _jsx("input", { type: "text", value: formData.title, onChange: (e) => setFormData({ ...formData, title: 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" })] }), _jsxs("div", { 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" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => handleUpdate(service.id), className: "px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm", children: "Save" }), _jsx("button", { onClick: cancelEdit, className: "px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors text-sm", children: "Cancel" })] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: service.title }), service.description && (_jsx("p", { className: "text-gray-600 text-sm mt-1", children: service.description })), _jsxs("div", { className: "mt-2", children: [_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["ID:", " "] }), _jsx("span", { className: "text-xs font-mono text-gray-600", children: service.id })] }), (service.facetBindings?.length ?? 0) > 0 && (_jsxs("div", { className: "mt-2", children: [_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["Facet Bindings:", " "] }), _jsxs("span", { className: "text-xs text-gray-600", children: [service.facetBindings?.length ?? 0, " configured"] })] }))] }), _jsxs("div", { className: "flex items-center gap-2 ml-4", children: [_jsx("button", { onClick: () => startEdit(service), className: "px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded-md transition-colors", children: "Edit" }), _jsx("button", { onClick: () => handleDelete(service.id), className: "px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors", children: "Delete" })] })] }) })) }, service.id))) })), services.length > 0 && (_jsx("div", { className: "mt-4 p-4 bg-blue-50 rounded-md", children: _jsxs("p", { className: "text-sm text-blue-900", children: [_jsx("strong", { children: "Note:" }), " Services can be bound to resource facets and assigned to subscription tiers. Configure tier bindings in the Tiers section below."] }) }))] }));
+}

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

@@ -0,0 +1,9 @@
+export type TabId = "scope-facets" | "service-catalog" | "tier-definition" | "the-matrix";
+interface TabNavigationProps {
+    activeTab: TabId;
+    onTabChange: (tabId: TabId) => void;
+    completedTabs?: TabId[];
+}
+export declare function TabNavigation({ activeTab, onTabChange, completedTabs, }: TabNavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabNavigation.d.ts.map

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

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

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

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const tabs = [
+    {
+        id: "scope-facets",
+        label: "Resource Template",
+        accentColor: "teal",
+        icon: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) })),
+    },
+    {
+        id: "tier-definition",
+        label: "Tier Definition",
+        accentColor: "amber",
+        icon: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M3 9h18M9 3v18" })] })),
+    },
+    {
+        id: "service-catalog",
+        label: "Service Catalog",
+        accentColor: "emerald",
+        icon: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M4 6h16M4 10h16M4 14h10M4 18h6" }) })),
+    },
+    {
+        id: "the-matrix",
+        label: "The Matrix",
+        accentColor: "slate",
+        icon: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("circle", { cx: "8", cy: "8", r: "2" }), _jsx("circle", { cx: "16", cy: "8", r: "2" }), _jsx("circle", { cx: "8", cy: "16", r: "2" }), _jsx("circle", { cx: "16", cy: "16", r: "2" }), _jsx("path", { d: "M10 8h4M10 16h4M8 10v4M16 10v4" })] })),
+    },
+];
+export function TabNavigation({ activeTab, onTabChange, completedTabs = [], }) {
+    const getTabIndex = (tabId) => tabs.findIndex((t) => t.id === tabId);
+    const activeIndex = getTabIndex(activeTab);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styles }), _jsx("nav", { className: "so-tabs", role: "tablist", children: _jsx("div", { className: "so-tabs__track", children: tabs.map((tab, index) => {
+                        const isActive = tab.id === activeTab;
+                        const isPast = index < activeIndex || completedTabs.includes(tab.id);
+                        return (_jsxs("div", { className: "so-tabs__item-wrapper", children: [_jsxs("button", { role: "tab", "aria-selected": isActive, onClick: () => onTabChange(tab.id), className: `so-tabs__item ${isActive ? "so-tabs__item--active" : ""} ${isPast ? "so-tabs__item--completed" : ""}`, "data-accent": tab.accentColor, children: [_jsxs("span", { className: "so-tabs__icon-ring", children: [_jsx("span", { className: "so-tabs__icon", children: tab.icon }), isPast && !isActive && (_jsx("span", { className: "so-tabs__check", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }) }))] }), _jsx("span", { className: "so-tabs__label", children: tab.label })] }), index < tabs.length - 1 && (_jsx("div", { className: `so-tabs__connector ${index < activeIndex ? "so-tabs__connector--active" : ""}`, children: _jsx("div", { className: "so-tabs__connector-line" }) }))] }, tab.id));
+                    }) }) })] }));
+}
+const styles = `
+  .so-tabs {
+    background: white;
+    border-radius: var(--so-radius-xl);
+    box-shadow: var(--so-shadow-md);
+    padding: 20px 32px;
+    margin-bottom: 28px;
+    border: 1px solid var(--so-slate-100);
+  }
+
+  .so-tabs__track {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .so-tabs__item-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .so-tabs__item-wrapper:last-child {
+    flex: 0;
+  }
+
+  .so-tabs__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: all var(--so-transition-base);
+    border-radius: var(--so-radius-lg);
+  }
+
+  .so-tabs__item:hover {
+    background: var(--so-slate-50);
+  }
+
+  .so-tabs__icon-ring {
+    position: relative;
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--so-slate-100);
+    transition: all var(--so-transition-base);
+  }
+
+  .so-tabs__icon {
+    width: 24px;
+    height: 24px;
+    color: var(--so-slate-400);
+    transition: all var(--so-transition-base);
+  }
+
+  .so-tabs__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .so-tabs__check {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 20px;
+    height: 20px;
+    background: var(--so-emerald-500);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid white;
+    animation: so-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .so-tabs__check svg {
+    width: 12px;
+    height: 12px;
+    color: white;
+  }
+
+  @keyframes so-pop-in {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .so-tabs__label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-slate-500);
+    white-space: nowrap;
+    transition: all var(--so-transition-base);
+  }
+
+  .so-tabs__connector {
+    flex: 1;
+    height: 3px;
+    margin: 0 8px;
+    margin-bottom: 36px;
+    position: relative;
+    background: var(--so-slate-200);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .so-tabs__connector-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--so-emerald-500), var(--so-emerald-400));
+    border-radius: 2px;
+    transition: width var(--so-transition-slow);
+  }
+
+  .so-tabs__connector--active .so-tabs__connector-line {
+    width: 100%;
+  }
+
+  /* Completed state */
+  .so-tabs__item--completed .so-tabs__icon-ring {
+    background: var(--so-emerald-100);
+  }
+
+  .so-tabs__item--completed .so-tabs__icon {
+    color: var(--so-emerald-600);
+  }
+
+  .so-tabs__item--completed .so-tabs__label {
+    color: var(--so-emerald-600);
+  }
+
+  /* Active states with accent colors */
+  .so-tabs__item--active {
+    background: transparent;
+  }
+
+  .so-tabs__item--active[data-accent="violet"] .so-tabs__icon-ring {
+    background: var(--so-violet-100);
+    box-shadow: 0 0 0 4px var(--so-violet-50), 0 4px 12px rgba(139, 92, 246, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="violet"] .so-tabs__icon {
+    color: var(--so-violet-600);
+  }
+
+  .so-tabs__item--active[data-accent="violet"] .so-tabs__label {
+    color: var(--so-violet-700);
+    font-weight: 600;
+  }
+
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__icon-ring {
+    background: #ccfbf1;
+    box-shadow: 0 0 0 4px #f0fdfa, 0 4px 12px rgba(20, 184, 166, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__icon {
+    color: #0d9488;
+  }
+
+  .so-tabs__item--active[data-accent="teal"] .so-tabs__label {
+    color: #0f766e;
+    font-weight: 600;
+  }
+
+  .so-tabs__item--active[data-accent="emerald"] .so-tabs__icon-ring {
+    background: var(--so-emerald-100);
+    box-shadow: 0 0 0 4px var(--so-emerald-50), 0 4px 12px rgba(16, 185, 129, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="emerald"] .so-tabs__icon {
+    color: var(--so-emerald-600);
+  }
+
+  .so-tabs__item--active[data-accent="emerald"] .so-tabs__label {
+    color: var(--so-emerald-700);
+    font-weight: 600;
+  }
+
+  .so-tabs__item--active[data-accent="amber"] .so-tabs__icon-ring {
+    background: var(--so-amber-100);
+    box-shadow: 0 0 0 4px var(--so-amber-50), 0 4px 12px rgba(245, 158, 11, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="amber"] .so-tabs__icon {
+    color: var(--so-amber-600);
+  }
+
+  .so-tabs__item--active[data-accent="amber"] .so-tabs__label {
+    color: var(--so-amber-700);
+    font-weight: 600;
+  }
+
+  .so-tabs__item--active[data-accent="slate"] .so-tabs__icon-ring {
+    background: var(--so-slate-200);
+    box-shadow: 0 0 0 4px var(--so-slate-100), 0 4px 12px rgba(100, 116, 139, 0.25);
+  }
+
+  .so-tabs__item--active[data-accent="slate"] .so-tabs__icon {
+    color: var(--so-slate-700);
+  }
+
+  .so-tabs__item--active[data-accent="slate"] .so-tabs__label {
+    color: var(--so-slate-800);
+    font-weight: 600;
+  }
+`;

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

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { ServiceOfferingDocument, ServiceOfferingAction } from "@powerhousedao/service-offering/document-models/service-offering";
+interface TheMatrixProps {
+    document: ServiceOfferingDocument;
+    dispatch: DocumentDispatch<ServiceOfferingAction>;
+}
+export declare function TheMatrix({ document, dispatch }: TheMatrixProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TheMatrix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TheMatrix.d.ts","sourceRoot":"","sources":["../../../../editors/service-offering-editor/components/TheMatrix.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EAStB,MAAM,kEAAkE,CAAC;AAY1E,UAAU,cAAc;IACtB,QAAQ,EAAE,uBAAuB,CAAC;IAClC,QAAQ,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;CACnD;AAo9DD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAgqD/D"}