@powerhousedao/builder-profile 0.0.3 → 0.0.5

package/dist/editors/builder-profile/components/LinksSection.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextInput } from "@powerhousedao/document-engineering";
+import { Link2, Plus, Check, X, Pencil, Trash2 } from "lucide-react";
+import { generateId } from "document-model/core";
+// Helper to get favicon URL
+const getFaviconUrl = (url) => {
+    try {
+        const hostname = new URL(url).hostname;
+        return `https://www.google.com/s2/favicons?domain=${hostname}&sz=32`;
+    }
+    catch {
+        return null;
+    }
+};
+export function LinksSection({ links, onAddLink, onEditLink, onRemoveLink, }) {
+    const [newUrl, setNewUrl] = useState("");
+    const [newLabel, setNewLabel] = useState("");
+    const [editingId, setEditingId] = useState(null);
+    const [editUrl, setEditUrl] = useState("");
+    const [editLabel, setEditLabel] = useState("");
+    const handleAddLink = () => {
+        if (newUrl.trim()) {
+            onAddLink({
+                id: generateId(),
+                url: newUrl.trim(),
+                label: newLabel.trim() || undefined,
+            });
+            setNewUrl("");
+            setNewLabel("");
+        }
+    };
+    const handleStartEdit = (link) => {
+        setEditingId(link.id);
+        setEditUrl(link.url);
+        setEditLabel(link.label || "");
+    };
+    const handleSaveEdit = () => {
+        if (editingId && editUrl.trim()) {
+            onEditLink({
+                id: editingId,
+                url: editUrl.trim(),
+                label: editLabel.trim() || undefined,
+            });
+            setEditingId(null);
+            setEditUrl("");
+            setEditLabel("");
+        }
+    };
+    const handleCancelEdit = () => {
+        setEditingId(null);
+        setEditUrl("");
+        setEditLabel("");
+    };
+    return (_jsxs("div", { className: "bg-white border border-slate-200/60 rounded-2xl shadow-sm p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-2 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center", children: _jsx(Link2, { size: 18, className: "text-violet-600" }) }), "Links"] }), _jsx("p", { className: "text-sm text-slate-500 mb-5", children: "Add links to your portfolio, social profiles, or other relevant pages" }), links.length > 0 && (_jsx("div", { className: "space-y-2 mb-5", children: links.map((link) => (_jsx("div", { className: `group flex items-center gap-3 p-3 rounded-xl border transition-all ${editingId === link.id
+                        ? "bg-slate-50 border-slate-300"
+                        : "bg-white border-slate-200 hover:border-slate-300 hover:shadow-sm"}`, children: editingId === link.id ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(TextInput, { className: "w-full", value: editUrl, onChange: (e) => setEditUrl(e.target.value), placeholder: "https://example.com" }), _jsx(TextInput, { className: "w-full", value: editLabel, onChange: (e) => setEditLabel(e.target.value), placeholder: "Display label (optional)" })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", onClick: handleSaveEdit, className: "p-2.5 rounded-xl bg-emerald-100 hover:bg-emerald-200 text-emerald-600 transition-colors", children: _jsx(Check, { size: 16 }) }), _jsx("button", { type: "button", onClick: handleCancelEdit, className: "p-2.5 rounded-xl hover:bg-slate-100 text-slate-500 transition-colors", children: _jsx(X, { size: 16 }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0 overflow-hidden", children: getFaviconUrl(link.url) ? (_jsx("img", { src: getFaviconUrl(link.url) || "", alt: "", className: "w-4 h-4", onError: (e) => {
+                                        e.currentTarget.style.display = "none";
+                                    } })) : (_jsx(Link2, { size: 14, className: "text-slate-400" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-medium text-slate-800 truncate text-sm", children: link.label ||
+                                            (() => {
+                                                try {
+                                                    return new URL(link.url).hostname;
+                                                }
+                                                catch {
+                                                    return link.url;
+                                                }
+                                            })() }), _jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-slate-500 hover:text-indigo-600 truncate block transition-colors", children: link.url })] }), _jsxs("div", { className: "flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsx("button", { type: "button", onClick: () => handleStartEdit(link), className: "p-2 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors", title: "Edit link", children: _jsx(Pencil, { size: 14 }) }), _jsx("button", { type: "button", onClick: () => onRemoveLink(link.id), className: "p-2 rounded-lg hover:bg-red-50 text-slate-400 hover:text-red-600 transition-colors", title: "Remove link", children: _jsx(Trash2, { size: 14 }) })] })] })) }, link.id))) })), links.length === 0 && (_jsxs("div", { className: "text-center py-8 mb-5 rounded-xl bg-slate-50 border-2 border-dashed border-slate-200", children: [_jsx(Link2, { size: 32, className: "text-slate-300 mx-auto mb-2" }), _jsx("p", { className: "text-slate-500 text-sm", children: "No links added yet" }), _jsx("p", { className: "text-slate-400 text-xs mt-1", children: "Add links to your portfolio, GitHub, or social profiles" })] })), _jsxs("div", { className: "bg-slate-50 rounded-xl p-4 border border-slate-200", children: [_jsxs("p", { className: "text-sm font-medium text-slate-700 mb-3 flex items-center gap-2", children: [_jsx(Plus, { size: 14, className: "text-slate-500" }), "Add New Link"] }), _jsxs("div", { className: "space-y-3", children: [_jsx(TextInput, { className: "w-full", value: newUrl, onChange: (e) => setNewUrl(e.target.value), placeholder: "https://github.com/username", onKeyDown: (e) => {
+                                    if (e.key === "Enter" && newUrl.trim())
+                                        handleAddLink();
+                                } }), _jsxs("div", { className: "flex gap-2", children: [_jsx(TextInput, { className: "flex-1", value: newLabel, onChange: (e) => setNewLabel(e.target.value), placeholder: "Display label (optional)", onKeyDown: (e) => {
+                                            if (e.key === "Enter" && newUrl.trim())
+                                                handleAddLink();
+                                        } }), _jsxs("button", { type: "button", onClick: handleAddLink, disabled: !newUrl.trim(), className: "px-5 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-xl hover:bg-indigo-700 disabled:bg-slate-300 disabled:cursor-not-allowed transition-colors flex items-center gap-2", children: [_jsx(Plus, { size: 14 }), "Add"] })] })] })] })] }));
+}

