@powerhousedao/vetra-builder-package 0.0.20 → 0.0.22

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

@@ -1,31 +1,9 @@
 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
-    }
-  }
-`;
-const GET_PROFILE_QUERY = `
-  query ($input: GetProfileInput!) {
-    getProfile(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);
     const handleAddMember = () => {
@@ -63,81 +41,39 @@ export function MembersSection({ members, onAddMember, onRemoveMember, }) {
                                                 {
                                                     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,
-                                                },
-                                            });
-                                            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) => {
-                                            try {
-                                                const data = await graphqlClient.request(GET_PROFILE_QUERY, {
-                                                    input: {
-                                                        id: value,
-                                                        driveId: "renown-profiles",
-                                                    },
-                                                });
-                                                const profile = data.getProfile;
-                                                if (!profile) {
-                                                    return;
-                                                }
-                                                const profileData = {
-                                                    documentId: profile.documentId,
-                                                    ethAddress: profile.ethAddress,
-                                                    username: profile.username,
-                                                    userImage: profile.userImage,
-                                                };
-                                                // Update the selected profile state with fresh data
-                                                setSelectedProfile(profileData);
-                                                return {
-                                                    title: profile.username,
-                                                    value: profile.documentId,
-                                                    description: profile.ethAddress,
-                                                    path: {
-                                                        text: `${config.renownProfileBasePath}/${profile.username}`,
-                                                        url: `${config.renownProfileBasePath}/${profile.username}`,
-                                                    },
-                                                };
-                                            }
-                                            catch (error) {
-                                                console.error("Failed to fetch selected profile:", error);
-                                                return undefined;
+                                            : [], allowUris: false, autoComplete: true, fetchOptionsCallback: searchProfileOptions, fetchSelectedOptionCallback: async (value) => {
+                                            const profile = await getProfile(value);
+                                            if (profile) {
+                                                setSelectedProfile(profile);
                                             }
-                                        }, onChange: (value) => {
+                                            return getProfileOption(value);
+                                        }, onChange: async (value) => {
                                             if (!value) {
                                                 setSelectedProfile(null);
                                                 return;
                                             }
-                                            // Note: The profile data is already set by fetchSelectedOptionCallback
-                                            // or fetchOptionsCallback, so we don't need to fetch again here
-                                        }, 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: () => {
+                                            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: 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) {
-                                        setSelectedProfile({
-                                            documentId: member.phid,
-                                            ethAddress: member.ethAddress || "",
-                                            username: member.name || member.ethAddress || "",
-                                            userImage: member.profileImage ?? undefined,
-                                        });
+                                        const profile = await getProfile(member.phid);
+                                        if (profile) {
+                                            setSelectedProfile(profile);
+                                        }
                                     }
-                                }, 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: member.ethAddress }), member.phid && member.name && (_jsxs("a", { href: `${config.renownProfileBasePath}/${member.name}`, 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) => {
+                                }, 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

@@ -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-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", 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 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"] }) })] })] }) }) })] }));
+                                }, 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

@@ -1,103 +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-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", label: "Package Name", initialOptions: displayedPkg.phid
+        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: displayedPkg.phid,
-                                        description: displayedPkg.description ?? "",
+                                        value: selectedPackage.phid,
+                                        description: selectedPackage.description ?? "",
                                         path: {
-                                            text: `${config.vetraPackageBasePath}/${displayedPkg.title || ""}`,
-                                            url: `${config.vetraPackageBasePath}/${displayedPkg.title || ""}`,
+                                            text: `${config.vetraPackageBasePath}/${selectedPackage.phid}`,
+                                            url: `${config.vetraPackageBasePath}/${selectedPackage.phid}`,
                                         },
-                                        title: displayedPkg.title ?? "",
+                                        title: selectedPackage.title ?? "",
+                                        icon: "PackageManager",
                                     },
                                 ]
