@powerhousedao/vetra-builder-package 0.0.18 → 0.0.20

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.
@@ -1,5 +1,5 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Button } from "@powerhousedao/document-engineering";
3
3
  export function Header({ profile, isEditingProfile, onToggleEdit }) {
4
- return (_jsx("div", { className: "bg-white shadow-sm border-b", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "py-6", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("div", { className: "flex-shrink-0", children: profile.logo ? (_jsx("img", { className: "w-12 h-12 rounded-lg object-cover", src: profile.logo, alt: "Logo" })) : (_jsx("div", { className: "w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center", children: _jsx("svg", { className: "w-6 h-6 text-white", 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("h1", { className: "text-2xl font-bold text-gray-900", children: profile.name || "Builder Account" }), _jsx("p", { className: "text-sm text-gray-500", children: profile.slug ? `@${profile.slug}` : "Manage your builder profile and packages" })] })] }), _jsx("div", { className: "flex items-center space-x-3", children: _jsx(Button, { color: "light", onClick: onToggleEdit, children: isEditingProfile ? "Cancel" : "Edit Profile" }) })] }) }) }) }));
4
+ return (_jsx("div", { children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "py-8", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center space-x-5", children: [_jsx("div", { className: "flex-shrink-0", children: profile.logo ? (_jsx("img", { className: "w-20 h-20 rounded-xl object-cover ring-2 ring-gray-200 shadow-sm", src: profile.logo, alt: "Logo" })) : (_jsx("div", { className: "w-20 h-20 bg-gray-100 rounded-xl flex items-center justify-center ring-2 ring-gray-200 shadow-sm", children: _jsx("svg", { className: "w-10 h-10 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" }) }) })) }), _jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900", children: profile.name || "Builder Team" }), _jsx("p", { className: "text-gray-600 mt-1 text-sm", children: profile.slug ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsxs("span", { className: "font-medium", children: ["@", profile.slug] }), _jsx("span", { className: "text-gray-400", children: "\u2022" }), _jsx("span", { children: "Builder Team Profile" })] })) : ("Manage your builder profile and packages") })] })] }), _jsx("div", { className: "flex items-center space-x-3", children: _jsx(Button, { color: "light", onClick: onToggleEdit, children: _jsx("span", { className: "inline-flex items-center gap-2", children: isEditingProfile ? (_jsxs(_Fragment, { 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"] })) : (_jsxs(_Fragment, { 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: "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 Profile"] })) }) }) })] }) }) }) }));
5
5
  }
@@ -15,10 +15,19 @@ const SEARCH_PROFILES_QUERY = `
15
15
  }
16
16
  }
17
17
  `;
18
+ const GET_PROFILE_QUERY = `
19
+ query ($input: GetProfileInput!) {
20
+ getProfile(input: $input) {
21
+ documentId
22
+ ethAddress
23
+ updatedAt
24
+ userImage
25
+ username
26
+ }
27
+ }
28
+ `;
18
29
  export function MembersSection({ members, onAddMember, onRemoveMember, }) {
19
30
  const [selectedProfile, setSelectedProfile] = useState(null);
20
- // Cache of profiles from the last search to avoid refetching on select
21
- const [profilesCache, setProfilesCache] = useState(new Map());
22
31
  const handleAddMember = () => {
23
32
  if (selectedProfile) {
24
33
  const success = onAddMember({
@@ -32,7 +41,24 @@ export function MembersSection({ members, onAddMember, onRemoveMember, }) {
32
41
  }
33
42
  }
34
43
  };
35
- 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
44
+ // Check if the selected profile is already a member
45
+ const existingMember = selectedProfile
46
+ ? members.find((m) => m.phid === selectedProfile.documentId)
47
+ : null;
48
+ const handleUpdateMember = () => {
49
+ if (selectedProfile && existingMember) {
50
+ // Remove the old member and add the updated one
51
+ onRemoveMember(existingMember.id);
52
+ onAddMember({
53
+ phid: selectedProfile.documentId,
54
+ ethAddress: selectedProfile.ethAddress,
55
+ name: selectedProfile.username,
56
+ profileImage: selectedProfile.userImage,
57
+ });
58
+ setSelectedProfile(null);
59
+ }
60
+ };
61
+ 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
36
62
  ? [
37
63
  {
38
64
  value: selectedProfile.documentId,
@@ -51,17 +77,6 @@ export function MembersSection({ members, onAddMember, onRemoveMember, }) {
51
77
  searchString: userInput,
52
78
  },
53
79
  });
54
- // Update the cache with the search results
55
- const newCache = new Map(profilesCache);
56
- data.getProfiles.forEach((profile) => {
57
- newCache.set(profile.documentId, {
58
- documentId: profile.documentId,
59
- ethAddress: profile.ethAddress,
60
- username: profile.username,
61
- userImage: profile.userImage,
62
- });
63
- });
64
- setProfilesCache(newCache);
65
80
  return data.getProfiles.map((profile) => ({
66
81
  id: profile.documentId,
67
82
  title: profile.username,
@@ -73,79 +88,56 @@ export function MembersSection({ members, onAddMember, onRemoveMember, }) {
73
88
  },
74
89
  }));
75
90
  }, fetchSelectedOptionCallback: async (value) => {
76
- // First check cache
77
- const cachedProfile = profilesCache.get(value);
78
- if (cachedProfile) {
79
- setSelectedProfile(cachedProfile);
91
+ try {
92
+ const data = await graphqlClient.request(GET_PROFILE_QUERY, {
93
+ input: {
94
+ id: value,
95
+ driveId: "renown-profiles",
96
+ },
97
+ });
98
+ const profile = data.getProfile;
99
+ if (!profile) {
100
+ return;
101
+ }
102
+ const profileData = {
103
+ documentId: profile.documentId,
104
+ ethAddress: profile.ethAddress,
105
+ username: profile.username,
106
+ userImage: profile.userImage,
107
+ };
108
+ // Update the selected profile state with fresh data
109
+ setSelectedProfile(profileData);
80
110
  return {
81
- title: cachedProfile.username,
82
- value: cachedProfile.documentId,
83
- description: cachedProfile.ethAddress,
111
+ title: profile.username,
112
+ value: profile.documentId,
113
+ description: profile.ethAddress,
84
114
  path: {
85
- text: `${config.renownProfileBasePath}/${cachedProfile.username}`,
86
- url: `${config.renownProfileBasePath}/${cachedProfile.username}`,
115
+ text: `${config.renownProfileBasePath}/${profile.username}`,
116
+ url: `${config.renownProfileBasePath}/${profile.username}`,
87
117
  },
88
118
  };
89
119
  }
90
- // If not in cache, fetch by searching for the documentId
91
- // Note: This is a fallback that may not work perfectly
92
- // Ideally the API would support querying by documentId directly
93
- const data = await graphqlClient.request(SEARCH_PROFILES_QUERY, {
94
- input: {
95
- driveId: "renown-profiles",
96
- searchString: value,
97
- },
98
- });
99
- const profile = data.getProfiles.find((p) => p.documentId === value) ||
100
- data.getProfiles[0];
101
- if (!profile) {
102
- return;
120
+ catch (error) {
121
+ console.error("Failed to fetch selected profile:", error);
122
+ return undefined;
103
123
  }
104
- const profileData = {
105
- documentId: profile.documentId,
106
- ethAddress: profile.ethAddress,
107
- username: profile.username,
108
- userImage: profile.userImage,
109
- };
110
- setSelectedProfile(profileData);
111
- // Update cache
112
- const newCache = new Map(profilesCache);
113
- newCache.set(profile.documentId, profileData);
114
- setProfilesCache(newCache);
115
- return {
116
- title: profile.username,
117
- value: profile.documentId,
118
- description: profile.ethAddress,
119
- path: {
120
- text: `${config.renownProfileBasePath}/${profile.username}`,
121
- url: `${config.renownProfileBasePath}/${profile.username}`,
122
- },
123
- };
124
124
  }, onChange: (value) => {
125
125
  if (!value) {
126
126
  setSelectedProfile(null);
127
127
  return;
128
128
  }
129
- // Use cached profile data if available
130
- const profile = profilesCache.get(value);
131
- if (profile) {
132
- setSelectedProfile(profile);
133
- }
134
- }, 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: () => {
129
+ // Note: The profile data is already set by fetchSelectedOptionCallback
130
+ // or fetchOptionsCallback, so we don't need to fetch again here
131
+ }, 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: () => {
135
132
  if (member.phid) {
136
- const profile = {
133
+ setSelectedProfile({
137
134
  documentId: member.phid,
138
135
  ethAddress: member.ethAddress || "",
139
136
  username: member.name || member.ethAddress || "",
140
137
  userImage: member.profileImage ?? undefined,
141
- };
142
- setSelectedProfile(profile);
143
- // Update cache
144
- const newCache = new Map(profilesCache);
145
- newCache.set(member.phid, profile);
146
- setProfilesCache(newCache);
138
+ });
147
139
  }
148
- }, 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) => {
140
+ }, 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) => {
149
141
  e.stopPropagation();
150
142
  onRemoveMember(member.id);
151
143
  }, children: "Remove" })] }, member.id)))) : (_jsx("p", { className: "text-sm text-gray-500", children: "No team members added yet" })) })] }) })] }));