package/dist/editors/builder-profile/components/ProfilePreview.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderProfileState } from "../../../document-models/builder-profile/gen/types.js";
+interface ProfilePreviewProps {
+    state: BuilderProfileState;
+}
+export declare function ProfilePreview({ state }: ProfilePreviewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ProfilePreview.d.ts.map

package/dist/editors/builder-profile/components/ProfilePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePreview.d.ts","sourceRoot":"","sources":["../../../../editors/builder-profile/components/ProfilePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,mBAAmB,EAGpB,MAAM,uDAAuD,CAAC;AAkD/D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,kDAsI5D"}

package/dist/editors/builder-profile/components/ProfilePreview.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Users, Link2 } from "lucide-react";
+const SKILL_LABELS = {
+    FRONTEND_DEVELOPMENT: "Frontend",
+    BACKEND_DEVELOPMENT: "Backend",
+    FULL_STACK_DEVELOPMENT: "Full Stack",
+    DEVOPS_ENGINEERING: "DevOps",
+    SMART_CONTRACT_DEVELOPMENT: "Smart Contracts",
+    UI_UX_DESIGN: "UI/UX",
+    TECHNICAL_WRITING: "Tech Writing",
+    QA_TESTING: "QA",
+    DATA_ENGINEERING: "Data",
+    SECURITY_ENGINEERING: "Security",
+};
+const SCOPE_LABELS = {
+    ACC: "ACC",
+    STA: "STA",
+    SUP: "SUP",
+    STABILITY_SCOPE: "Stability",
+    SUPPORT_SCOPE: "Support",
+    PROTOCOL_SCOPE: "Protocol",
+    GOVERNANCE_SCOPE: "Governance",
+};
+const STATUS_STYLES = {
+    ACTIVE: {
+        bg: "bg-emerald-50",
+        text: "text-emerald-700",
+        dot: "bg-emerald-500",
+    },
+    INACTIVE: {
+        bg: "bg-slate-100",
+        text: "text-slate-600",
+        dot: "bg-slate-400",
+    },
+    ON_HOLD: {
+        bg: "bg-amber-50",
+        text: "text-amber-700",
+        dot: "bg-amber-500",
+    },
+    COMPLETED: { bg: "bg-sky-50", text: "text-sky-700", dot: "bg-sky-500" },
+    ARCHIVED: {
+        bg: "bg-slate-100",
+        text: "text-slate-500",
+        dot: "bg-slate-300",
+    },
+};
+export function ProfilePreview({ state }) {
+    if (!state.name && !state.description) {
+        return null;
+    }
+    const statusStyle = state.status
+        ? STATUS_STYLES[state.status]
+        : STATUS_STYLES.INACTIVE;
+    return (_jsxs("div", { className: "bg-white border border-slate-200/60 rounded-2xl shadow-sm overflow-hidden", children: [_jsx("div", { className: "h-24 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 relative", children: _jsx("div", { className: "absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzBoLTZWMGg2djMwem0tNiAwSDI0VjBoNnYzMHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30" }) }), _jsxs("div", { className: "px-6 pb-6", children: [_jsxs("div", { className: "-mt-12 mb-4 flex items-end justify-between", children: [_jsxs("div", { className: "relative", children: [state.icon ? (_jsx("img", { src: state.icon, alt: "Profile", className: "w-24 h-24 rounded-2xl object-cover border-4 border-white shadow-lg" })) : (_jsx("div", { className: "w-24 h-24 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 border-4 border-white shadow-lg flex items-center justify-center", children: _jsx("span", { className: "text-3xl font-bold text-white", children: state.name?.charAt(0).toUpperCase() || "?" }) })), state.type === "TEAM" && (_jsx("div", { className: "absolute -bottom-1 -right-1 w-7 h-7 bg-purple-500 rounded-lg border-2 border-white flex items-center justify-center", children: _jsx(Users, { size: 14, className: "text-white" }) }))] }), state.status && (_jsxs("div", { className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full ${statusStyle.bg}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full ${statusStyle.dot}` }), _jsx("span", { className: `text-xs font-medium ${statusStyle.text}`, children: state.status.replace("_", " ") })] }))] }), _jsxs("div", { className: "mb-4", children: [_jsx("h4", { className: "text-xl font-semibold text-slate-900 tracking-tight", children: state.name || "Unnamed Builder" }), state.slug && (_jsxs("p", { className: "text-sm text-slate-500 font-medium", children: ["@", state.slug] }))] }), state.description && (_jsx("p", { className: "text-slate-600 text-sm leading-relaxed mb-5", children: state.description })), state.skils && state.skils.length > 0 && (_jsxs("div", { className: "mb-4", children: [_jsx("p", { className: "text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2", children: "Skills" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: state.skils.map((skill) => (_jsx("span", { className: "px-2.5 py-1 rounded-lg text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-100", children: SKILL_LABELS[skill] || skill }, skill))) })] })), state.scopes && state.scopes.length > 0 && (_jsxs("div", { className: "mb-4", children: [_jsx("p", { className: "text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2", children: "Scopes" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: state.scopes.map((scope) => (_jsx("span", { className: "px-2.5 py-1 rounded-lg text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100", children: SCOPE_LABELS[scope] || scope }, scope))) })] })), state.links && state.links.length > 0 && (_jsx("div", { className: "pt-4 border-t border-slate-100", children: _jsx("div", { className: "flex flex-wrap gap-3", children: state.links.map((link) => (_jsxs("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-sm text-slate-600 hover:text-indigo-600 transition-colors group", children: [_jsx(Link2, { size: 14, className: "text-slate-400 group-hover:text-indigo-500 transition-colors" }), _jsx("span", { className: "group-hover:underline underline-offset-2", children: link.label || new URL(link.url).hostname })] }, link.id))) }) }))] })] }));
+}

package/dist/editors/builder-profile/components/ScopesSection.d.ts

@@ -0,0 +1,9 @@
+import type { BuilderScope } from "../../../document-models/builder-profile/gen/types.js";
+interface ScopesSectionProps {
+    scopes: BuilderScope[];
+    onAddScope: (scope: BuilderScope) => void;
+    onRemoveScope: (scope: BuilderScope) => void;
+}
+export declare function ScopesSection({ scopes, onAddScope, onRemoveScope, }: ScopesSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ScopesSection.d.ts.map

package/dist/editors/builder-profile/components/ScopesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScopesSection.d.ts","sourceRoot":"","sources":["../../../../editors/builder-profile/components/ScopesSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uDAAuD,CAAC;AAoD1F,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,UAAU,EACV,aAAa,GACd,EAAE,kBAAkB,2CAuGpB"}

package/dist/editors/builder-profile/components/ScopesSection.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Target, X, Check } from "lucide-react";
+const SCOPE_OPTIONS = [
+    {
+        value: "ACC",
+        label: "ACC",
+        description: "Accessibility",
+        color: "bg-cyan-500",
+    },
+    {
+        value: "STA",
+        label: "STA",
+        description: "Stability",
+        color: "bg-blue-500",
+    },
+    {
+        value: "SUP",
+        label: "SUP",
+        description: "Support",
+        color: "bg-violet-500",
+    },
+    {
+        value: "STABILITY_SCOPE",
+        label: "Stability Scope",
+        description: "Protocol stability initiatives",
+        color: "bg-emerald-500",
+    },
+    {
+        value: "SUPPORT_SCOPE",
+        label: "Support Scope",
+        description: "Ecosystem support work",
+        color: "bg-amber-500",
+    },
+    {
+        value: "PROTOCOL_SCOPE",
+        label: "Protocol Scope",
+        description: "Core protocol development",
+        color: "bg-indigo-500",
+    },
+    {
+        value: "GOVERNANCE_SCOPE",
+        label: "Governance Scope",
+        description: "Governance processes",
+        color: "bg-rose-500",
+    },
+];
+export function ScopesSection({ scopes, onAddScope, onRemoveScope, }) {
+    const availableScopes = SCOPE_OPTIONS.filter((option) => !scopes.includes(option.value));
+    const selectedScopes = scopes
+        .map((scope) => SCOPE_OPTIONS.find((s) => s.value === scope))
+        .filter(Boolean);
+    return (_jsxs("div", { className: "bg-white border border-slate-200/60 rounded-2xl shadow-sm p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-2 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(Target, { size: 18, className: "text-emerald-600" }) }), "Scopes"] }), _jsx("p", { className: "text-sm text-slate-500 mb-5", children: "Define the areas where you contribute to the ecosystem" }), selectedScopes.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-5", children: selectedScopes.map((scope) => scope && (_jsxs("div", { className: "group flex items-center gap-2 px-3 py-2 rounded-xl bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200 hover:border-emerald-300 transition-all", children: [_jsx("span", { className: `w-2 h-2 rounded-full ${scope.color}` }), _jsx("span", { className: "text-sm font-medium text-slate-700", children: scope.label }), _jsx("button", { type: "button", onClick: () => onRemoveScope(scope.value), className: "ml-1 p-1 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-red-100 text-slate-400 hover:text-red-600 transition-all", children: _jsx(X, { size: 14 }) })] }, scope.value))) })), scopes.length === 0 && (_jsxs("div", { className: "text-center py-8 mb-5 rounded-xl bg-slate-50 border-2 border-dashed border-slate-200", children: [_jsx(Target, { size: 32, className: "text-slate-300 mx-auto mb-2" }), _jsx("p", { className: "text-slate-500 text-sm", children: "No scopes selected yet" }), _jsx("p", { className: "text-slate-400 text-xs mt-1", children: "Add scopes from the dropdown below" })] })), availableScopes.length > 0 && (_jsxs("div", { className: "relative", children: [_jsxs("select", { className: "w-full px-4 py-3 pr-10 border border-slate-200 rounded-xl text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors appearance-none cursor-pointer", onChange: (e) => {
+                            if (e.target.value) {
+                                onAddScope(e.target.value);
+                                e.target.value = "";
+                            }
+                        }, defaultValue: "", children: [_jsx("option", { value: "", disabled: true, children: "+ Add a scope..." }), availableScopes.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx("svg", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none w-4 h-4", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] })), availableScopes.length === 0 && scopes.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-emerald-600 bg-emerald-50 rounded-xl px-4 py-3", children: [_jsx(Check, { size: 16 }), _jsx("span", { children: "All available scopes have been added" })] }))] }));
+}

package/dist/editors/builder-profile/components/SkillsSection.d.ts

@@ -0,0 +1,9 @@
+import type { BuilderSkill } from "../../../document-models/builder-profile/gen/types.js";
+interface SkillsSectionProps {
+    skills: BuilderSkill[];
+    onAddSkill: (skill: BuilderSkill) => void;
+    onRemoveSkill: (skill: BuilderSkill) => void;
+}
+export declare function SkillsSection({ skills, onAddSkill, onRemoveSkill, }: SkillsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SkillsSection.d.ts.map

package/dist/editors/builder-profile/components/SkillsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../../editors/builder-profile/components/SkillsSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uDAAuD,CAAC;AA2D1F,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,UAAU,EACV,aAAa,GACd,EAAE,kBAAkB,2CAuGpB"}

package/dist/editors/builder-profile/components/SkillsSection.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sparkles, X, Check } from "lucide-react";
+const SKILL_OPTIONS = [
+    {
+        value: "FRONTEND_DEVELOPMENT",
+        label: "Frontend Development",
+        color: "bg-blue-500",
+    },
+    {
+        value: "BACKEND_DEVELOPMENT",
+        label: "Backend Development",
+        color: "bg-slate-600",
+    },
+    {
+        value: "FULL_STACK_DEVELOPMENT",
+        label: "Full Stack Development",
+        color: "bg-violet-500",
+    },
+    {
+        value: "DEVOPS_ENGINEERING",
+        label: "DevOps Engineering",
+        color: "bg-orange-500",
+    },
+    {
+        value: "SMART_CONTRACT_DEVELOPMENT",
+        label: "Smart Contract Development",
+        color: "bg-emerald-500",
+    },
+    {
+        value: "UI_UX_DESIGN",
+        label: "UI/UX Design",
+        color: "bg-pink-500",
+    },
+    {
+        value: "TECHNICAL_WRITING",
+        label: "Technical Writing",
+        color: "bg-amber-500",
+    },
+    {
+        value: "QA_TESTING",
+        label: "QA Testing",
+        color: "bg-green-500",
+    },
+    {
+        value: "DATA_ENGINEERING",
+        label: "Data Engineering",
+        color: "bg-indigo-500",
+    },
+    {
+        value: "SECURITY_ENGINEERING",
+        label: "Security Engineering",
+        color: "bg-red-500",
+    },
+];
+export function SkillsSection({ skills, onAddSkill, onRemoveSkill, }) {
+    const availableSkills = SKILL_OPTIONS.filter((option) => !skills.includes(option.value));
+    const selectedSkills = skills
+        .map((skill) => SKILL_OPTIONS.find((s) => s.value === skill))
+        .filter(Boolean);
+    return (_jsxs("div", { className: "bg-white border border-slate-200/60 rounded-2xl shadow-sm p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-2 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center", children: _jsx(Sparkles, { size: 18, className: "text-blue-600" }) }), "Skills"] }), _jsx("p", { className: "text-sm text-slate-500 mb-5", children: "Select the skills that best represent your expertise" }), selectedSkills.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-5", children: selectedSkills.map((skill) => skill && (_jsxs("div", { className: "group flex items-center gap-2 px-3 py-2 rounded-xl bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 hover:border-slate-300 transition-all", children: [_jsx("span", { className: `w-2 h-2 rounded-full ${skill.color}` }), _jsx("span", { className: "text-sm font-medium text-slate-700", children: skill.label }), _jsx("button", { type: "button", onClick: () => onRemoveSkill(skill.value), className: "ml-1 p-1 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-red-100 text-slate-400 hover:text-red-600 transition-all", children: _jsx(X, { size: 14 }) })] }, skill.value))) })), skills.length === 0 && (_jsxs("div", { className: "text-center py-8 mb-5 rounded-xl bg-slate-50 border-2 border-dashed border-slate-200", children: [_jsx(Sparkles, { size: 32, className: "text-slate-300 mx-auto mb-2" }), _jsx("p", { className: "text-slate-500 text-sm", children: "No skills selected yet" }), _jsx("p", { className: "text-slate-400 text-xs mt-1", children: "Add skills from the dropdown below" })] })), availableSkills.length > 0 && (_jsxs("div", { className: "relative", children: [_jsxs("select", { className: "w-full px-4 py-3 pr-10 border border-slate-200 rounded-xl text-sm bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors appearance-none cursor-pointer", onChange: (e) => {
+                            if (e.target.value) {
+                                onAddSkill(e.target.value);
+                                e.target.value = "";
+                            }
+                        }, defaultValue: "", children: [_jsx("option", { value: "", disabled: true, children: "+ Add a skill..." }), availableSkills.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx("svg", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none w-4 h-4", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] })), availableSkills.length === 0 && skills.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-emerald-600 bg-emerald-50 rounded-xl px-4 py-3", children: [_jsx(Check, { size: 16 }), _jsx("span", { children: "All available skills have been added" })] }))] }));
+}

package/dist/editors/builder-profile/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/builder-profile/editor.tsx"],"names":[],"mappings":"AAkMA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAwN7B"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/builder-profile/editor.tsx"],"names":[],"mappings":"AAuCA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAugB7B"}