npm - @powerhousedao/vetra-builder-package - Versions diffs - 0.0.19 → 0.0.21 - Mend

@powerhousedao/vetra-builder-package 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/editors/builder-team-editor/components/MembersSection.js CHANGED Viewed

@@ -1,24 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Form, PHIDField } from "@powerhousedao/document-engineering";
 import { useState } from "react";
-import { GraphQLClient } from "graphql-request";
 import { config } from "../config.js";
-const graphqlClient = new GraphQLClient(config.renownGraphqlEndpoint);
-const SEARCH_PROFILES_QUERY = `
-  query ($input: GetProfilesInput!) {
-    getProfiles(input: $input) {
-      documentId
-      ethAddress
-      updatedAt
-      userImage
-      username
-    }
-  }
-`;
+import { getProfile, searchProfileOptions, getProfileOption, } from "../services/renown-api.js";
+import { truncateAddress } from "../utils/format.js";
 export function MembersSection({ members, onAddMember, onRemoveMember, }) {
     const [selectedProfile, setSelectedProfile] = useState(null);
-    // Cache of profiles from the last search to avoid refetching on select
-    const [profilesCache, setProfilesCache] = useState(new Map());
     const handleAddMember = () => {
         if (selectedProfile) {
             const success = onAddMember({
@@ -32,120 +19,61 @@ export function MembersSection({ members, onAddMember, onRemoveMember, }) {
             }
         }
     };
-    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm border", children: [_jsxs("div", { className: "px-6 py-4 border-b border-gray-200", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Team Members" }), _jsx("p", { className: "text-sm text-gray-500", children: "Manage team access" })] }), _jsx("div", { className: "p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-3", children: [_jsx(PHIDField, { name: "memberProfile", label: "Search for team member", value: selectedProfile?.documentId ?? undefined, initialOptions: selectedProfile
+    // Check if the selected profile is already a member
+    const existingMember = selectedProfile
+        ? members.find((m) => m.phid === selectedProfile.documentId)
+        : null;
+    const handleUpdateMember = () => {
+        if (selectedProfile && existingMember) {
+            // Remove the old member and add the updated one
+            onRemoveMember(existingMember.id);
+            onAddMember({
+                phid: selectedProfile.documentId,
+                ethAddress: selectedProfile.ethAddress,
+                name: selectedProfile.username,
+                profileImage: selectedProfile.userImage,
+            });
+            setSelectedProfile(null);
+        }
+    };
+    return (_jsxs("div", { className: "bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden", children: [_jsxs("div", { className: "px-6 py-5 border-b border-gray-200 bg-gray-50", children: [_jsx("h3", { className: "text-xl font-bold text-gray-900", children: "Team Members" }), _jsx("p", { className: "text-sm text-gray-600 mt-1", children: "Manage team access and permissions" })] }), _jsx("div", { className: "p-6", children: _jsxs("div", { className: "space-y-5", children: [_jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-3", children: [_jsx(PHIDField, { name: "memberProfile", label: "Search for team member", value: selectedProfile?.documentId ?? undefined, initialOptions: selectedProfile
                                             ? [
                                                 {
                                                     value: selectedProfile.documentId,
                                                     title: selectedProfile.username,
-                                                    description: selectedProfile.ethAddress,
+                                                    description: truncateAddress(selectedProfile.ethAddress),
                                                     path: {
-                                                        text: `${config.renownProfileBasePath}/${selectedProfile.username}`,
-                                                        url: `${config.renownProfileBasePath}/${selectedProfile.username}`,
+                                                        text: `${config.renownProfileBasePath}/${selectedProfile.documentId}`,
+                                                        url: `${config.renownProfileBasePath}/${selectedProfile.documentId}`,
                                                     },
+                                                    icon: "Person",
                                                 },
                                             ]
-                                            : [], allowUris: false, autoComplete: true, fetchOptionsCallback: async (userInput) => {
-                                            const data = await graphqlClient.request(SEARCH_PROFILES_QUERY, {
-                                                input: {
-                                                    driveId: "renown-profiles",
-                                                    searchString: userInput,
-                                                },
-                                            });
-                                            // Update the cache with the search results
-                                            const newCache = new Map(profilesCache);
-                                            data.getProfiles.forEach((profile) => {
-                                                newCache.set(profile.documentId, {
-                                                    documentId: profile.documentId,
-                                                    ethAddress: profile.ethAddress,
-                                                    username: profile.username,
-                                                    userImage: profile.userImage,
-                                                });
-                                            });
-                                            setProfilesCache(newCache);
-                                            return data.getProfiles.map((profile) => ({
-                                                id: profile.documentId,
-                                                title: profile.username,
-                                                value: profile.documentId,
-                                                description: profile.ethAddress,
-                                                path: {
-                                                    text: `${config.renownProfileBasePath}/${profile.username}`,
-                                                    url: `${config.renownProfileBasePath}/${profile.username}`,
-                                                },
-                                            }));
-                                        }, fetchSelectedOptionCallback: async (value) => {
-                                            // First check cache
-                                            const cachedProfile = profilesCache.get(value);
-                                            if (cachedProfile) {
-                                                setSelectedProfile(cachedProfile);
-                                                return {
-                                                    title: cachedProfile.username,
-                                                    value: cachedProfile.documentId,
-                                                    description: cachedProfile.ethAddress,
-                                                    path: {
-                                                        text: `${config.renownProfileBasePath}/${cachedProfile.username}`,
-                                                        url: `${config.renownProfileBasePath}/${cachedProfile.username}`,
-                                                    },
-                                                };
-                                            }
-                                            // If not in cache, fetch by searching for the documentId
-                                            // Note: This is a fallback that may not work perfectly
-                                            // Ideally the API would support querying by documentId directly
-                                            const data = await graphqlClient.request(SEARCH_PROFILES_QUERY, {
-                                                input: {
-                                                    driveId: "renown-profiles",
-                                                    searchString: value,
-                                                },
-                                            });
-                                            const profile = data.getProfiles.find((p) => p.documentId === value) ||
-                                                data.getProfiles[0];
-                                            if (!profile) {
-                                                return;
+                                            : [], allowUris: false, autoComplete: true, fetchOptionsCallback: searchProfileOptions, fetchSelectedOptionCallback: async (value) => {
+                                            const profile = await getProfile(value);
+                                            if (profile) {
+                                                setSelectedProfile(profile);
                                             }
-                                            const profileData = {
-                                                documentId: profile.documentId,
-                                                ethAddress: profile.ethAddress,
-                                                username: profile.username,
-                                                userImage: profile.userImage,
-                                            };
-                                            setSelectedProfile(profileData);
-                                            // Update cache
-                                            const newCache = new Map(profilesCache);
-                                            newCache.set(profile.documentId, profileData);
-                                            setProfilesCache(newCache);
-                                            return {
-                                                title: profile.username,
-                                                value: profile.documentId,
-                                                description: profile.ethAddress,
-                                                path: {
-                                                    text: `${config.renownProfileBasePath}/${profile.username}`,
-                                                    url: `${config.renownProfileBasePath}/${profile.username}`,
-                                                },
-                                            };
-                                        }, onChange: (value) => {
+                                            return getProfileOption(value);
+                                        }, onChange: async (value) => {
                                             if (!value) {
                                                 setSelectedProfile(null);
                                                 return;
                                             }
-                                            // Use cached profile data if available
-                                            const profile = profilesCache.get(value);
+                                            const profile = await getProfile(value);
                                             if (profile) {
                                                 setSelectedProfile(profile);
                                             }
-                                        }, variant: "withValueTitleAndDescription", required: false, viewMode: "edition", placeholder: "Enter username or ENS name" }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: handleAddMember, disabled: !selectedProfile, children: "Add Member" }) })] }) }), _jsx("div", { className: "space-y-2", children: members.length > 0 ? (members.map((member) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded border hover:bg-gray-100 transition-colors cursor-pointer", onClick: () => {
+                                        }, variant: "withValueTitleAndDescription", required: false, viewMode: "edition", placeholder: "Enter username or ENS name" }), _jsx("div", { className: "flex justify-end", children: existingMember ? (_jsx(Button, { onClick: handleUpdateMember, disabled: !selectedProfile, children: "Update Member" })) : (_jsx(Button, { onClick: handleAddMember, disabled: !selectedProfile, children: "Add Member" })) })] }) }), _jsx("div", { className: "space-y-3", children: members.length > 0 ? (members.map((member) => (_jsxs("div", { className: "flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all cursor-pointer group", onClick: async () => {
                                     if (member.phid) {
-                                        const profile = {
-                                            documentId: member.phid,
-                                            ethAddress: member.ethAddress || "",
-                                            username: member.name || member.ethAddress || "",
-                                            userImage: member.profileImage ?? undefined,
-                                        };
-                                        setSelectedProfile(profile);
-                                        // Update cache
-                                        const newCache = new Map(profilesCache);
-                                        newCache.set(member.phid, profile);
-                                        setProfilesCache(newCache);
+                                        const profile = await getProfile(member.phid);
+                                        if (profile) {
+                                            setSelectedProfile(profile);
+                                        }
                                     }
-                                }, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [member.profileImage ? (_jsx("img", { src: member.profileImage, alt: member.name || "Profile", className: "w-10 h-10 rounded-full object-cover flex-shrink-0" })) : (_jsx("div", { className: "w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-gray-600 text-sm font-medium", children: (member.name || member.ethAddress || "?")[0].toUpperCase() }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: member.name || "Unknown" }), _jsx("div", { className: "text-xs font-mono text-gray-500 truncate", children: member.ethAddress }), member.phid && member.name && (_jsxs("a", { href: `${config.renownProfileBasePath}/${member.name}`, className: "text-xs text-blue-600 hover:text-blue-800 hover:underline", onClick: (e) => e.stopPropagation(), children: [config.renownProfileBasePath, "/", member.name] }))] })] }), _jsx(Button, { color: "red", size: "sm", onClick: (e) => {
+                                }, children: [_jsxs("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [member.profileImage ? (_jsx("img", { src: member.profileImage, alt: member.name || "Profile", className: "w-12 h-12 rounded-full object-cover flex-shrink-0 ring-2 ring-gray-200 group-hover:ring-gray-300 transition-all" })) : (_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 ring-2 ring-gray-200 group-hover:ring-gray-300 transition-all", children: _jsx("span", { className: "text-gray-700 text-base font-bold", children: (member.name ||
+                                                        member.ethAddress ||
+                                                        "?")[0].toUpperCase() }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-base font-semibold text-gray-900 mb-0.5", children: member.name || "Unknown" }), _jsx("div", { className: "text-xs font-mono text-gray-600 truncate mb-1", children: truncateAddress(member.ethAddress || "") }), member.phid && (_jsxs("a", { href: `${config.renownProfileBasePath}/${member.phid}`, className: "text-xs text-gray-600 hover:text-gray-900 hover:underline inline-flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: [_jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }), "View Profile"] }))] })] }), _jsx(Button, { color: "red", size: "sm", onClick: (e) => {
                                             e.stopPropagation();
                                             onRemoveMember(member.id);
                                         }, children: "Remove" })] }, member.id)))) : (_jsx("p", { className: "text-sm text-gray-500", children: "No team members added yet" })) })] }) })] }));

