@powerhousedao/builder-profile 0.0.9 → 0.0.11

package/dist/editors/builder-profile/editor.js

@@ -155,6 +155,14 @@ export default function Editor() {
             return;
         dispatch(actions.removeContributor({ contributorPHID }));
     }, [dispatch]);
+    // Operator handler
+    const handleSetOperator = useCallback((isOperator) => {
+        if (!dispatch)
+            return;
+        dispatch(actions.setOperator({ isOperator }));
+    }, [dispatch]);
+    // Dynamic role label based on isOperator flag
+    const roleLabel = state?.isOperator ? "Operator" : "Builder";
     return (_jsxs("div", { className: "w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100", children: [_jsx("style", { children: `
           .builder-editor input, .builder-editor textarea, .builder-editor select {
             font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -228,12 +236,57 @@ export default function Editor() {
             background-size: 1.25em 1.25em;
             padding-right: 2.5rem;
           }
-        ` }), _jsx(DocumentToolbar, { document: doc, onClose: handleClose }), _jsxs("div", { className: "builder-editor p-6 max-w-4xl mx-auto space-y-6 pb-12", children: [_jsx("div", { className: "section-card p-8", children: _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold text-slate-900 tracking-tight", children: "Builder Profile" }), _jsx("p", { className: "text-slate-500 mt-1 text-sm", children: "Configure your builder identity and capabilities" })] }) }), state && _jsx(ProfilePreview, { state: state }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center", children: _jsx(Info, { size: 18, className: "text-slate-600" }) }), "Metadata"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Builder ID" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "meta-value flex-1 truncate", children: doc?.header.id }), _jsx("button", { type: "button", className: "p-2 rounded-lg border border-slate-200 hover:bg-slate-50 transition-colors", title: "Copy Builder ID", onClick: () => {
+          .builder-editor .role-toggle {
+            display: flex;
+            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+            border-radius: 12px;
+            padding: 3px;
+            gap: 3px;
+            border: 1px solid rgba(0, 0, 0, 0.06);
+            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+          }
+          .builder-editor .role-toggle button {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0.5rem 0.875rem;
+            font-size: 0.8125rem;
+            font-weight: 500;
+            border-radius: 9px;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            color: #64748B;
+            background: transparent;
+            white-space: nowrap;
+          }
+          .builder-editor .role-toggle button .role-icon {
+            font-size: 0.875rem;
+            transition: transform 0.2s ease;
+          }
+          .builder-editor .role-toggle button:hover:not(.active) {
+            color: #475569;
+            background: rgba(255, 255, 255, 0.6);
+          }
+          .builder-editor .role-toggle button.active {
+            color: white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
+          }
+          .builder-editor .role-toggle button.active.builder {
+            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+          }
+          .builder-editor .role-toggle button.active.operator {
+            background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
+          }
+          .builder-editor .role-toggle button.active .role-icon {
+            transform: scale(1.1);
+          }
+        ` }), _jsx(DocumentToolbar, { document: doc, onClose: handleClose }), _jsxs("div", { className: "builder-editor p-6 max-w-4xl mx-auto space-y-6 pb-12", children: [_jsx("div", { className: "section-card p-8", children: _jsxs("div", { className: "flex items-start justify-between gap-6", children: [_jsxs("div", { children: [_jsxs("h1", { className: "text-2xl font-semibold text-slate-900 tracking-tight", children: [roleLabel, " Profile"] }), _jsxs("p", { className: "text-slate-500 mt-1 text-sm", children: ["Configure your ", roleLabel.toLowerCase(), " identity and capabilities"] })] }), _jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsxs("div", { className: "role-toggle", children: [_jsxs("button", { type: "button", onClick: () => handleSetOperator(false), className: !state?.isOperator ? "active builder" : "", children: [_jsx("span", { className: "role-icon", children: "\uD83D\uDD28" }), "Builder"] }), _jsxs("button", { type: "button", onClick: () => handleSetOperator(true), className: state?.isOperator ? "active operator" : "", children: [_jsx("span", { className: "role-icon", children: "\u26A1" }), "Operator"] })] }), _jsx("p", { className: "text-xs text-slate-400 text-right max-w-[180px]", children: state?.isOperator ? "Sells & buys services" : "Buys services" })] })] }) }), state && _jsx(ProfilePreview, { state: state }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center", children: _jsx(Info, { size: 18, className: "text-slate-600" }) }), "Metadata"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "field-label", children: [roleLabel, " ID"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "meta-value flex-1 truncate", children: doc?.header.id }), _jsx("button", { type: "button", className: "p-2 rounded-lg border border-slate-200 hover:bg-slate-50 transition-colors", title: `Copy ${roleLabel} ID`, onClick: () => {
                                                             void navigator.clipboard.writeText(doc?.header.id || "");
-                                                            toast("Copied Builder ID!", { type: "success" });
+                                                            toast(`Copied ${roleLabel} ID!`, { type: "success" });
                                                         }, children: _jsx(Copy, { size: 16, className: "text-slate-500" }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Last Modified" }), _jsx("div", { className: "meta-value", children: state?.lastModified
                                                     ? formatLastModified(state.lastModified)
-                                                    : "Never modified" })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center", children: _jsx(User, { size: 18, className: "text-indigo-600" }) }), "Identity"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Builder Name" }), _jsx(TextInput, { className: "w-full", defaultValue: state?.name || "", onBlur: (e) => {
+                                                    : "Never modified" })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center", children: _jsx(User, { size: 18, className: "text-indigo-600" }) }), "Identity"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "field-label", children: [roleLabel, " Name"] }), _jsx(TextInput, { className: "w-full", defaultValue: state?.name || "", onBlur: (e) => {
                                                     if (e.target.value !== state?.name) {
                                                         handleFieldChange("name", e.target.value);
                                                     }
@@ -249,7 +302,7 @@ export default function Editor() {
                                                     }
                                                 }, children: [_jsx("option", { value: "", disabled: true, children: "Select status..." }), STATUS_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }), _jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Profile Type" }), _jsxs("div", { className: "type-toggle", children: [_jsx("button", { type: "button", onClick: () => handleTypeChange("INDIVIDUAL"), className: state?.type === "INDIVIDUAL" ? "active" : "", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(User, { size: 16 }), "Individual"] }) }), _jsx("button", { type: "button", onClick: () => handleTypeChange("TEAM"), className: state?.type === "TEAM" ? "active" : "", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Users, { size: 16 }), "Team"] }) })] }), _jsx("p", { className: "field-hint", children: state?.type === "TEAM"
                                                     ? "Teams can add contributors to their profile"
-                                                    : "Individual profiles represent a single builder" })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center", children: _jsx(FileText, { size: 18, className: "text-emerald-600" }) }), "Description & About"] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "field-label mb-0", children: "Short Description" }), _jsxs("span", { className: `text-xs font-medium ${descriptionValue.length > DESCRIPTION_MAX_LENGTH
+                                                    : `Individual profiles represent a single ${roleLabel.toLowerCase()}` })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center", children: _jsx(FileText, { size: 18, className: "text-emerald-600" }) }), "Description & About"] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "field-label mb-0", children: "Short Description" }), _jsxs("span", { className: `text-xs font-medium ${descriptionValue.length > DESCRIPTION_MAX_LENGTH
                                                             ? "text-red-500"
                                                             : descriptionValue.length > DESCRIPTION_MAX_LENGTH * 0.9
                                                                 ? "text-amber-500"
@@ -265,5 +318,5 @@ export default function Editor() {
                                                         }
                                                         handleFieldChange("description", e.target.value);
                                                     }
-                                                }, placeholder: "A brief summary of your builder profile", rows: 3, maxLength: DESCRIPTION_MAX_LENGTH + 50 }), descriptionValue.length > DESCRIPTION_MAX_LENGTH && (_jsxs("p", { className: "text-xs text-red-500 mt-1", children: ["Description exceeds ", DESCRIPTION_MAX_LENGTH, " character limit. Please shorten it to save."] })), _jsx("p", { className: "field-hint", children: "A short, plain-text description shown in previews and listings" })] }), _jsxs("div", { children: [_jsx(MarkdownEditor, { label: "About", height: 350, value: state?.about || "", onChange: () => { }, onBlur: (value) => handleFieldChange("about", value) }), _jsx("p", { className: "field-hint", children: "A detailed description with markdown formatting to showcase your capabilities" })] })] })] }), _jsx(SkillsSection, { skills: state?.skills || [], onAddSkill: handleAddSkill, onRemoveSkill: handleRemoveSkill }), _jsx(ScopesSection, { scopes: state?.scopes || [], onAddScope: handleAddScope, onRemoveScope: handleRemoveScope }), _jsx(LinksSection, { links: state?.links || [], onAddLink: handleAddLink, onEditLink: handleEditLink, onRemoveLink: handleRemoveLink }), state?.type === "TEAM" && (_jsx(ContributorsSection, { contributors: state.contributors, onAddContributor: handleAddContributor, onRemoveContributor: handleRemoveContributor })), _jsx(ToastContainer, { position: "bottom-right" })] })] }));
+                                                }, placeholder: `A brief summary of your ${roleLabel.toLowerCase()} profile`, rows: 3, maxLength: DESCRIPTION_MAX_LENGTH + 50 }), descriptionValue.length > DESCRIPTION_MAX_LENGTH && (_jsxs("p", { className: "text-xs text-red-500 mt-1", children: ["Description exceeds ", DESCRIPTION_MAX_LENGTH, " character limit. Please shorten it to save."] })), _jsx("p", { className: "field-hint", children: "A short, plain-text description shown in previews and listings" })] }), _jsxs("div", { children: [_jsx(MarkdownEditor, { label: "About", height: 350, value: state?.about || "", onChange: () => { }, onBlur: (value) => handleFieldChange("about", value) }), _jsx("p", { className: "field-hint", children: "A detailed description with markdown formatting to showcase your capabilities" })] })] })] }), _jsx(SkillsSection, { skills: state?.skills || [], onAddSkill: handleAddSkill, onRemoveSkill: handleRemoveSkill }), _jsx(ScopesSection, { scopes: state?.scopes || [], onAddScope: handleAddScope, onRemoveScope: handleRemoveScope }), _jsx(LinksSection, { links: state?.links || [], onAddLink: handleAddLink, onEditLink: handleEditLink, onRemoveLink: handleRemoveLink }), state?.type === "TEAM" && (_jsx(ContributorsSection, { contributors: state.contributors, onAddContributor: handleAddContributor, onRemoveContributor: handleRemoveContributor })), _jsx(ToastContainer, { position: "bottom-right" })] })] }));
 }