@@ -35,7 +35,7 @@ export function PackageForm({ spaceId, onSave, onCancel }) {
35
35
  setPackageInfo(null);
36
36
  }
37
37
  };
38
- 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) => {
38
+ 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) => {
39
39
  setSelectedPhid(phid);
40
40
  // Fetch the full package info when a selection is made
41
41
  if (phid) {
@@ -88,5 +88,5 @@ export function PackageForm({ spaceId, onSave, onCancel }) {
88
88
  }));
89
89
  const entry = options[0];
90
90
  return entry;
91
- }, 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" })] })] }) }) })] }));
91
+ }, 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"] }) })] })] }) }) })] }));
92
92
  }
@@ -38,15 +38,19 @@ export function PackageItem({ pkg, isEditing, onEdit, onDelete, onSave, onCancel
38
38
  onSave(selectedPackage);
39
39
  };
40
40
  if (isEditing) {
41
- 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) => ({
42
- value: displayedPkg.phid ?? "",
43
- description: displayedPkg.description ?? "",
44
- path: {
45
- text: `${config.vetraPackageBasePath}/${displayedPkg.title}`,
46
- url: `${config.vetraPackageBasePath}/${displayedPkg.title}`,
47
- },
48
- title: displayedPkg.title ?? "",
49
- })), value: displayedPkg.phid ?? undefined, allowUris: true, autoComplete: true, fetchOptionsCallback: async (userInput) => {
41
+ 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
42
+ ? [
43
+ {
44
+ value: displayedPkg.phid,
45
+ description: displayedPkg.description ?? "",
46
+ path: {
47
+ text: `${config.vetraPackageBasePath}/${displayedPkg.title || ""}`,
48
+ url: `${config.vetraPackageBasePath}/${displayedPkg.title || ""}`,
49
+ },
50
+ title: displayedPkg.title ?? "",
51
+ },
52
+ ]
53
+ : [], value: displayedPkg.phid ?? undefined, allowUris: true, autoComplete: true, fetchOptionsCallback: async (userInput) => {
50
54
  const data = await graphqlClient.request(SEARCH_PACKAGES_QUERY, { search: userInput });
51
55
  const options = data.vetraPackages.map((pkg) => ({
52
56
  id: pkg.documentId,
@@ -93,7 +97,7 @@ export function PackageItem({ pkg, isEditing, onEdit, onDelete, onSave, onCancel
93
97
  };
94
98
  }, onSelect: (e) => {
95
99
  console.log(e.target);
96
- }, 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" })] })] }) }) }));
100
+ }, 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"] }) })] })] }) }) }));
97
101
  }
98
- 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" })] })] }) }));
102
+ 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"] }) })] })] }) }));
99
103
  }
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button, Form, StringField, UrlField } from "@powerhousedao/document-engineering";
3
3
  export function ProfileSection({ profile, isEditing, onSetProfileName, onSetSlug, onSetDescription, onSetLogo, onUpdateSocials, onClose, }) {
4
- 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" }))] })] })] })) })] }));
4
+ 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" }))] })] })] })) })] }));
5
5
  }
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  export function QuickStats({ spaces, members }) {
3
3
  const totalPackages = spaces.reduce((total, space) => total + space.packages.length, 0);
4
- 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 })] })] }) })] }));
4
+ 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 })] })] }) })] }));
5
5
  }