package/dist/editors/builder-team-editor/components/PackageForm.js CHANGED Viewed

@@ -1,31 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Form, PHIDField, } from "@powerhousedao/document-engineering";
-import { GraphQLClient } from "graphql-request";
 import { useState } from "react";
-import { config } from "../config.js";
-const graphqlClient = new GraphQLClient(config.vetraGraphqlEndpoint);
-const SEARCH_PACKAGES_QUERY = `
-  query SearchPackages($search: String!) {
-    vetraPackages(search: $search) {
-      authorName
-      name
-      githubUrl
-      documentId
-      description
-    }
-  }
-`;
-const SEARCH_PACKAGES_BY_DOCUMENT_ID_QUERY = `
-  query SearchPackagesByDocumentId($documentIds: [PHID!]) {
-    vetraPackages(documentId_in: $documentIds) {
-      authorName
-      name
-      githubUrl
-      documentId
-      description
-    }
-  }
-`;
+import { getPackage, searchPackageOptions, getPackageOption, packageDataToPackageInfo } from "../services/vetra-api.js";
 export function PackageForm({ spaceId, onSave, onCancel }) {
     const [selectedPhid, setSelectedPhid] = useState("");
     const [packageInfo, setPackageInfo] = useState(null);
@@ -35,58 +11,14 @@ export function PackageForm({ spaceId, onSave, onCancel }) {
             setPackageInfo(null);
         }
     };