-                                : [], 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}`,
-                                    },
-                                }));
-                                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);
+                                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-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("svg", { className: "w-4 h-4 text-gray-600 flex-shrink-0", 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("span", { className: "font-semibold text-gray-900 truncate", children: displayedPkg.title || "Untitled Package" })] }), displayedPkg.description && (_jsx("p", { className: "text-sm text-gray-600 ml-6 leading-relaxed", children: displayedPkg.description })), displayedPkg.phid && displayedPkg.title && (_jsxs("a", { href: `${config.vetraPackageBasePath}/${displayedPkg.title}`, 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" }) }), config.vetraPackageBasePath, "/", displayedPkg.title] }))] }), _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"] }) })] })] }) }));
+    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

@@ -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

@@ -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

@@ -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-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("svg", { className: "w-6 h-6 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), _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" }))] })] })] })) })] }));
+    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

@@ -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-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("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("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 })] })] }) })] }));
+    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/SpaceItem.d.ts

@@ -16,6 +16,7 @@ interface SpaceItemProps {
     onDeletePackage: (packageId: string) => void;
     onSavePackage: (packageInfo: VetraPackageInfo) => void;
     onCancelPackageEdit: () => void;
+    onReorderPackages: (packageIds: string[], targetIndex: number) => void;
 }
-export declare function SpaceItem({ space, isEditing, editingSpaceTitle, editingSpaceDescription, editingPackageId, onEdit, onDelete, onSaveEdit, onCancelEdit, onSetEditingTitle, onSetEditingDescription, onAddPackage, onEditPackage, onDeletePackage, onSavePackage, onCancelPackageEdit, }: SpaceItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpaceItem({ space, isEditing, editingSpaceTitle, editingSpaceDescription, editingPackageId, onEdit, onDelete, onSaveEdit, onCancelEdit, onSetEditingTitle, onSetEditingDescription, onAddPackage, onEditPackage, onDeletePackage, onSavePackage, onCancelPackageEdit, onReorderPackages, }: SpaceItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editors/builder-team-editor/components/SpaceItem.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Form, StringField } from "@powerhousedao/document-engineering";
+import { Button, Form, StringField, Icon } from "@powerhousedao/document-engineering";
 import { PackageItem } from "./PackageItem.js";
+import { PackagesTable } from "./PackagesTable.js";
 function EditSpaceForm({ title, description, onTitleChange, onDescriptionChange, onSave, onCancel, }) {
     return (_jsx(Form, { onSubmit: (e) => e.preventDefault(), children: _jsxs("div", { className: "space-y-4", children: [_jsx(StringField, { name: "editingSpaceTitle", label: "Space Title", value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "Enter space title" }), _jsx(StringField, { name: "editingSpaceDescription", label: "Description (optional)", value: description, onChange: (e) => onDescriptionChange(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: onSave, disabled: !title.trim(), children: "Save Changes" })] })] }) }));
 }
-export function SpaceItem({ space, isEditing, editingSpaceTitle, editingSpaceDescription, editingPackageId, onEdit, onDelete, onSaveEdit, onCancelEdit, onSetEditingTitle, onSetEditingDescription, onAddPackage, onEditPackage, onDeletePackage, onSavePackage, onCancelPackageEdit, }) {
+export function SpaceItem({ space, isEditing, editingSpaceTitle, editingSpaceDescription, editingPackageId, onEdit, onDelete, onSaveEdit, onCancelEdit, onSetEditingTitle, onSetEditingDescription, onAddPackage, onEditPackage, onDeletePackage, onSavePackage, onCancelPackageEdit, onReorderPackages, }) {
     if (isEditing) {
         return (_jsx("div", { className: "bg-gray-50 border border-gray-300 rounded-lg p-5 shadow-sm", children: _jsx(EditSpaceForm, { title: editingSpaceTitle, description: editingSpaceDescription, onTitleChange: onSetEditingTitle, onDescriptionChange: onSetEditingDescription, onSave: onSaveEdit, onCancel: onCancelEdit }) }));
     }
-    return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition-all group", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600 flex-shrink-0", 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("h3", { className: "text-lg font-semibold text-gray-900 truncate", children: space.title })] }), space.description && (_jsx("p", { className: "text-sm text-gray-600 mt-1 leading-relaxed", children: space.description })), _jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [_jsx("svg", { className: "w-4 h-4 text-gray-400", 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" }) }), _jsxs("span", { className: "text-xs font-medium text-gray-500", children: [space.packages.length, " package", space.packages.length !== 1 ? "s" : ""] })] })] }), _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: "light", size: "sm", onClick: () => onAddPackage(space.id), 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: "M12 4v16m8-8H4" }) }), "Add Package"] }) }), _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" }) }), "Delete"] }) })] })] }), space.packages.length > 0 && (_jsx("div", { className: "mt-4 pt-4 border-t border-gray-200 space-y-2", children: space.packages.map((pkg) => (_jsx(PackageItem, { pkg: pkg, isEditing: editingPackageId === pkg.id, onEdit: () => onEditPackage(pkg.id), onDelete: () => onDeletePackage(pkg.id), onSave: (selectedPackage) => onSavePackage(selectedPackage), onCancel: onCancelPackageEdit }, pkg.id))) }))] }));
+    return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition-all group", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("svg", { className: "w-5 h-5 text-gray-600 flex-shrink-0", 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("h3", { className: "text-lg font-semibold text-gray-900 truncate", children: space.title })] }), space.description && (_jsx("p", { className: "text-sm text-gray-600 mt-1 leading-relaxed", children: space.description })), _jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [_jsx(Icon, { name: "PackageManager", size: "16px", color: "rgb(156 163 175)" }), _jsxs("span", { className: "text-xs font-medium text-gray-500", children: [space.packages.length, " package", space.packages.length !== 1 ? "s" : ""] })] })] }), _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: "light", size: "sm", onClick: () => onAddPackage(space.id), 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: "M12 4v16m8-8H4" }) }), "Add Package"] }) }), _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" }) }), "Delete"] }) })] })] }), space.packages.length > 0 ? (_jsxs("div", { className: "mt-4 pt-4 border-t border-gray-200", children: [_jsx("div", { className: "mb-3 flex items-center justify-between", children: _jsx("h4", { className: "text-sm font-semibold text-gray-700", children: "Packages" }) }), editingPackageId ? (_jsx("div", { className: "space-y-2", children: space.packages.map((pkg) => (_jsx(PackageItem, { pkg: pkg, isEditing: editingPackageId === pkg.id, onEdit: () => onEditPackage(pkg.id), onDelete: () => onDeletePackage(pkg.id), onSave: (selectedPackage) => onSavePackage(selectedPackage), onCancel: onCancelPackageEdit }, pkg.id))) })) : (_jsx(PackagesTable, { packages: space.packages, onEdit: onEditPackage, onDelete: onDeletePackage, onReorder: onReorderPackages }))] })) : (_jsx("div", { className: "mt-4 pt-4 border-t border-gray-200 text-center py-6", children: _jsx("p", { className: "text-sm text-gray-500", children: "No packages in this space yet" }) }))] }));
 }