@@ -7,5 +7,5 @@ export function SpaceForm({ initialTitle = "", initialDescription = "", onSave,
7
7
  const handleSave = () => {
8
8
  onSave(title, description);
9
9
  };
10
- 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 })] })] }) }) }));
10
+ 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] }) })] })] }) })] }));
11
11
  }
@@ -6,7 +6,7 @@ function EditSpaceForm({ title, description, onTitleChange, onDescriptionChange,
6
6
  }
7
7
  export function SpaceItem({ space, isEditing, editingSpaceTitle, editingSpaceDescription, editingPackageId, onEdit, onDelete, onSaveEdit, onCancelEdit, onSetEditingTitle, onSetEditingDescription, onAddPackage, onEditPackage, onDeletePackage, onSavePackage, onCancelPackageEdit, }) {
8
8
  if (isEditing) {
9
- return (_jsx("div", { className: "border border-gray-200 rounded-lg p-4", children: _jsx(EditSpaceForm, { title: editingSpaceTitle, description: editingSpaceDescription, onTitleChange: onSetEditingTitle, onDescriptionChange: onSetEditingDescription, onSave: onSaveEdit, onCancel: onCancelEdit }) }));
9
+ 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 }) }));
10
10
  }
11
- return (_jsxs("div", { className: "border border-gray-200 rounded-lg p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-md font-medium text-gray-900", children: space.title }), space.description && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: space.description })), _jsxs("p", { className: "text-xs text-gray-400 mt-1", children: [space.packages.length, " package", space.packages.length !== 1 ? "s" : ""] })] }), _jsxs("div", { className: "flex space-x-2", children: [_jsx(Button, { color: "light", size: "sm", onClick: onEdit, children: "Edit" }), _jsx(Button, { color: "light", size: "sm", onClick: () => onAddPackage(space.id), children: "Add Package" }), _jsx(Button, { color: "red", size: "sm", onClick: onDelete, children: "Delete" })] })] }), space.packages.length > 0 && (_jsx("div", { className: "mt-4 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))) }))] }));
11
+ 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))) }))] }));
12
12
  }