-    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm border", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: _jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Add Package" }) }), _jsx("div", { className: "p-6", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-4", children: [_jsx(PHIDField, { name: "packageId", label: "Package Name", value: selectedPhid, onChange: (phid) => {
+    return (_jsxs("div", { className: "bg-white rounded-lg shadow-md border border-gray-300 mb-4", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }), _jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Add Package" })] }) }), _jsx("div", { className: "p-6", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-4", children: [_jsx(PHIDField, { name: `packageId-${spaceId}`, label: "Package Name", value: selectedPhid, onChange: async (phid) => {
                                     setSelectedPhid(phid);
                                     // Fetch the full package info when a selection is made
                                     if (phid) {
-                                        graphqlClient
-                                            .request(SEARCH_PACKAGES_BY_DOCUMENT_ID_QUERY, {
-                                            documentIds: [phid],
-                                        })
-                                            .then((data) => {
-                                            if (data.vetraPackages.length > 0) {
-                                                const pkg = data.vetraPackages[0];
-                                                setPackageInfo({
-                                                    id: "", // Will be set by handleAddPackage
-                                                    phid: pkg.documentId,
-                                                    title: pkg.name,
-                                                    description: pkg.description,
-                                                    github: pkg.githubUrl || null,
-                                                    npm: null,
-                                                    vetraDriveUrl: null,
-                                                });
-                                            }
-                                        });
+                                        const pkg = await getPackage(phid);
+                                        if (pkg) {
+                                            setPackageInfo(packageDataToPackageInfo(pkg));
+                                        }
                                     }
-                                }, allowUris: true, autoComplete: true, initialOptions: [], fetchOptionsCallback: async (userInput) => {
-                                    const data = await graphqlClient.request(SEARCH_PACKAGES_QUERY, { search: userInput });
-                                    const options = data.vetraPackages.map((pkg) => ({
-                                        id: pkg.documentId,
-                                        title: pkg.name,
-                                        value: pkg.documentId,
-                                        description: pkg.description,
-                                        path: {
-                                            text: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                            url: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                        },
-                                    }));
-                                    console.log(options);
-                                    return options;
-                                }, fetchSelectedOptionCallback: async (value) => {
-                                    const data = await graphqlClient.request(SEARCH_PACKAGES_BY_DOCUMENT_ID_QUERY, {
-                                        documentIds: [value],
-                                    });
-                                    const options = data.vetraPackages.map((pkg) => ({
-                                        id: pkg.documentId,
-                                        title: pkg.name,
-                                        value: pkg.documentId,
-                                        description: pkg.description,
-                                        path: {
-                                            text: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                            url: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                        },
-                                    }));
-                                    const entry = options[0];
-                                    return entry;
-                                }, variant: "withValueTitleAndDescription", required: true, viewMode: "edition", placeholder: "Enter package name" }), _jsxs("div", { className: "flex justify-end space-x-3", children: [_jsx(Button, { color: "light", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: !selectedPhid || !spaceId, children: "Add Package" })] })] }) }) })] }));
+                                }, allowUris: true, autoComplete: true, initialOptions: [], fetchOptionsCallback: searchPackageOptions, fetchSelectedOptionCallback: getPackageOption, variant: "withValueTitleAndDescription", required: true, viewMode: "edition", placeholder: "Enter package name" }), _jsxs("div", { className: "flex justify-end space-x-3 pt-2", children: [_jsx(Button, { color: "light", onClick: onCancel, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] }) }), _jsx(Button, { onClick: handleSave, disabled: !selectedPhid || !spaceId, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), "Add Package"] }) })] })] }) }) })] }));
 }

package/dist/editors/builder-team-editor/components/PackageItem.js CHANGED Viewed

@@ -1,99 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Form, PHIDField, } from "@powerhousedao/document-engineering";
-import { GraphQLClient } from "graphql-request";
+import { Button, Form, PHIDField, Icon, } from "@powerhousedao/document-engineering";
 import { useState } from "react";
 import { config } from "../config.js";
-const graphqlClient = new GraphQLClient(config.vetraGraphqlEndpoint);
-const SEARCH_PACKAGES_QUERY = `
-  query SearchPackages($search: String!) {
-    vetraPackages(search: $search) {
-      authorName
-      name
-      githubUrl
-      documentId
-      npmUrl
-      documentId
-      description
-    }
-  }
-`;
-const SEARCH_PACKAGES_BY_DOCUMENT_ID_QUERY = `
-  query SearchPackagesByDocumentId($documentIds: [PHID!]) {
-    vetraPackages(documentId_in: $documentIds) {
-      authorName
-      name
-      githubUrl
-      documentId
-      npmUrl
-      documentId
-      description
-    }
-  }
-`;
+import { getPackage, searchPackageOptions, getPackageOption, packageDataToPackageInfo } from "../services/vetra-api.js";
 export function PackageItem({ pkg, isEditing, onEdit, onDelete, onSave, onCancel, }) {
-    const [packages, setPackages] = useState([]);
-    const [displayedPkg, setDisplayedPkg] = useState(pkg);
     const [selectedPackage, setSelectedPackage] = useState(pkg);
     const handleSave = () => {
         onSave(selectedPackage);
     };
     if (isEditing) {
-        return (_jsx("div", { className: "p-3 bg-gray-50 rounded border", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-3", children: [_jsx(PHIDField, { name: "packageName", label: "Package Name", initialOptions: [displayedPkg].map((p) => ({
-                                value: displayedPkg.phid ?? "",
-                                description: displayedPkg.description ?? "",
-                                path: {
-                                    text: `${config.vetraPackageBasePath}/${displayedPkg.title}`,
-                                    url: `${config.vetraPackageBasePath}/${displayedPkg.title}`,
-                                },
-                                title: displayedPkg.title ?? "",
-                            })), value: displayedPkg.phid ?? undefined, allowUris: true, autoComplete: true, fetchOptionsCallback: async (userInput) => {
-                                const data = await graphqlClient.request(SEARCH_PACKAGES_QUERY, { search: userInput });
-                                const options = data.vetraPackages.map((pkg) => ({
-                                    id: pkg.documentId,
-                                    title: pkg.name,
-                                    value: pkg.documentId,
-                                    description: pkg.description,
-                                    path: {
-                                        text: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                        url: `${config.vetraPackageBasePath}/${pkg.name}`,
+        return (_jsx("div", { className: "p-4 bg-gray-50 rounded-lg border border-gray-300 shadow-sm", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-3", children: [_jsx(PHIDField, { name: `packageName-${pkg.id}`, label: "Package Name", initialOptions: selectedPackage.phid
+                                ? [
+                                    {
+                                        value: selectedPackage.phid,
+                                        description: selectedPackage.description ?? "",
+                                        path: {
+                                            text: `${config.vetraPackageBasePath}/${selectedPackage.phid}`,
+                                            url: `${config.vetraPackageBasePath}/${selectedPackage.phid}`,
+                                        },
+                                        title: selectedPackage.title ?? "",
+                                        icon: "PackageManager",
                                     },
-                                }));
-                                console.log(options);
-                                return options;
-                            }, fetchSelectedOptionCallback: async (value) => {
-                                const data = await graphqlClient.request(SEARCH_PACKAGES_BY_DOCUMENT_ID_QUERY, {
-                                    documentIds: [value],
-                                });
-                                const pkg = data.vetraPackages[0];
-                                if (!pkg) {
+                                ]
+                                : [], value: selectedPackage.phid ?? undefined, onChange: async (phid) => {
+                                if (!phid) {
                                     return;
                                 }
-                                const newSelectedPackage = {
-                                    ...pkg,
-                                    github: pkg.githubUrl,
-                                    npm: pkg.npmUrl,
-                                    phid: pkg.documentId,
-                                    vetraDriveUrl: pkg.vetraDriveUrl,
-                                    title: pkg.name,
-                                    id: selectedPackage.id,
-                                    description: pkg.description,
-                                };
-                                setSelectedPackage(newSelectedPackage);
-                                setDisplayedPkg(newSelectedPackage);
-                                // Update the entry immediately when refresh is clicked
-                                // onSave(newSelectedPackage);
-                                return {
-                                    title: pkg.name,
-                                    value: pkg.documentId,
-                                    description: pkg.description,
-                                    path: {
-                                        text: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                        url: `${config.vetraPackageBasePath}/${pkg.name}`,
-                                    },
-                                };
-                            }, onSelect: (e) => {
-                                console.log(e.target);
-                            }, variant: "withValueTitleAndDescription", required: true, viewMode: "edition", placeholder: "Enter package name" }), _jsxs("div", { className: "flex justify-end space-x-3", children: [_jsx(Button, { color: "light", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: !selectedPackage, children: "Save Changes" })] })] }) }) }));
+                                const pkg = await getPackage(phid);
+                                if (pkg) {
+                                    setSelectedPackage(packageDataToPackageInfo(pkg, selectedPackage.id));
+                                }
+                            }, allowUris: true, autoComplete: true, fetchOptionsCallback: searchPackageOptions, fetchSelectedOptionCallback: async (value) => {
+                                const pkg = await getPackage(value);
+                                if (pkg) {
+                                    setSelectedPackage(packageDataToPackageInfo(pkg, selectedPackage.id));
+                                }
+                                return getPackageOption(value);
+                            }, variant: "withValueTitleAndDescription", required: true, viewMode: "edition", placeholder: "Enter package name" }), _jsxs("div", { className: "flex justify-end space-x-3 pt-2", children: [_jsx(Button, { color: "light", onClick: onCancel, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] }) }), _jsx(Button, { onClick: handleSave, disabled: !selectedPackage, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), "Save Changes"] }) })] })] }) }) }));
     }