@@ -10,5 +10,5 @@ export function SpacesSection({ spaces, editingSpaceId, editingSpaceTitle, editi
10
10
  setIsAddingSpace(false);
11
11
  }
12
12
  };
13
- 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: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Spaces" }), _jsx("p", { className: "text-sm text-gray-500", children: "Organize your packages into spaces" })] }), _jsx(Button, { onClick: () => setIsAddingSpace(true), children: "Add Space" })] }) }), _jsxs("div", { className: "p-6", children: [isAddingSpace && (_jsx(SpaceForm, { onSave: handleAddSpace, onCancel: () => setIsAddingSpace(false) })), _jsx("div", { className: "space-y-4", children: spaces.length > 0 ? (spaces.map((space) => (_jsx(SpaceItem, { space: space, isEditing: editingSpaceId === space.id, editingSpaceTitle: editingSpaceTitle, editingSpaceDescription: editingSpaceDescription, editingPackageId: editingPackageId, onEdit: () => onStartEditingSpace(space.id), onDelete: () => onDeleteSpace(space.id), onSaveEdit: onSaveSpaceEdit, onCancelEdit: onCancelSpaceEdit, onSetEditingTitle: onSetEditingSpaceTitle, onSetEditingDescription: onSetEditingSpaceDescription, onAddPackage: onAddPackageToSpace, onEditPackage: onEditPackage, onDeletePackage: onDeletePackage, onSavePackage: onSavePackage, onCancelPackageEdit: onCancelPackageEdit }, space.id)))) : (_jsx("div", { className: "text-center py-8 text-gray-500", children: _jsx("p", { children: "No spaces created yet. Create a space to organize your packages." }) })) })] })] }));
13
+ 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 justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Spaces" }), _jsx("p", { className: "text-sm text-gray-600 mt-1", children: "Organize your packages into logical workspaces" })] }), _jsx(Button, { onClick: () => setIsAddingSpace(true), children: _jsxs("span", { className: "inline-flex items-center gap-2", 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 Space"] }) })] }) }), _jsxs("div", { className: "p-6", children: [isAddingSpace && (_jsx(SpaceForm, { onSave: handleAddSpace, onCancel: () => setIsAddingSpace(false) })), _jsx("div", { className: "space-y-5", children: spaces.length > 0 ? (spaces.map((space) => (_jsx(SpaceItem, { space: space, isEditing: editingSpaceId === space.id, editingSpaceTitle: editingSpaceTitle, editingSpaceDescription: editingSpaceDescription, editingPackageId: editingPackageId, onEdit: () => onStartEditingSpace(space.id), onDelete: () => onDeleteSpace(space.id), onSaveEdit: onSaveSpaceEdit, onCancelEdit: onCancelSpaceEdit, onSetEditingTitle: onSetEditingSpaceTitle, onSetEditingDescription: onSetEditingSpaceDescription, onAddPackage: onAddPackageToSpace, onEditPackage: onEditPackage, onDeletePackage: onDeletePackage, onSavePackage: onSavePackage, onCancelPackageEdit: onCancelPackageEdit }, space.id)))) : (_jsxs("div", { className: "text-center py-12 px-4", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4", children: _jsx("svg", { className: "w-8 h-8 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" }) }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: "No spaces yet" }), _jsx("p", { className: "text-gray-600 mb-4", children: "Create a space to organize your packages" }), _jsx(Button, { onClick: () => setIsAddingSpace(true), children: "Create your first space" })] })) })] })] }));
14
14
  }
@@ -1,11 +1,27 @@
1
1
  const getEnvVar = (key, defaultValue) => {
2
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
3
- const value = process.env[key];
4
- return typeof value === "string" ? value : defaultValue;
2
+ // Check if we're in a browser environment
3
+ if (typeof window !== "undefined") {
4
+ // Browser environment - check window object for injected env vars
5
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
6
+ const windowEnv = window.__ENV__;
7
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
8
+ if (windowEnv && typeof windowEnv[key] === "string") {
9
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
10
+ return windowEnv[key];
11
+ }
12
+ }
13
+ // Node.js environment - check process.env
14
+ if (typeof process !== "undefined" && process.env) {
15
+ const value = process.env[key];
16
+ if (typeof value === "string") {
17
+ return value;
18
+ }
19
+ }
20
+ return defaultValue;
5
21
  };
6
22
  export const config = {
7
23
  renownGraphqlEndpoint: getEnvVar("VETRA_RENOWN_GRAPHQL_ENDPOINT", "https://switchboard.renown-staging.vetra.io/graphql"),
8
24
  vetraGraphqlEndpoint: getEnvVar("VETRA_VETRA_GRAPHQL_ENDPOINT", "https://switchboard.staging.vetra.io/graphql"),
9
- renownProfileBasePath: getEnvVar("VETRA_RENOWN_PROFILE_BASE_PATH", "phd://renown-staging.vetra.to/"),
10
- vetraPackageBasePath: getEnvVar("VETRA_VETRA_PACKAGE_BASE_PATH", "phd://staging.vetra.to/"),
25
+ renownProfileBasePath: getEnvVar("VETRA_RENOWN_PROFILE_BASE_PATH", "phd://renown-staging.vetra.to"),
26
+ vetraPackageBasePath: getEnvVar("VETRA_VETRA_PACKAGE_BASE_PATH", "phd://staging.vetra.to"),
11
27
  };
package/dist/style.css CHANGED
@@ -79,12 +79,16 @@
79
79
  --text-xl--line-height: calc(1.75 / 1.25);
80
80
  --text-2xl: 1.5rem;
81
81
  --text-2xl--line-height: calc(2 / 1.5);
82
+ --text-3xl: 1.875rem;
83
+ --text-3xl--line-height: calc(2.25 / 1.875);
82
84
  --font-weight-extralight: 200;
83
85
  --font-weight-normal: 400;
84
86
  --font-weight-medium: 500;
85
87
  --font-weight-semibold: 600;
86
88
  --font-weight-bold: 700;
87
89
  --tracking-wide: 0.025em;
90
+ --tracking-wider: 0.05em;
91
+ --leading-relaxed: 1.625;
88
92
  --radius-sm: 0.25rem;
89
93
  --radius-md: 0.375rem;
90
94
  --radius-lg: 0.5rem;
@@ -265,15 +269,45 @@
265
269
  .mx-auto {
266
270
  margin-inline: auto;
267
271
  }
272
+ .mt-0\.5 {
273
+ margin-top: calc(var(--spacing) * 0.5);
274
+ }
268
275
  .mt-1 {
269
276
  margin-top: calc(var(--spacing) * 1);
270
277
  }
278
+ .mt-1\.5 {
279
+ margin-top: calc(var(--spacing) * 1.5);
280
+ }
271
281
  .mt-2 {
272
282
  margin-top: calc(var(--spacing) * 2);
273
283
  }
274
284
  .mt-4 {
275
285
  margin-top: calc(var(--spacing) * 4);
276
286
  }
287
+ .mb-0\.5 {
288
+ margin-bottom: calc(var(--spacing) * 0.5);
289
+ }
290
+ .mb-1 {
291
+ margin-bottom: calc(var(--spacing) * 1);
292
+ }
293
+ .mb-2 {
294
+ margin-bottom: calc(var(--spacing) * 2);
295
+ }
296
+ .mb-3 {
297
+ margin-bottom: calc(var(--spacing) * 3);
298
+ }
299
+ .mb-4 {
300
+ margin-bottom: calc(var(--spacing) * 4);
301
+ }
302
+ .mb-5 {
303
+ margin-bottom: calc(var(--spacing) * 5);
304
+ }
305
+ .ml-4 {
306
+ margin-left: calc(var(--spacing) * 4);
307
+ }
308
+ .ml-6 {
309
+ margin-left: calc(var(--spacing) * 6);
310
+ }
277
311
  .block {
278
312
  display: block;
279
313
  }
@@ -286,30 +320,75 @@
286
320
  .grid {
287
321
  display: grid;
288
322
  }
323
+ .inline-flex {
324
+ display: inline-flex;
325
+ }
289
326
  .table {
290
327
  display: table;
291
328
  }
329
+ .h-3 {
330
+ height: calc(var(--spacing) * 3);
331
+ }
332
+ .h-3\.5 {
333
+ height: calc(var(--spacing) * 3.5);
334
+ }
335
+ .h-4 {
336
+ height: calc(var(--spacing) * 4);
337
+ }
338
+ .h-5 {
339
+ height: calc(var(--spacing) * 5);
340
+ }
292
341
  .h-6 {
293
342
  height: calc(var(--spacing) * 6);
294
343
  }
344
+ .h-8 {
345
+ height: calc(var(--spacing) * 8);
346
+ }
295
347
  .h-10 {
296
348
  height: calc(var(--spacing) * 10);
297
349
  }
298
350
  .h-12 {
299
351
  height: calc(var(--spacing) * 12);
300
352
  }
353
+ .h-16 {
354
+ height: calc(var(--spacing) * 16);
355
+ }
356
+ .h-20 {
357
+ height: calc(var(--spacing) * 20);
358
+ }
301
359
  .min-h-screen {
302
360
  min-height: 100vh;
303
361
  }
362
+ .w-3 {
363
+ width: calc(var(--spacing) * 3);
364
+ }
365
+ .w-3\.5 {
366
+ width: calc(var(--spacing) * 3.5);
367
+ }
368
+ .w-4 {
369
+ width: calc(var(--spacing) * 4);
370
+ }
371
+ .w-5 {
372
+ width: calc(var(--spacing) * 5);
373
+ }
304
374
  .w-6 {
305
375
  width: calc(var(--spacing) * 6);
306
376
  }
377
+ .w-8 {
378
+ width: calc(var(--spacing) * 8);
379
+ }
307
380
  .w-10 {
308
381
  width: calc(var(--spacing) * 10);
309
382
  }
310
383
  .w-12 {
311
384
  width: calc(var(--spacing) * 12);
312
385
  }
386
+ .w-16 {
387
+ width: calc(var(--spacing) * 16);
388
+ }
389
+ .w-20 {
390
+ width: calc(var(--spacing) * 20);
391
+ }
313
392
  .max-w-7xl {
314
393
  max-width: var(--container-7xl);
315
394
  }
@@ -328,6 +407,9 @@
328
407
  .grid-cols-1 {
329
408
  grid-template-columns: repeat(1, minmax(0, 1fr));
330
409
  }
410
+ .flex-wrap {
411
+ flex-wrap: wrap;
412
+ }
331
413
  .items-center {
332
414
  align-items: center;
333
415
  }
@@ -340,12 +422,24 @@
340
422
  .justify-end {
341
423
  justify-content: flex-end;
342
424
  }
425
+ .gap-1 {
426
+ gap: calc(var(--spacing) * 1);
427
+ }
428
+ .gap-1\.5 {
429
+ gap: calc(var(--spacing) * 1.5);
430
+ }
431
+ .gap-2 {
432
+ gap: calc(var(--spacing) * 2);
433
+ }
343
434
  .gap-3 {
344
435
  gap: calc(var(--spacing) * 3);
345
436
  }
346
437
  .gap-4 {
347
438
  gap: calc(var(--spacing) * 4);
348
439
  }
440
+ .gap-6 {
441
+ gap: calc(var(--spacing) * 6);
442
+ }
349
443
  .gap-8 {
350
444
  gap: calc(var(--spacing) * 8);
351
445
  }
@@ -370,6 +464,13 @@
370
464
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
371
465
  }
372
466
  }
467
+ .space-y-5 {
468
+ :where(& > :not(:last-child)) {
469
+ --tw-space-y-reverse: 0;
470
+ margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
471
+ margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
472
+ }
473
+ }
373
474
  .space-y-6 {
374
475
  :where(& > :not(:last-child)) {
375
476
  --tw-space-y-reverse: 0;
@@ -398,11 +499,11 @@
398
499
  margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
399
500
  }
400
501
  }
401
- .space-x-4 {
502
+ .space-x-5 {
402
503
  :where(& > :not(:last-child)) {
403
504
  --tw-space-x-reverse: 0;
404
- margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
405
- margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
505
+ margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
506
+ margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
406
507
  }
407
508
  }
408
509
  .truncate {
@@ -410,8 +511,8 @@
410
511
  text-overflow: ellipsis;
411
512
  white-space: nowrap;
412
513
  }
413
- .rounded {
414
- border-radius: 0.25rem;
514
+ .overflow-hidden {
515
+ overflow: hidden;
415
516
  }
416
517
  .rounded-full {
417
518
  border-radius: calc(infinity * 1px);
@@ -419,10 +520,17 @@
419
520
  .rounded-lg {
420
521
  border-radius: var(--radius-lg);
421
522
  }
523
+ .rounded-xl {
524
+ border-radius: var(--radius-xl);
525
+ }
422
526
  .border {
423
527
  border-style: var(--tw-border-style);
424
528
  border-width: 1px;
425
529
  }
530
+ .border-t {
531
+ border-top-style: var(--tw-border-style);
532
+ border-top-width: 1px;
533
+ }
426
534
  .border-b {
427
535
  border-bottom-style: var(--tw-border-style);
428
536
  border-bottom-width: 1px;
@@ -430,12 +538,15 @@
430
538
  .border-gray-200 {
431
539
  border-color: var(--color-gray-200);
432
540
  }
433
- .bg-blue-600 {
434
- background-color: var(--color-blue-600);
541
+ .border-gray-300 {
542
+ border-color: var(--color-gray-300);
435
543
  }
436
544
  .bg-gray-50 {
437
545
  background-color: var(--color-gray-50);
438
546
  }
547
+ .bg-gray-100 {
548
+ background-color: var(--color-gray-100);
549
+ }
439
550
  .bg-gray-300 {
440
551
  background-color: var(--color-gray-300);
441
552
  }
@@ -445,33 +556,48 @@
445
556
  .object-cover {
446
557
  object-fit: cover;
447
558
  }
448
- .p-2 {
449
- padding: calc(var(--spacing) * 2);
450
- }
451
559
  .p-3 {
452
560
  padding: calc(var(--spacing) * 3);
453
561
  }
454
562
  .p-4 {
455
563
  padding: calc(var(--spacing) * 4);
456
564
  }
565
+ .p-5 {
566
+ padding: calc(var(--spacing) * 5);
567
+ }
457
568
  .p-6 {
458
569
  padding: calc(var(--spacing) * 6);
459
570
  }
571
+ .px-3 {
572
+ padding-inline: calc(var(--spacing) * 3);
573
+ }
460
574
  .px-4 {
461
575
  padding-inline: calc(var(--spacing) * 4);
462
576
  }
463
577
  .px-6 {
464
578
  padding-inline: calc(var(--spacing) * 6);
465
579
  }
580
+ .py-2 {
581
+ padding-block: calc(var(--spacing) * 2);
582
+ }
466
583
  .py-4 {
467
584
  padding-block: calc(var(--spacing) * 4);
468
585
  }
469
- .py-6 {
470
- padding-block: calc(var(--spacing) * 6);
586
+ .py-5 {
587
+ padding-block: calc(var(--spacing) * 5);
471
588
  }
472
589
  .py-8 {
473
590
  padding-block: calc(var(--spacing) * 8);
474
591
  }
592
+ .py-12 {
593
+ padding-block: calc(var(--spacing) * 12);
594
+ }
595
+ .pt-2 {
596
+ padding-top: calc(var(--spacing) * 2);
597
+ }
598
+ .pt-4 {
599
+ padding-top: calc(var(--spacing) * 4);
600
+ }
475
601
  .text-center {
476
602
  text-align: center;
477
603
  }
@@ -482,6 +608,14 @@
482
608
  font-size: var(--text-2xl);
483
609
  line-height: var(--tw-leading, var(--text-2xl--line-height));
484
610
  }
611
+ .text-3xl {
612
+ font-size: var(--text-3xl);
613
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
614
+ }
615
+ .text-base {
616
+ font-size: var(--text-base);
617
+ line-height: var(--tw-leading, var(--text-base--line-height));
618
+ }
485
619
  .text-lg {
486
620
  font-size: var(--text-lg);
487
621
  line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -490,10 +624,18 @@
490
624
  font-size: var(--text-sm);
491
625
  line-height: var(--tw-leading, var(--text-sm--line-height));
492
626
  }
627
+ .text-xl {
628
+ font-size: var(--text-xl);
629
+ line-height: var(--tw-leading, var(--text-xl--line-height));
630
+ }
493
631
  .text-xs {
494
632
  font-size: var(--text-xs);
495
633
  line-height: var(--tw-leading, var(--text-xs--line-height));
496
634
  }
635
+ .leading-relaxed {
636
+ --tw-leading: var(--leading-relaxed);
637
+ line-height: var(--leading-relaxed);
638
+ }
497
639
  .font-bold {
498
640
  --tw-font-weight: var(--font-weight-bold);
499
641
  font-weight: var(--font-weight-bold);
@@ -506,8 +648,9 @@
506
648
  --tw-font-weight: var(--font-weight-semibold);
507
649
  font-weight: var(--font-weight-semibold);
508
650
  }
509
- .text-blue-600 {
510
- color: var(--color-blue-600);
651
+ .tracking-wider {
652
+ --tw-tracking: var(--tracking-wider);
653
+ letter-spacing: var(--tracking-wider);
511
654
  }
512
655
  .text-gray-400 {
513
656
  color: var(--color-gray-400);
@@ -524,21 +667,68 @@
524
667
  .text-gray-900 {
525
668
  color: var(--color-gray-900);
526
669
  }
527
- .text-white {
528
- color: var(--color-white);
670
+ .uppercase {
671
+ text-transform: uppercase;
672
+ }
673
+ .italic {
674
+ font-style: italic;
675
+ }
676
+ .shadow-md {
677
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
678
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
529
679
  }
530
680
  .shadow-sm {
531
681
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
532
682
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
533
683
  }
684
+ .ring-2 {
685
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
686
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
687
+ }
688
+ .ring-gray-200 {
689
+ --tw-ring-color: var(--color-gray-200);
690
+ }
534
691
  .filter {
535
692
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
536
693
  }
694
+ .transition-all {
695
+ transition-property: all;
696
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
697
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
698
+ }
537
699
  .transition-colors {
538
700
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
539
701
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
540
702
  transition-duration: var(--tw-duration, var(--default-transition-duration));
541
703
  }
704
+ .group-hover\:ring-gray-300 {
705
+ &:is(:where(.group):hover *) {
706
+ @media (hover: hover) {
707
+ --tw-ring-color: var(--color-gray-300);
708
+ }
709
+ }
710
+ }
711
+ .hover\:border-gray-300 {
712
+ &:hover {
713
+ @media (hover: hover) {
714
+ border-color: var(--color-gray-300);
715
+ }
716
+ }
717
+ }
718
+ .hover\:border-gray-400 {
719
+ &:hover {
720
+ @media (hover: hover) {
721
+ border-color: var(--color-gray-400);
722
+ }
723
+ }
724
+ }
725
+ .hover\:bg-gray-50 {
726
+ &:hover {
727
+ @media (hover: hover) {
728
+ background-color: var(--color-gray-50);
729
+ }
730
+ }
731
+ }
542
732
  .hover\:bg-gray-100 {
543
733
  &:hover {
544
734
  @media (hover: hover) {
@@ -546,10 +736,10 @@
546
736
  }
547
737
  }
548
738
  }
549
- .hover\:text-blue-800 {
739
+ .hover\:text-gray-900 {
550
740
  &:hover {
551
741
  @media (hover: hover) {
552
- color: var(--color-blue-800);
742
+ color: var(--color-gray-900);
553
743
  }
554
744
  }
555
745
  }
@@ -560,6 +750,22 @@
560
750
  }
561
751
  }
562
752
  }
753
+ .hover\:shadow-md {
754
+ &:hover {
755
+ @media (hover: hover) {
756
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
757
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
758
+ }
759
+ }
760
+ }
761
+ .hover\:shadow-sm {
762
+ &:hover {
763
+ @media (hover: hover) {
764
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
765
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
766
+ }
767
+ }
768
+ }
563
769
  .sm\:px-6 {
564
770
  @media (width >= 40rem) {
565
771
  padding-inline: calc(var(--spacing) * 6);
@@ -5081,14 +5287,6 @@ input[type="number"] {
5081
5287
  inherits: false;
5082
5288
  initial-value: 0;
5083
5289
  }
5084
- @property --tw-leading {
5085
- syntax: "*";
5086
- inherits: false;
5087
- }
5088
- @property --tw-tracking {
5089
- syntax: "*";
5090
- inherits: false;
5091
- }
5092
5290
  @property --tw-outline-style {
5093
5291
  syntax: "*";
5094
5292
  inherits: false;
@@ -10884,10 +11082,18 @@ input[type="number"] {
10884
11082
  inherits: false;
10885
11083
  initial-value: solid;
10886
11084
  }
11085
+ @property --tw-leading {
11086
+ syntax: "*";
11087
+ inherits: false;
11088
+ }
10887
11089
  @property --tw-font-weight {
10888
11090
  syntax: "*";
10889
11091
  inherits: false;
10890
11092
  }
11093
+ @property --tw-tracking {
11094
+ syntax: "*";
11095
+ inherits: false;
11096
+ }
10891
11097
  @property --tw-shadow {
10892
11098
  syntax: "*";
10893
11099
  inherits: false;
@@ -11022,7 +11228,9 @@ input[type="number"] {
11022
11228
  --tw-space-y-reverse: 0;
11023
11229
  --tw-space-x-reverse: 0;
11024
11230
  --tw-border-style: solid;
11231
+ --tw-leading: initial;
11025
11232
  --tw-font-weight: initial;
11233
+ --tw-tracking: initial;
11026
11234
  --tw-shadow: 0 0 #0000;
11027
11235
  --tw-shadow-color: initial;
11028
11236
  --tw-shadow-alpha: 100%;
@@ -11062,8 +11270,6 @@ input[type="number"] {
11062
11270
  --tw-skew-x: initial;
11063
11271
  --tw-skew-y: initial;
11064
11272
  --tw-divide-y-reverse: 0;
11065
- --tw-leading: initial;
11066
- --tw-tracking: initial;
11067
11273
  --tw-outline-style: solid;
11068
11274
  --tw-duration: initial;
11069
11275
  --tw-ease: initial;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@powerhousedao/vetra-builder-package",
3
3
  "description": "",
4
- "version": "0.0.18",
4
+ "version": "0.0.20",
5
5
  "license": "AGPL-3.0-only",
6
6
  "type": "module",
7
7
  "files": [