-    return (_jsx("div", { className: "p-3 bg-gray-50 rounded border", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "font-medium text-gray-900", children: displayedPkg.title }), displayedPkg.description && (_jsx("p", { className: "text-sm text-gray-500", children: displayedPkg.description })), displayedPkg.phid && displayedPkg.title && (_jsxs("a", { href: `${config.vetraPackageBasePath}/${displayedPkg.title}`, className: "text-xs text-blue-600 hover:text-blue-800 hover:underline block mt-1", children: [config.vetraPackageBasePath, "/", displayedPkg.title] }))] }), _jsxs("div", { className: "flex space-x-2", children: [_jsx(Button, { color: "light", size: "sm", onClick: onEdit, children: "Edit" }), _jsx(Button, { color: "red", size: "sm", onClick: onDelete, children: "Remove" })] })] }) }));
+    return (_jsx("div", { className: "p-4 bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md hover:border-gray-300 transition-all group", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx(Icon, { name: "PackageManager", size: "16px", color: "rgb(75 85 99)" }), _jsx("span", { className: "font-semibold text-gray-900 truncate", children: pkg.title || "Untitled Package" })] }), pkg.description && (_jsx("p", { className: "text-sm text-gray-600 ml-6 leading-relaxed", children: pkg.description })), pkg.phid && (_jsxs("a", { href: `${config.vetraPackageBasePath}/${pkg.phid}`, className: "text-xs text-gray-600 hover:text-gray-900 hover:underline ml-6 mt-1.5 inline-flex items-center gap-1 group/link", target: "_blank", rel: "noopener noreferrer", children: [_jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }), "View Package"] }))] }), _jsxs("div", { className: "flex space-x-2 ml-4", children: [_jsx(Button, { color: "light", size: "sm", onClick: onEdit, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }), "Edit"] }) }), _jsx(Button, { color: "red", size: "sm", onClick: onDelete, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }), "Remove"] }) })] })] }) }));
 }

package/dist/editors/builder-team-editor/components/PackagesTable.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { VetraPackageInfo } from "../../../document-models/builder-team/index.js";
+interface PackagesTableProps {
+    packages: VetraPackageInfo[];
+    onEdit: (packageId: string) => void;
+    onDelete: (packageId: string) => void;
+    onReorder: (packageIds: string[], targetIndex: number) => void;
+}
+export declare function PackagesTable({ packages, onEdit, onDelete, onReorder, }: PackagesTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editors/builder-team-editor/components/PackagesTable.js ADDED Viewed

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ObjectSetTable, Icon } from "@powerhousedao/document-engineering";
+import { useMemo } from "react";
+import { config } from "../config.js";
+export function PackagesTable({ packages, onEdit, onDelete, onReorder, }) {
+    const columns = useMemo(() => [
+        {
+            field: "title",
+            title: "Package Name",
+            type: "string",
+            width: "250px",
+            renderHeader: () => _jsx("div", { className: "px-4", children: "Package Name" }),
+            renderCell: (value, context) => {
+                const pkg = context.row;
+                return (_jsxs("div", { className: "flex items-center gap-2 px-4", children: [_jsx(Icon, { name: "PackageManager", size: "16px", color: "rgb(75 85 99)" }), _jsx("span", { className: "font-medium text-gray-900", children: value || "Untitled Package" })] }));
+            },
+        },
+        {
+            field: "description",
+            title: "Description",
+            type: "string",
+            width: "300px",
+            renderHeader: () => _jsx("div", { className: "px-4", children: "Description" }),
+            renderCell: (value) => {
+                return (_jsx("div", { className: "px-4", children: _jsx("span", { className: "text-sm text-gray-600 line-clamp-2", children: value || "—" }) }));
+            },
+        },
+        {
+            field: "phid",
+            title: "PHID",
+            type: "phid",
+            width: "200px",
+            renderHeader: () => _jsx("div", { className: "px-4", children: "PHID" }),
+            renderCell: (value) => {
+                if (!value)
+                    return _jsx("div", { className: "px-4", children: _jsx("span", { className: "text-gray-400", children: "\u2014" }) });
+                return (_jsx("div", { className: "px-4", children: _jsxs("code", { className: "text-xs bg-gray-100 px-2 py-1 rounded font-mono text-gray-700", children: [value.slice(0, 16), "..."] }) }));
+            },
+        },
+        {
+            field: "phid",
+            title: "Links",
+            type: "string",
+            width: "120px",
+            align: "center",
+            renderHeader: () => _jsx("div", { className: "px-4", children: "Links" }),
+            renderCell: (value, context) => {
+                const pkg = context.row;
+                const hasLinks = pkg.phid || pkg.github || pkg.vetraDriveUrl;
+                if (!hasLinks) {
+                    return _jsx("div", { className: "px-4", children: _jsx("span", { className: "text-gray-400", children: "\u2014" }) });
+                }
+                return (_jsxs("div", { className: "flex items-center gap-2 justify-center px-4", children: [pkg.phid && (_jsx("a", { href: `${config.vetraPackageBasePath}/${pkg.phid}`, className: "text-gray-700 hover:text-gray-900", target: "_blank", rel: "noopener noreferrer", title: "View Package", onClick: (e) => e.stopPropagation(), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }) })), pkg.github && (_jsx("a", { href: pkg.github, className: "text-gray-700 hover:text-gray-900", target: "_blank", rel: "noopener noreferrer", title: "View GitHub", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { name: "Github", size: "16px" }) })), pkg.vetraDriveUrl && (() => {
+                            // Extract driveId from vetraDriveUrl (e.g., "/d/vetra-builder-package" -> "vetra-builder-package")
+                            const driveId = pkg.vetraDriveUrl.replace(/^\/d\//, '');
+                            return (_jsxs(_Fragment, { children: [_jsx("a", { href: pkg.vetraDriveUrl, className: "text-gray-700 hover:text-gray-900", target: "_blank", rel: "noopener noreferrer", title: "View Vetra Drive", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { name: "Drive", size: "16px" }) }), _jsx("a", { href: `${window.location.origin}/?driveUrl=${driveId}`, className: "text-gray-700 hover:text-gray-900", target: "_blank", rel: "noopener noreferrer", title: "Connect to Drive", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { name: "ConnectSmall", size: "16px" }) })] }));
+                        })()] }));
+            },
+        },
+    ], []);
+    return (_jsx("div", { className: "w-full packages-table", children: _jsx(ObjectSetTable, { data: packages, columns: columns, allowRowSelection: false, showRowNumbers: false, width: "100%", minRowHeight: 56, onReorder: (rows, targetIndex) => {
+                const packageIds = rows.map((row) => row.id);
+                onReorder(packageIds, targetIndex);
+            }, actions: {
+                secondary: [
+                    {
+                        label: "Edit Package",
+                        callback: ({ row }) => {
+                            onEdit(row.id);
+                        },
+                    },
+                    {
+                        label: "Remove",
+                        callback: ({ row }) => {
+                            onDelete(row.id);
+                        },
+                    },
+                ],
+            } }) }));
+}

package/dist/editors/builder-team-editor/components/ProfileSection.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Form, StringField, UrlField } from "@powerhousedao/document-engineering";
+import { Button, Form, StringField, UrlField, Icon } from "@powerhousedao/document-engineering";
 export function ProfileSection({ profile, isEditing, onSetProfileName, onSetSlug, onSetDescription, onSetLogo, onUpdateSocials, onClose, }) {
-    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm border", children: [_jsxs("div", { className: "px-6 py-4 border-b border-gray-200", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Profile Information" }), _jsx("p", { className: "text-sm text-gray-500", children: "Manage your builder profile details" })] }), _jsx("div", { className: "p-6", children: isEditing ? (_jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-6", children: [_jsx(StringField, { name: "profileName", label: "Profile Name", value: profile.name, onChange: (e) => onSetProfileName(e.target.value), placeholder: "Enter your profile name", description: "Your public display name" }), _jsx(StringField, { name: "slug", label: "Slug", value: profile.slug, onChange: (e) => onSetSlug(e.target.value), placeholder: "your-slug", description: "Unique identifier for your profile (used in URLs)" }), _jsx(StringField, { name: "description", label: "Description", value: profile.description || "", onChange: (e) => onSetDescription(e.target.value), placeholder: "Tell us about yourself and your work", description: "Brief description of your work and interests" }), _jsx(UrlField, { name: "logo", label: "Logo URL", value: profile.logo || "", onChange: (e) => onSetLogo(e.target.value), placeholder: "https://example.com/logo.png", description: "URL to your profile logo image" }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-md font-medium text-gray-900", children: "Social Links" }), _jsx(UrlField, { name: "github", label: "GitHub", value: profile.socials.github || "", onChange: (e) => onUpdateSocials({ ...profile.socials, github: e.target.value }), placeholder: "https://github.com/username" }), _jsx(UrlField, { name: "website", label: "Website", value: profile.socials.website || "", onChange: (e) => onUpdateSocials({ ...profile.socials, website: e.target.value }), placeholder: "https://your-website.com" }), _jsx(UrlField, { name: "x", label: "X (Twitter)", value: profile.socials.xProfile || "", onChange: (e) => onUpdateSocials({ ...profile.socials, x: e.target.value }), placeholder: "https://x.com/username" })] }), _jsxs("div", { className: "flex justify-end space-x-3", children: [_jsx(Button, { color: "light", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: onClose, children: "Save Changes" })] })] }) })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Name" }), _jsx("p", { className: "mt-1 text-sm text-gray-900", children: profile.name || "Not set" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Slug" }), _jsx("p", { className: "mt-1 text-sm text-gray-900", children: profile.slug ? `@${profile.slug}` : "Not set" })] })] }), profile.description && (_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Description" }), _jsx("p", { className: "mt-1 text-sm text-gray-900", children: profile.description })] })), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Social Links" }), _jsxs("div", { className: "mt-2 flex space-x-4", children: [profile.socials.github && (_jsx("a", { href: profile.socials.github, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800", children: "GitHub" })), profile.socials.website && (_jsx("a", { href: profile.socials.website, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800", children: "Website" })), profile.socials.xProfile && (_jsx("a", { href: profile.socials.xProfile, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800", children: "X (Twitter)" })), !profile.socials.github && !profile.socials.website && !profile.socials.xProfile && (_jsx("span", { className: "text-gray-500 text-sm", children: "No social links added" }))] })] })] })) })] }));
+    return (_jsxs("div", { className: "bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden", children: [_jsx("div", { className: "px-6 py-5 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "People", size: "24px", color: "rgb(75 85 99)" }), _jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Profile Information" }), _jsx("p", { className: "text-sm text-gray-600 mt-0.5", children: "Manage your builder profile details" })] })] }) }), _jsx("div", { className: "p-6", children: isEditing ? (_jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-6", children: [_jsx(StringField, { name: "profileName", label: "Profile Name", value: profile.name, onChange: (e) => onSetProfileName(e.target.value), placeholder: "Enter your profile name", description: "Your public display name" }), _jsx(StringField, { name: "slug", label: "Slug", value: profile.slug, onChange: (e) => onSetSlug(e.target.value), placeholder: "your-slug", description: "Unique identifier for your profile (used in URLs)" }), _jsx(StringField, { name: "description", label: "Description", value: profile.description || "", onChange: (e) => onSetDescription(e.target.value), placeholder: "Tell us about yourself and your work", description: "Brief description of your work and interests" }), _jsx(UrlField, { name: "logo", label: "Logo URL", value: profile.logo || "", onChange: (e) => onSetLogo(e.target.value), placeholder: "https://example.com/logo.png", description: "URL to your profile logo image" }), _jsxs("div", { className: "space-y-4 pt-4 border-t border-gray-200", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Social Links" })] }), _jsx(UrlField, { name: "github", label: "GitHub", value: profile.socials.github || "", onChange: (e) => onUpdateSocials({ ...profile.socials, github: e.target.value }), placeholder: "https://github.com/username" }), _jsx(UrlField, { name: "website", label: "Website", value: profile.socials.website || "", onChange: (e) => onUpdateSocials({ ...profile.socials, website: e.target.value }), placeholder: "https://your-website.com" }), _jsx(UrlField, { name: "x", label: "X (Twitter)", value: profile.socials.xProfile || "", onChange: (e) => onUpdateSocials({ ...profile.socials, x: e.target.value }), placeholder: "https://x.com/username" })] }), _jsxs("div", { className: "flex justify-end space-x-3 pt-4", children: [_jsx(Button, { color: "light", onClick: onClose, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] }) }), _jsx(Button, { onClick: onClose, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), "Save Changes"] }) })] })] }) })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "bg-gray-50 p-4 rounded-lg border border-gray-200", children: [_jsx("label", { className: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2", children: "Name" }), _jsx("p", { className: "text-base font-medium text-gray-900", children: profile.name || "Not set" })] }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg border border-gray-200", children: [_jsx("label", { className: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2", children: "Slug" }), _jsx("p", { className: "text-base font-medium text-gray-900", children: profile.slug ? `@${profile.slug}` : "Not set" })] })] }), profile.description && (_jsxs("div", { className: "bg-gray-50 p-4 rounded-lg border border-gray-200", children: [_jsx("label", { className: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2", children: "Description" }), _jsx("p", { className: "text-base text-gray-900 leading-relaxed", children: profile.description })] })), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg border border-gray-200", children: [_jsx("label", { className: "block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3", children: "Social Links" }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [profile.socials.github && (_jsxs("a", { href: profile.socials.github, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 px-3 py-2 bg-white rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors", children: [_jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) }), "GitHub"] })), profile.socials.website && (_jsxs("a", { href: profile.socials.website, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 px-3 py-2 bg-white rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }), "Website"] })), profile.socials.xProfile && (_jsxs("a", { href: profile.socials.xProfile, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 px-3 py-2 bg-white rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors", children: [_jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }), "X (Twitter)"] })), !profile.socials.github && !profile.socials.website && !profile.socials.xProfile && (_jsx("span", { className: "text-gray-500 text-sm italic", children: "No social links added" }))] })] })] })) })] }));
 }

package/dist/editors/builder-team-editor/components/QuickStats.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@powerhousedao/document-engineering";
 export function QuickStats({ spaces, members }) {
     const totalPackages = spaces.reduce((total, space) => total + space.packages.length, 0);
-    return (_jsxs("div", { className: "bg-white rounded-lg shadow-sm border", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: _jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Quick Stats" }) }), _jsx("div", { className: "p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Spaces" }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: spaces.length })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Total Packages" }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: totalPackages })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Team Members" }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: members.length })] })] }) })] }));
+    return (_jsxs("div", { className: "bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Quick Stats" })] }) }), _jsx("div", { className: "p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Spaces" })] }), _jsx("span", { className: "text-2xl font-bold text-gray-900", children: spaces.length })] }), _jsxs("div", { className: "flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: "PackageManager", size: "20px", color: "rgb(75 85 99)" }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Total Packages" })] }), _jsx("span", { className: "text-2xl font-bold text-gray-900", children: totalPackages })] }), _jsxs("div", { className: "flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Team Members" })] }), _jsx("span", { className: "text-2xl font-bold text-gray-900", children: members.length })] })] }) })] }));
 }

package/dist/editors/builder-team-editor/components/SpaceForm.js CHANGED Viewed

@@ -7,5 +7,5 @@ export function SpaceForm({ initialTitle = "", initialDescription = "", onSave,
     const handleSave = () => {
         onSave(title, description);
     };
-    return (_jsx("div", { className: "p-4 bg-gray-50 rounded-lg", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-4", children: [_jsx(StringField, { name: "spaceTitle", label: "Space Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Enter space title" }), _jsx(StringField, { name: "spaceDescription", label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter space description" }), _jsxs("div", { className: "flex justify-end space-x-3", children: [_jsx(Button, { color: "light", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: !title.trim(), children: saveButtonText })] })] }) }) }));
+    return (_jsxs("div", { className: "p-5 bg-gray-50 rounded-lg border border-gray-300 shadow-sm mb-5", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Create New Space" })] }), _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-4", children: [_jsx(StringField, { name: "spaceTitle", label: "Space Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Enter space title" }), _jsx(StringField, { name: "spaceDescription", label: "Description (optional)", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Enter space description" }), _jsxs("div", { className: "flex justify-end space-x-3 pt-2", children: [_jsx(Button, { color: "light", onClick: onCancel, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] }) }), _jsx(Button, { onClick: handleSave, disabled: !title.trim(), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), saveButtonText] }) })] })] }) })] }));
 }